使用库:参考 http://wangwlj.com/2018/01/09/blog_pin_post/

目前已经有修改后支持置顶的仓库,可以直接用以下命令安装。(cmd 到博客根目录,nmp运行)

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章:

---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---

到目前为止,置顶功能已经可以实现了。

设置置顶标志

打开:/blog/themes/next/layout/_macro 目录下的post.swig文件,定位到

标签下,插入如下代码:

{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

简单方法:可能有问题

参考 https://zhwhong.cn/2017/03/23/deal-with-hexo-article-top-problem/

原理:在Hexo生成首页HTML时,将top值高的文章排在前面,达到置顶功能。

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js,在生成文章之前进行文章top值排序。

需添加的代码:

posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});

修改完成后,只需要在front-matter中设置需要置顶文章的top值,将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是,这个文件不是主题的一部分,也不是Git管理的,备份的时候比较容易忽略。

以下是最终的generator.js内容

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals) {
var config = this.config;
var posts = locals.posts.sort(config.index_generator.order_by);
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

HEXO添加置顶功能的更多相关文章

  1. PHPCMS实现文章置顶功能的方法

    我个人喜欢把PHPCMS当作博客来用,而作为一个博客,怎能少了文章置顶功能呢?其中用PHPCMS实现置顶功能非常简单,无非是修改下推荐位的名称为置顶,然后在文章列表中推送需要置顶的文章罢了. 不过博客 ...

  2. Android自定义ScrollView实现一键置顶功能

    效果图如下: (ps:动态图有太大了,上传不了,就给大家口述一下要实现的功能吧) 要实现的功能:当ScrollView向上滑动超过一定距离后,就渐变的出现一个置顶的按钮,当滑动距离小于我们指定的距离时 ...

  3. IOS 作业项目 TableView两个section中cell置顶功能实现

    点击cell会置顶,其他的下移

  4. QT 窗口置顶功能

    Qt中,保持窗口置顶的设置为: Qt::WindowFlags m_flags = windowFlags(); setWindowFlags(m_flags | Qt::WindowStaysOnT ...

  5. sql 置顶功能的查询

    sql中有置顶的需求,文章很多条,分页查询,要求置顶的在最前面: 只需要使用: order by 置顶字段 即可

  6. php 排序和置顶功能实现

    (1)排序操作思路 一般来说都是按照发布时间排序.时间戳大的靠前,所以用倒序desc,而不是asc (2)置顶操作思路: 点击置顶时,修改数据库addtime字段值为当前时间即可.因为排序是按照时间戳 ...

  7. jquery实现页面置顶功能代码

    <html> <head> <title></title><script type='text/javascript> //回到顶部功能 f ...

  8. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

  9. winform窗体置顶

    winform窗体置顶 金刚 winform 置顶 今天做了一个winform小工具.需要设置置顶功能. 网上找了下,发现百度真的很垃圾... 还是必应靠谱些. 找到一个可以链接. https://s ...

随机推荐

  1. Dubbo的设计理念原来就藏在这三张图中

    Dubbo在众多的微服务框架中脱颖而出,占据RPC服务框架的半壁江山,非常具有普适性,熟练掌握 Dubbo的应用技巧后深刻理解其内部实现原理,让大家能更好的掌控工作,助力职场,特别能让大家在面试中脱颖 ...

  2. 08--Docker安装Mysql

    1.在hub.docker.com中查找5.7版本 2.拉取mysql docker pull mysql:5.7 3.启动mysql镜像 docker run -p 3306:3306 --name ...

  3. centos7下 开启/关闭/查看firewall运行状态命令

    1.开启防火墙:systemctl start firewalld.service [root@localhost bin]# systemctl start firewalld.service [r ...

  4. PAT Advanced 1007 Maximum Subsequence Sum

    题目 1007 Maximum Subsequence Sum (25分) Given a sequence of K integers { N1, N2, ..., N**K }. A contin ...

  5. .NET Core 问题记录

    前言: 最近在项目中遇到了遇到了写部署步骤过多的问题,为了减少.net core项目部署步骤:需要对一些基础问题进行验证: 如端口设置.单页应用程序(angluar)合并部署方式等相关问题,特将解决过 ...

  6. 前序遍历 排序 二叉搜索树 递归函数的数学定义 return 递归函数不能定义为内联函数 f(x0)由f(f(x0))决定

    遍历二叉树   traversing binary tree 线索二叉树 threaded binary tree 线索链表 线索化 1. 二叉树3个基本单元组成:根节点.左子树.右子树 以L.D.R ...

  7. C++ Primer Plus读书笔记(八)函数探幽

    1.内联函数 inline int square(x) {return x*x} 2.引用变量 int& 中的& 不是地址运算符,就想定义指针时的char* 一样,int&指的 ...

  8. Web信息收集-目标扫描-Nmap

    Web信息收集-目标扫描-Nmap 一.Nmap简介 二.扫描示例 使用主机名扫描: 使用IP地址扫描: 扫描多台主机: 扫描整个子网 使用IP地址的最后一个字节扫描多台服务器 从一个文件中扫描主机列 ...

  9. Phoenix简介概述,Phoenix的Java API 相关操作优秀案例

    Phoenix简介概述,Phoenix的Java API 相关操作优秀案例 一.Phoenix概述简介 二.Phoenix实例一:Java API操作 2.1 phoenix.properties 2 ...

  10. 网络编程(socket简介)

    socket简介 Python 提供了两个基本的 socket 模块. 第一个是 Socket,它提供了标准的 BSD Sockets API. 第二个是 SocketServer, 它提供了服务器中 ...