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

文章置顶

方法一

手动对相关文件进行修改,参考:

解决Hexo博客文章置顶问题

方法二

参考github上开源项目,命令操作如下:

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

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

1
2
3
4
5
6
7
8
---
title: java应用导致JVM内存溢出(OOM)的问题
top: 2
tags:
- JVM
categories:
- java
---

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

文章置顶功能以实现。不过确实置顶图标。。。

设置置顶图标

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

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

代码位置截图:

nOtR2Q.png

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

nOtoV0.png

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

精品文章

相对而言就比较简单了

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

1
2
3
4
5
6
{% 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、在themes/next/source/css/_custom/custom.styl中,增加如下样式:

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

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

1
essential: true

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

点击查看

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

文章作者:北宸

发布时间:2019年08月11日 - 16:23:45

最后更新:2019年09月19日 - 22:54:56

原始链接:https://leafjame.github.io/posts/1076109730.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------