Hexo NexT主题之「文章置顶、精品」

文章置顶

方法一

手动对相关文件进行修改，参考：

解决 hexo 文章置顶问题

方法二

参考 github 上项目，命令操作如下：

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

在需要置顶的文章 Front-matter 加上 top: true 或者 top: 任意数字，比如：

---
title:  java应用导致JVM内存溢出（OOM）的问题
top: 2
tags:
 - JVM
categories:
 - java
---

top 中数字越大，文章越靠前

文章置顶功能已实现。不过还缺失置顶图标。

设置置顶图标

打开 next/layout/_macro/ 下的 post.swig 文件，在 <div class="post-meta"> 的第一个 <span> 标签下，插入代码：

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

代码位置截图：

最终文章置顶效果图如下：

至此，文章置顶功能完成。

精品文章

相对而言就比较简单了

1、在 next/layout/_macro/ 路径，找到 post.swig，在前文置顶功能后边，加上如下代码：

{% if post.essential%}
     <span class="post-meta-item-icon">
         <i class="fa fa-newspaper-o jingping">精品</i>
     </span>
     <span class="post-meta-divider">|</span>
 {% endif %}

2、在 next/source/css/_custom/custom.styl 中，增加如下样式：

.jingping{
  background : #00a8c3;
  padding:2px 4px 2px 4px;
  color: #fff;
}

3、在需要设置精品的文章 md 文件中，加入如下代码

essential: true

到此就完成了精品文章的设置