专注于互联网分享

0%

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

发表于 更新于 分类于 Valine：

一些说明

此篇教程是基于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