码迷,mamicode.com
首页 > 其他好文 > 详细

Hexo 博客文章置顶设置方法

时间:2018-07-06 19:41:47      阅读:1866      评论:0      收藏:0      [点我收藏+]

标签:功能   mes   --   排序   att   Matter   bsp   安装   添加   

设置文章置顶

1. 修改仓库,使其支持置顶功能

可以直接运行以下命令进行安装:

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

2. 在文章中添加置顶信息

在需要置顶的文章Front-matter中加上top: truetop: 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 博客文章置顶设置方法

标签:功能   mes   --   排序   att   Matter   bsp   安装   添加   

原文地址:https://www.cnblogs.com/zjcao/p/9275198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!