【真香】hexo-theme-hiero增加文章置顶功能

一、单个博文置顶

一种方法是手动对相关文件进行修改，具体可参考这篇文章。

另一种方法就是，目前已经有修改后支持置顶的仓库，可以直接用以下命令安装。

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

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

title: 核心解密Python函数在（类与函数之间）和（类与类之间）互相调用
categories: 编程小技巧
comments: true
top: true
date: 2020-07-01
photos: 
  - "https://img.haomeiwen.com/i15863171/730c308d8c2138a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/928/format/webp.jpg"

到目前为止，置顶功能已经可以实现了。所有相关博文到这边就结束了。
如果没有该文件，可以新建一个：

image.png

不过置顶的文章显示在最上面之后，如果没有明确的置顶标志，是不是感觉有点怪怪的呢？

设置置顶标志
打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

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

效果展示：

image.png

添加"置顶"一次之后：

二、多个Hexo博文按顺序置顶

使用的是top属性，top值越高，排序越在前，不设置top值得博文按照时间顺序排序。
修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js

打开在最后添加如下javascript代码

//按照置顶的顺序
  posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章都有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的排在前面
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date;    //都没有top标签，最新的文章在前面
});

如下所示：

image.png

在写文章的时候添加top属性就行了。

文章有多种属性，一个一个添加是不是很麻烦呢？

这个时候可以修改：HEXO博客的scaffolds\post.md

附上个人的post设置

下面我们来看看效果：top: 1 和top: 2

image.png image.png

部署到博客的结果如下：

image.png