Hexo 博客文章置顶设置方法
Posted zjcao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hexo 博客文章置顶设置方法相关的知识,希望对你有一定的参考价值。
设置文章置顶
1. 修改仓库,使其支持置顶功能
可以直接运行以下命令进行安装:
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
2. 在文章中添加置顶信息
在需要置顶的文章Front-matter
中加上top: true
或top: 10
即可。
title: Hello World!
date: 2018-06-26 10:37:59
tags: 随笔
top: 10
top: 后的数字越大,表示置顶的权限越高。比如:你有10篇文章要置顶,可以依次排序。
设置置顶标志
打开:/blog/themes/next/layout/_macro/post.swig
文件,定位到<div class="post-meta">
标签下,插入以下代码。
{% if post.top %}
<span class="post-meta-item-icon">
<i class="fa fa-thumb-tack"></i>
</span>
<font color="red">置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
添加效果如下图图所示:
注,一定要插入在
<div class="post-meta">
标签第一行下面。(即文章日期前面添加置顶图标。)
<font color="red">
图标颜色可以根据需要输入英文(如:red
),或颜色值(如:ff0000
表示红色)。
最终效果
以上是关于Hexo 博客文章置顶设置方法的主要内容,如果未能解决你的问题,请参考以下文章