hexo 文章置顶插件 添加置顶图标

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

已经有了有大佬开发了置顶插件了，安装插件，然后在front-matter中配置一下就好了

卸载hexo-generator-index插件

hexo站点目录下，输入下面命令卸载插件

1
npm uninstall hexo-generator-index --save

安装hexo-generator-index-pin-top插件

hexo站点目录下，输入下面命令安装插件

1
npm install hexo-generator-index-pin-top --save

添加front-matter配置项

在需要置顶的文章的Front-matter中加上top: true即可实现文章置顶功能。

重新部署

1
hexo clean &&hexo s

这样就可以看到置顶的文章了，但是还没有显示置顶标签，下面来添加置顶标识。

添加置顶标识

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

1
2
3
4
5
6
7
8
9
  <div class="post-meta">
<!-- 置顶插件添加 开始 -->
{% if post.top %}
     <font color="#1fa67a"><i class="fa fa-arrow-up"></i>
     <strong>Top</strong></font>
     <span class="post-meta-divider">|</span>
    {% endif %}
<!-- 置顶插件添加 结束 -->
 .........

如果显示出现了中文乱码,则把post.swig转为utf-8格式即可,转换步骤：全选post.swing中的内容,然后修改post.swing的编码为utf-8,然后粘贴到post.swing中,这样就修改了post.swing的编码格式了。
显示效果：
这里有一张图片

参考资料

插件github地址: https://github.com/netcan/hexo-generator-index-pin-top
开发插件的大佬的教程: http://www.netcan666.com/2015/11/22/解决Hexo置顶问题/
添加置顶图标教程: http://wangwlj.com/2018/01/09/blog_pin_post/
Hexo博客功能优化: https://www.itfanr.cc/2017/12/06/hexo-blog-optimization/#文章置顶
如何使用FrontAwesome图标