Hexo+NexT 打造一个炫酷博客
原文作者：sun_xy
原文标题：Hexo+NexT 打造一个炫酷博客
原文地址：https://sun_xy.gitee.io/blog/2018/10/16/hexo_next_blog/
写在前面
本文主要是NexT主题配置以及页面的样式优化，参考了许多大佬的文章以及配置文件。
本文参考的文章都会直接给出原文链接或者以注脚的形式标记出处，但 Google 参考了实在太多太多了，如有遗漏，欢迎指出。
前期整个博客优化配置过程中收藏了许多很好的博客，回头可以贴个友情链接大家可以去看看。
本文内容会在后续的优化中慢慢补充完整：
- 新建日期：2018-10-16
- 更新日期: 2018-10-17
基本定义
在 Hexo 中有两份主要的配置文件，其名称都是_config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。
站点配置文件路径1
~/hexo/_config.yml
主题配置文件路径1
~/hexo/themes/next/_config.yml
博客搭建
初级 基础功能篇
站点配置文件
最权威的当然是先看Hexo官方文档
下面是我在用的配置文件: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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101## 站点设置
title: 雜言非語
subtitle: 成為一個厲害得普通人
description: 小人物,码农
keywords:
author: Sun XY
language: zh-Hans
timezone:
#主题设置
theme: next
# 博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sun_xy.gitee.io/blog/
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# 写作文章设置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 5
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# 日期格式/时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# 分页设置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
#RSS订阅是设置
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# 发布部署地址设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://gitee.com/Sun_xy/blog.git
branch: master
# 博客搜索功能配置
search:
path: search.xml
field: post
format: html
limit: 10000
# 文章推荐功能,需要安装插件
recommended_posts:
server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
internalLinks: 3 #内部文章数量
externalLinks: 1 #外部文章数量
fixedNumber: false
autoDisplay: false #自动在文章底部显示推荐文章
excludePattern: []
titleHtml: <h1>推荐文章</h1> #自定义标题
###主题配置文件
最权威的当然是先看NexT使用文档
下面是我在用的配置文件:
配置文件参考了reuixiy大佬的配置
1 | # --------------------------------------------------------------- |
进阶 网页样式篇
需要了解的
浏览器按 F12 即可，建议用Google Chrome 浏览器调试。
自定义样式文件 :themes\next\source\css\_custom\custom.styl
修改文件后直接保存，刷新页面即可查看效果。
修改文章页宽
打开themes/next/source/css/_variables/base.styl，找到以下字段并修改为合适的宽度：
1 | - $content-desktop-large = 900px |
修改小型代码块颜色
修改\themes\next\source\css\ _variables\base.styl文件，加入自定义颜色：
1 | $black-deep = #222 |
修改$code-background和$code-foreground的值：
1 | // Code & Code Blocks |
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
1 | // 文章``代码块的自定义样式 |
修改链接文字样式
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
1 | // 文章内链接文本样式 |
修改[Read More]按钮样式
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
1 | // [Read More]按钮样式 |
修改标签云（tagcloud）的颜色
修改themes/next/layout/page.swig文件，加入自定义样式:
1 | - {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }} |
修改对应参数值即可，参数说明见 Hexo官方文档
修改文章底部#号标签,改为图标
修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
头像设置圆形,停留旋转效果
修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl,新增以下代码:
1 | .site-author-image { |
隐藏底部”强力驱动”内容
修改themes/next/_config.yml文件,将powered和enable设置为false
1 | # 页脚 |
文章末尾添加”本文结束”标记
修改在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代码：1
2
3
4
5
6+ <div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
文章末尾追加版权信息
增加版权有两种方式
修改
主题配置文件,搜索post_copyright1
2
3
4
5post_copyright:
- enable: false
+ enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/如果觉得默认不好看,则可以自定义样式,找到
themes/next/layout/_macro/post.swig，在footer之前添加如下代码(添加之前确保已添加样式)：
1 | <div> |
添加背景图片
通过 jquery-backstretch，具体操作呢，编辑文件/themes/next/layout/_layout.swig，加入到文件最后面前面即可。1
2
3
4+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
+ <script>
+ $("body").backstretch("https://背景图.jpg");
+ </script>
移动端显示 back-to-top 按钮和侧栏
具体手机显示可用手机访问我的博客
我的博客主题是Muse，主题的设计模版是 Muse 或 Mist，就可以直接在主题配置文件中配置：
修改主题配置themes/next/_config.yml
1 | # Enable sidebar on narrow view |
如何调试手机样式页面，请自行查询
页面调试好之后将代码复制到:themes\next\source\css\_custom\custom.styl
附上我的custom.styl样式文件
不建议全部复制粘贴使用，最好是F12打开，根据关键ID找到对应的样式，复制到自己的文件中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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407// Custom styles.
/*******************首页样式*****************************/
// 顶栏宽度
.container .header-inner {
width: 100%;
}
// .headband {
// height: 1.5px;
// background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }
// 页面顶部行高
.header {
line-height: 1.5;
}
// // 页面背景色
// .container {
// background-color: rgba(0, 0, 0, 0.75);
// }
// 页面留白更改
.header-inner {
padding-top: 35px;
padding-bottom: 0px;
}
.posts-expand {
padding-top: 50px;
}
.posts-expand .post-meta {
margin: 5px 0px 0px 0px;
}
.post-button {
margin-top: 0px;
}
// 顶栏宽度
.container .header-inner {
width: 100%;
}
// 渐变菜带，CSS代码copy自https://githubuniverse.com
// .site-meta {
// background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }
//缩略图指定宽度值显示。
img.img-topic {
width: 75%;
}
/*******************文章样式*****************************/
// 文章
.post {
margin-bottom: 50px;
padding: 45px 36px 36px 36px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}
// 文章标题字体
.posts-expand .post-title {
font-size: 26px;
font-weight: 700;
}
// 文章标题动态效果
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 文章元数据（meta）留白更改
.posts-expand .post-meta {
margin: 10px 0px 20px 0px;
}
// 文章的描述description
.posts-expand .post-meta .post-description {
font-style: italic;
font-size: 14px;
margin-top: 30px;
margin-bottom: 0px;
color: #666;
}
// [Read More]按钮样式
.post-button .btn {
color: #555 !important;
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
border: none !important;
transition-property: unset;
padding: 0px 15px;
}
.post-button .btn:hover {
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 去除在页面文章之间的分割线
.posts-expand .post-eof {
margin: 0px;
background-color: rgba(255, 255, 255, 0);
}
// 去除页面底部页码上面的横线
.pagination {
border: none;
margin: 0px;
}
// 文章内标题样式（左边的竖线）
.post-body h2, h3, h4, h5, h6 {
border-left: 4px solid rgb(161, 102, 171);
margin-left: -36px;
padding-left: 32px;
}
// 去掉图片边框
.posts-expand .post-body img {
border: none;
padding: 0px;
}
// 文章``代码块的自定义样式
code {
margin: 0px 3px;
border: 1px solid #999;
}
// 文章```代码块顶部样式
.highlight figcaption {
margin: 0em;
padding: 0.5em;
background: #eee;
border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
color: rgb(80, 115, 184);
}
// 文章```代码块diff样式
pre .addition {
background: #e6ffed;
}
pre .deletion {
background: #ffeef0;
}
//文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
// 自定义的文章摘要图片样式
img.img-topic {
width: 100%;
}
/*************************侧栏样式****************************/
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
// 右下角侧栏按钮样式
.sidebar-toggle {
right: 10px;
bottom: 43px;
background-color: rgba(247, 149, 51, 0.75);
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.page-post-detail .sidebar-toggle-line {
background: rgb(7, 179, 155);
}
// 右下角返回顶部按钮样式
.back-to-top {
line-height: 1.5;
right: 10px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2.5px;
padding-bottom: 2.5px;
background-color: rgba(247, 149, 51, 0.75);
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
// 侧栏
.sidebar {
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.75);
}
.sidebar-inner {
margin-top: 30px;
}
// 侧栏顶部文字
.sidebar-nav li {
font-size: 15px;
font-weight: bold;
color: rgb(7, 179, 155);
}
.sidebar-nav li:hover {
color: rgb(161, 102, 171);
}
.sidebar-nav .sidebar-nav-active {
color: rgb(7, 179, 155);
border-bottom-color: rgb(161, 102, 171);
border-bottom-width: 1.5px;
}
.sidebar-nav .sidebar-nav-active:hover {
color: rgb(7, 179, 155);
}
// 侧栏站点作者名
.site-author-name {
display: none;
}
// 侧栏站点描述
.site-description {
letter-spacing: 5px;
font-size: 15px;
font-weight: bold;
margin-top: 15px;
margin-left: 13px;
color: rgb(243, 112, 85);
}
// 侧栏站点文章、分类、标签
.site-state {
line-height: 1.3;
margin-left: 12px;
}
.site-state-item {
padding: 0px 15px;
border-left: 1.5px solid rgb(161, 102, 171);
}
// 侧栏RSS按钮样式
.feed-link {
margin-top: 15px;
margin-left: 7px;
}
.feed-link a {
color: rgb(255, 255, 255);
border: 1px solid rgb(158, 158, 158) !important;
border-radius: 15px;
}
.feed-link a:hover {
background-color: rgb(161, 102, 171);
}
.feed-link a i {
color: rgb(255, 255, 255);
}
// 侧栏社交链接
.links-of-author {
margin-top: 0px;
}
// 侧栏友链标题
.links-of-blogroll-title {
margin-bottom: 10px;
margin-top: 15px;
color: rgba(7, 179, 155, 0.75);
margin-left: 6px;
font-size: 15px;
font-weight: bold;
}
// 侧栏超链接样式（友链的样式）
.sidebar a {
color: #ccc;
border-bottom: none;
}
.sidebar a:hover {
color: rgb(255, 255, 255);
}
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
// 侧栏目录链接样式
.post-toc ol a {
color: rgb(7, 179, 155);
border-bottom: 1px solid rgb(96, 125, 139);
}
.post-toc ol a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
// 侧栏目录链接样式之当前目录
.post-toc .nav .active > a {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
.post-toc .nav .active > a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
/* 修侧栏目录bug，如果主题配置文件_config.yml的toc是wrap: true */
.post-toc ol {
padding: 0px 10px 5px 10px;
}
/* 侧栏目录默认全展开，已注释
.post-toc .nav .nav-child {
display: block;
}
*/
/************************移动端样式*******************************/
@media (max-width: 1023px) {
.container {
background-color: rgba(0, 0, 0, 0);
}
.sidebar {
// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.feed-link {
display: none !important;
}
}
@media (max-width: 767px) {
.main {
padding-bottom: 120px;
}
.posts-expand {
margin: 0px;
padding-top: 10px;
}
.posts-expand .post-title {
font-size: 22px;
}
.posts-expand .post-meta {
font-size: 10px;
}
.post {
margin-bottom: 30px !important;
padding: 20px 15px 15px 15px !important;
}
.post-body h2, h3, h4, h5, h6 {
margin-left: -15px;
padding-left: 11px;
}
.posts-expand .post-tags {
margin-top: 10px;
}
.post-widgets {
margin-top: 10px;
}
.comments {
margin: 40px 0px 40px 0px !important;
}
.footer {
// box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
}
}
.sidebar-active #sidebar-dimmer {
opacity: 0;
}
// 移动端左上角菜单按钮
.site-nav-toggle {
top: 35px;
left: 91px;
// background-color: #222;
}
.btn-bar {
background-color: rgb(255, 255, 255);
}
// 移动端菜单
@media (max-width: 767px) {
.menu {
text-align: center;
// box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.site-nav {
top: initial;
background-color: rgba(255, 255, 255, 0.75);
border-top: none;
border-bottom: none;
position: relative;
z-index: 1024;
}
}
//移动端顶部
@media (max-width: 767px) {
.site-title {
font-size: 28px !important;
letter-spacing: 0px !important;
}
.site-subtitle{
letter-spacing: 0px !important;
padding-bottom: 0px !important;
}
.site-meta {
// box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.menu .menu-item {
margin: 0px 10px !important;
}
}
进阶 高级功能配置
设置动态title
themes/next/source/js/src下创建dytitle.js：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="shortcut icon"]').attr('href', "/TEP.png");
document.title = 'w(ﾟДﾟ)w 出BUG啦！！！！';
clearTimeout(titleTime);
}
else {
$('[rel="shortcut icon"]').attr('href', "/favicon.png");
document.title = '♪(^∇^*)又好了。。。 ' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
修改themes/next/layout/layout.swing,在 之前添加：
1 | 1 |
侧栏加入已运行的时间
修改文件:themes/next/layout/_custom/sidebar.swig，加入一下代码：
BirthDay=new Date("05/27/2017 15:13:14");日期修改为自己的
1 | <div id="days"></div> |
修改文件themes/next/layout/_macro/sidebar.swig
1 | {# Blogroll #} |
点击出现爱心效果
在/themes/next/source/js/love.js下新建文件love.js，接着把该链接下的代码拷贝粘贴到love.js文件中1
!function (e, t, a) { function n() { c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);
在\themes\next\layout_layout.swig文件末尾添加：1
2
3
4
5{% include '_third-party/exturl.swig' %}
+ <!-- 页面点击小红心 -->
+ <script type="text/javascript" src="/js/src/love.js"></script>
</body>
</html>
点击头像回到博客首页
修改文件/themes/next/layout/_macro/sidebar.swig,增加以下代码:1
2
3
4
5+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />
+ </a>
增加内容分享服务
修改themes/next/_config.yml主题配置文件，搜索关键字needmoreshare2，找到如下代码并做以下修改:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17# 文章分享功能
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: vertical
position: topRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
关于分享中的微信二维码图片加载失败,感谢Qcmoke大佬的解决方案
next 5.1.4版本中微信加载不出二维码,应该是封装好的微信分享链接失效了。我是通过老版本的仓库
https://github.com/iissnan/hexo-theme-next 安装的，所以有这个问题，而新版本的next是没有这个问题的。新版本仓库已经搬迁到了https://github.com/theme-next
输入以下命令：1
2rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
增加站内文章搜索功能
安装插件hexo-generator-searchdb,执行以下命令:1
npm install hexo-generator-searchdb --save
修改hexo/_config.yml站点配置文件,末尾新增以下代码:1
2
3
4
5search:
path: search.xml
field: post
format: html
limit: 10000
修改themes/next/_config.yml主题配置文件，搜索关键字local_search找到如下代码，将enable设置为true，如下：1
2local_search:
enable: true
增加文章字数统计及阅读时常功能
安装插件hexo-wordcount,执行以下命令:1
npm install hexo-wordcount --save
修改themes/next/_config.yml主题配置文件，搜索关键字post_wordcount,修改如下:1
2
3
4
5
6post_wordcount:
item_text: true
wordcount: true #单篇文章字数
min2read: true #单篇阅读时长
totalcount: true #站点总字数
separated_meta: true
增加站点访问统计功能
next主题默认集成了第三方访问统计插件。
修改themes/next/_config.yml主题配置文件，搜索关键字busuanzi_count:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19# 不蒜子统计，用于在页脚显示总访客数和总浏览量，将 false 改为 true 就能直接使用
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
# 页面浏览量，不建议开启，建议用上面的 leancloud_visitors
# 首先 leancloud 更稳定，其次 leancloud 便于管理
# 最后，可以利用 leancloud 的 api 建立 TopX 页面
page_pv: false
page_pv_header: <i class="fa fa-eye"></i>
page_pv_footer:
目前不蒜子『dn-lbstatics.qbox.me』域名过期，更换域名到『busuanzi.ibruce.info』！故你可能需要修改>以下文件相关信息：
修改themes/next/layout/_third-party/analytics/busuanzi-counter.swig文件，找到dn-lbstatics.qbox.me,修改代码：
文章置顶功能
移除默认安装的插件：1
npm uninstall hexo-generator-index --save
安装新插件:1
npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：top: true
如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：1
2
3
4
5
6
7# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
文章 b 便会显示在文章 a 的前面。
LeanCloud统计文章阅读数
已有大佬提供,具体详情请戳进Hexo博客-NexT主题：使用leancloud进行页面访客统计
添加 TopX 页面
评论系统
关于主题更新升级
对于升级主题，我们需要重新配置主题配置文件，那么每次升级都要这么干吗？超麻烦！
NexT作者给我们的建议就是使用Data Files，具体详情请戳进 Theme configurations using Hexo data files #328
贴出以下总结:
- 请先确保你所使用的 Hexo 版本在 3 以上
- 在站点的 source/_data 目录下新建 next.yml 文件（_data目录可能需要新建）
- 迁移站点配置文件和主题配置文件中的配置到 next.yml 中
所有主题相关的配置都可以写到 next.yml 文件中。 主题目录下的 _config.yml 可以不用做任何修改。
若你是新安装的，可以将主题的 _config.yml 里面的内容整个拷贝过去，然后修改即可
若是之前有将配置写在站点的 _config.yml 里，把这个文件里主题相关的配置剪切到 next.yml 里去;同时将主题下 _config.yml 里面的配置也拷贝过去，相当于是全部合并到 next.yml 中去了。
每次修改 _next.yml 需要重启 hexo server 才能生效。