hexo-next添加文章置顶功能和评分功能等

一些说明

此篇教程是基于hexo博客Next主题

由于需要对网站进行一些简单的说明,或者有很重要的信息需告知访问者,这时候我们就需要使用网站置顶的功能。比如为加快网站访问速度,我的网站使用了Hexo缓存插件,更新新的内容后,可能需要手动刷新页面,就可以通过置顶文章来说明了。
我的一位好朋友之前说加上文章点赞功能,否则他看完了都不能表示点什么,因此就加上了这个评分功能。

添加文章置顶功能

安装插件

卸载原来的插件,安装带置顶功能的插件netcan/hexo-generator-index-pin-top: Index generator plugin for Hexo. Pin top version

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

使用

在需要置顶的文章中的Front-matter加入top: true即可。

优化

打开/themes/next/layout/_macro下的post.swig文件,定位到<div class="post-meta">下(约63行),插入如下代码:

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

如图:

pic

最终效果:

pic

添加评分功能

修改主题配置文件_config.yml,修改为:

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: true
id:
color: f79533

再打开 https://widgetpack.com ,首页点 Rating, 注册一个账号,完成后左上角有一个ID,填入即可。

  1. 可以配置评分方式,侧栏 > Rating > Setting,建议用 IP address 或 Device(cookie),免登录
  2. 建议 侧栏 > Site > Setting 中勾选 Private 选项。

修改内容区宽度

针对Picses样式,修改next/source/css/_schemes/Picses/_layout.styl,文件末尾添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 白色区域的最大宽度
$white_max_width = 1200px

header{
width: 90% !important;
max-width: $white_max_width;
}
header.post-header {
width: auto !important;
}
.container .main-inner {
width: 90%;
max-width: $white_max_width;
}
.content-wrap { width: calc(100% - 260px); }


.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}


.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
// 为了在手机访问时,内边距不至于太大
padding: 0 !important;
width: 100% !important;
}
}

修改完成后需要hexo clean再重新生成文件生效。

参考:
hexo博客优化之文章置顶+置顶标签 - qwerty200696的博客
打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
修改NexT Pisces主题样式 | PJ’S BLOG

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