hexo博客优化之文章置顶+置顶标签

本文首发于wangwlj.com

博文置顶

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

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

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

然后在需要置顶的文章的Front-matter中加上top: true(top 的值可以是 true,也可以是 n,n 越大代表级别越高)即可。比如下面这篇文章:

1
2
3
4
5
6
---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---

到目前为止,置顶功能已经可以实现了。所有相关博文到这边就结束了。

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

设置置顶标志

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

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 %}

效果展示:


作者:qwerty200696
来源:CSDN
原文:https://blog.csdn.net/qwerty200696/article/details/79010629
版权声明:本文为博主原创文章,转载请附上博文链接!

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: Leo
  • 本文链接: https://xuebin.me/posts/78da659c.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!