警告
本文最后更新于 2019-09-13，文中内容可能已过时。
危险
如无必要，不再更新！（2019.09.13）
今晚我做出了一个慎重的决定，由于博主时间精力有限，需要更多的时间来工作和学习。所以我将放弃对 next 的主题的自定义修改，next 主题官方已经更新到了 7.0+的版本，喜欢 next 主题风格的朋友可以在 github 更新。
我这也算是上古版本了，版本差距实在过大，所以我也将放弃博客使用主题的更新。
以下仍为当前博客使用主题，lib 资源已打包 github。
主要的几个自定义文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| _config.swig #主题配置文件 相关账户信息自己注册替换
\layout\custom\head.swig #在头部自定义加入标签
\layout\custom\google_adsense.swig #谷歌广告模块，内有注释暂时弃用
\layout\_layout.swig #主布局
\layout\_macro\post.swig #文章布局
\layout\_macro\post-copyright.swig #文章版权
\layout\_macro\siderbar.swig #侧栏模板
\layout\_third-party\copy-code.swig #复制按钮
\layout\_partials\comments.swig #评论主模板
\layout\_partials\footer.swig #底部模板#该模块在 layout.swig 引入，用于在 body 自定义标签
\layout\_partials\footer_custom.swig #footer 自定义文件
\layout\_third-party\custom.swig #该模块在 layout.swig 引入用于在 body 自定义标签
\source\css\_custom\customs.styl #主要用户自定义样式表
\source\fonts\ #引入了一些我的手写体及外部字体
\scripts\qcloudcdn.js #腾讯云 cos 桶刷新缓存的脚本，不需要可删掉 [^1]
|
^1
1 初步安装
安装整个改过的主题，然后下载相应的 lib 资源解压放入 source 文件夹
1
2
| cd hexo
git clone https://github.com/Lruihao/hexo-theme-next themes/next
|
主题配置文件_config.yml, 选择主题
lib 下载
http://github.com/Lruihao/hexo-theme-next/releases/tag/v6.9.1
2 更新内容
更多自定义详见源码
2.1 links 模板
自定义友链模板，打开hexo\themes\next\layout\新建links.swig文件，写下以下内容后保存。
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
| {% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}
{% block title %}{#
#}{% set page_title_suffix = ' | ' + title %}{#
#}{% if page.type === "categories" and not page.title %}{#
#}{{ __('title.category') + page_title_suffix }}{#
#}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#
#}{% elif page.type === "photos" and not page.title %}{#
#}{{ __('title.photos') + page_title_suffix }}{#
#}{% else %}{#
#}{{ page.title + page_title_suffix }}{#
#}{% endif %}{#
#}{% endblock %}
{% block page_class %}page-post-detail{% endblock %}
{% block content %}
<div id="posts" class="posts-expand">
{##################}
{#### PAGE BLOCK ###}
{##################}
<div class="post-block page">
{% include '_partials/page-header.swig' %}
{#################}
{#### PAGE BODY ###}
{#################}
<script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js"></script>
<div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
<div class="links-list">
{% for svg,link in site.data.links %}
<div class="card-box" title="{{ link.info }}">
<a href="{{ link.site }}" target="_blank">
{% if link.avatar %}
<img class="card-avatar" data-original="{{ link.avatar }}" alt="{{ link.nickname }}"/>
{% else %}
<svg class="card-avatar" aria-hidden="true">
<use xlink:href="#icon-{{svg+1}}"></use>
</svg>
{% endif %}
<span title="{{ link.nickname }}">@{{ link.nickname }}</span>
</a>
</div>
{% endfor %}
</div>
{{ page.content }}
</div>
<style>
/* @Author: lruihao.cn */
.links-list {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.card-box {
width: 150px;
height: 200px;
font-size: 1rem;
text-align: center;
background: rgba(255,255,255,0.3);
box-sizing: border-box;
box-shadow: 3px 3px 5px #aaa;
border-radius: 5px;
transition-duration: 0.3s;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
}
.card-box:hover {
background: #fff;
transform: scale(1.03);
box-shadow: 0 0 3px #aaa;
}
.card-box a {
border:none;
}
.card-avatar {
width: 100%!important;
height: 150px!important;
border-radius: 5px;
margin: 0;
padding: 0;
}
.card-box span{
display: block;
position: relative;
bottom: 1rem;
align-self: flex-end;
color: #2bbc8a;
font-weight: bold;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 15px;
}
.card-box span:hover {
color: #d480aa;
}
</style>
{#####################}
{#### END PAGE BODY ###}
{#####################}
</div>
{% include '_partials/breadcrumb.swig' %}
{######################}
{#### END PAGE BLOCK ###}
{######################}
</div>
{% endblock %}
{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}
{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}
|
- 若未使用懒加载请将模板中的
data-original属性改为src - 若懒加载无法加载预览图请手动添加
src="/images/loading.gif" - 若 fancybox 显示 alt 内容请更换 fancybox2 或者将 alt 属值删除
1
| <img class="card-avatar" data-original="{{ link.avatar }}" alt="{{ link.nickname }}"/>
|
然后hexo n page links新建一个页面文章配置写下如下内容：
1
2
3
4
| ---
title: 友情链接
layout: links
---
|
然后在links页面文件夹下面新建文件夹_data，再在里面新建links.yml，内容如下
1
2
3
4
5
6
7
8
| - nickname: 博採眾長
avatar: http://lruihao.cn/images/avatar.png
site: http://lruihao.cn
info: 一个菜鸟的博客
- nickname: #友链名称
avatar: #友链头像
site: #友链地址
info: #友链说明
|
2.2 备案信息自定义
1
2
3
4
5
6
7
8
| ## -------------------------------------------------------------
## footer_custom Settings
## -------------------------------------------------------------
beian:
enable: true
gov: 湘公网安备 43030402000254 号
recordcode: 43030402000254
icp: 湘 ICP 备 18020535 号
|
2.3 文字抖动特效
1
| <div class="shaky">（づ●'◡'●) づ ❥内容区</div>
|
（づ●'◡'●) づ ❥内容区
2.4 左下角微信公众号
1
| \source\css\_custom\customs.styl
|
2.5 相关文章收纳
加入 H5 标签，实现可收纳功能，点击查看详情。
2.6 Chat Services
共 chatra,tidio,daovoice 三个选项，三选一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| ## Chatra Support
## See: https://chatra.io
## Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: ## visit Dashboard to get your ChatraID
#embed: ## unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto
## Tidio Support
## See: https://www.tidiochat.com
## Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
enable: false
key: ## Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer
#在线客服
daovoice: true
daovoice_app_id: xxxx ## http://www.daovoice.io/
|
2.7 pdf 和 Mermaid 解析模块
pdf 传送门
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| pdf:
enable: false
## Default height
height: 500px
pdfobject:
cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js
## Mermaid tag
mermaid:
enable: false
## Available themes: default | dark | forest | neutral
theme: forest
cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
|
2.8 模仿 csdn 转发样式
1
2
3
4
5
6
7
8
9
10
11
12
13
| ...
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
+ {% if post.repost %}
+ <span class="repost">转</span>
+ {% endif %}
{{ post.title | default(__('post.untitled'))}}
</a>
{% else -%}
+ {% if post.repost %}
+ <span class="repost">转</span>
+ {% endif %}
{{- post.title -}}
...
|
1
2
3
4
5
6
7
8
| .repost {
color: #5acc79;
border: 1px solid #e7f4df;
border-radius: 20px;
padding: 2px 5px;
font-size: 15px;
font-weight: 500;
}
|
1
2
3
4
| ---
title: xxxx
repost: true
---
|
预览
2.9 热度页面
打开hexo\themes\next\layout新建 top.swig 文件，写下如下内容保存：
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
| {% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}
{% block title %}{#
#}{% set page_title_suffix = ' | ' + title %}{#
#}{% if page.type === "categories" and not page.title %}{#
#}{{ __('title.category') + page_title_suffix }}{#
#}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#
#}{% elif page.type === "photos" and not page.title %}{#
#}{{ __('title.photos') + page_title_suffix }}{#
#}{% else %}{#
#}{{ page.title + page_title_suffix }}{#
#}{% endif %}{#
#}{% endblock %}
{% block page_class %}page-post-detail{% endblock %}
{% block content %}
<div id="posts" class="posts-expand">
{##################}
{#### PAGE BLOCK ###}
{##################}
<div class="post-block page">
{% include '_partials/page-header.swig' %}
{#################}
{#### PAGE BODY ###}
{#################}
<div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
{{ page.content }}
<div id="top"></div>
</div>
<style>
#top{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
min-height: calc({{ page.limit }} * 20px);
}
#top div{
width: 400px;
height: 40px;
max-width: 400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#top a{
color: #555;
text-decoration: none;
outline: 0;
border-bottom: 1px solid #999;
word-wrap: break-word;
}
</style>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("{{ theme.valine.appid }}", "{{ theme.valine.appkey }}");</script>
<script type="text/javascript">
setTimeout(function(){
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit({{ page.limit }}); //设置篇数
query.find().then(function (todo) {
for (var i=0;i<{{ page.limit }};i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
category=result.categories
url=result.url;
var content="<div>"+"【文章热度："+time+"℃】"+"<a href='"+"{{ config.url }}"+""+url+"'>"+title+"</a>"+"</div>";
document.getElementById("top").innerHTML+=content;
}
}, function (error) {
console.log("error");
});
},1000)
</script>
{#####################}
{#### END PAGE BODY ###}
{#####################}
</div>
{% include '_partials/breadcrumb.swig' %}
{######################}
{#### END PAGE BLOCK ###}
{######################}
</div>
{% endblock %}
{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}
{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}
|
其中第 36 行改成你自己的 leancloud 的 appid 和 appkey, 比如我的是在主题配置文件里面的 valine 配置下，所以我就写成theme.valine.appid。和我一样就不需要修改，其他自行配置。
然后hexo n page top新建一个页面文章配置写下如下内容，limit 表示显示篇数：
1
2
3
4
5
| ---
title: 热度
layout: top
limit: 20
---
|
2.10 复制按钮样式
本来只想简单美化一下变成 night 样式的，后来写完发现 3dbtn 也挺喜欢的。
1
2
3
4
5
6
7
8
9
10
11
| codeblock:
## Manual define the border radius in codeblock
## Leave it empty for the default 1
border_radius: 5
## Add copy button on codeblock
copy_button:
enable: true
## Show text copy result
show_result: true
## Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme
style: night
|
Lruihao
支付宝
微信