Hexo中NexT主题添加置顶功能

发表于 | 分类于 | | 阅读次数:
字数统计: 300 | 阅读时长 ≈ 1

前言

文章置顶功能有很多的好处，比如：

  1. 快速定位
  2. 吸引用户注意力
  3. 。。。

所以下面就介绍如何在hexo的next主题中添加文章置顶功能。

安装库

目前已经有修改后支持置顶的仓库，可以直接用以下命令安装。

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

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章：

1
2
3
4
5
6
7
8
9
10
---
title: 我的2018总结
tags:
  - 随笔
categories:
  - 随笔
abbrlink: 58a24148
date: 2018-12-31 11:45:59
top: true
---

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

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

设置置顶标志

打开：/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="green">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}


效果请返回主页 或者顶部查看
0%