Hexo添加置顶功能和标识

首先看下效果
效果图

具体实现

安装插件

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
---
title: 无JS实现在线客服的切换效果
date: 2018-12-20 15:05:17
tags:
- css
- css3
categories: CSS
top: true
---

到此为止,文章的置顶功能就实现了,但是我们还需要给置顶的文章加个标识,如

So,我们需要加一个图标或者文字标签
这里我做了一个简单的,你可以修改一下,做一个好看的图标

添加标识

如果你使用的是next的主题,打开目录themes/next/layout/_macro,找到文件post.swig,搜索

1
</{% if theme.seo %}h2{% else %}h1{% endif %}>

大概在65行,在他上面添加

1
2
3
{% if post.top %}
<span style="color:#f00;border:1px solid #f00;padding:2px 5px;font-size:12px;">置顶</span>
{% endif %}

这是你会发现标识出现了,但是高度有些错位,在themes/next/source/_custom中找到custom.styl文件,添加一行

1
2
3
.posts-expand .post-title {
line-height:1
}

这时你就可以看到具体的效果了

当然你可以添加更好看的图标,只需要修改HTML和CSS即可。

坚持原创技术分享,您的支持将鼓励我继续创作!
0%