Hello World

行走即是圆梦，回望亦是前行。

0%

Hexo博客的NexT主题美化和功能增强(二)

发表于 更新于 分类于
本文字数： 9.2k 阅读时长 ≈ 8 分钟

前言

这里简单记录下Hexo博客的NexT主题美化和功能增强

Hexo博客的NexT主题美化和功能增强(一) 去看看

环境版本说明

Hexo: v4.2.1
NexT: v8.0.0_rc.3

标签插件应用

完整标签列表：详见Hexo官网

  • 文本居中引用，使用centerquote简写cq

    1
    2
    3
    4
    5
    <!-- 标签别名 -->
    {% cq %}
    人的一切痛苦，本质上都是对自己的无能的愤怒。
    ——王小波
    {% endcq %}

    效果展示：

    人的一切痛苦，本质上都是对自己的无能的愤怒。
    ——王小波

  • Bootstrap Callout的使用方法

修改主题配置_config.yml，有几种style可选，这里我选择flat，设置图标显示icons: true

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
-  style: simple
+   style: flat
-  icons: false
+  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
1
2
3
{% note class_name %}
这是一个 class_name 批注。
{% endnote %}

其中，class_name可以是以下列表中的一个值：

default
primary
success
info
warning
danger

效果展示：

这是一个 default 批注。

这是一个 primary 批注。

这是一个 success 批注。

这是一个 info 批注。

这是一个 warning 批注。

这是一个 danger 批注。

添加颜色块和边框颜色

在主题的custom.styl文件中新增css样式配置，修改如下：

点击查看
themes\next\source\css\_custom\custom.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
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
// 颜色块红色
span#inline-red {
  display: inline;
  padding: .1em .6em .1em;
  font-size: 80%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
  background-color: #df3e3e;
}
// 颜色块黄色
span#inline-yellow {
  display: inline;
  padding: .1em .6em .1em;
  font-size: 80%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
  background-color: #f0ad4e;
}
// 颜色块绿色
span#inline-green {
  display: inline;
  padding: .1em .6em .1em;
  font-size: 80%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
  background-color: #5cb85c;
}
// 颜色块蓝色
span#inline-blue {
  display: inline;
  padding: .1em .6em .1em;
  font-size: 80%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
  background-color: #2780e3;
}
// 颜色块紫色
span#inline-purple {
  display: inline;
  padding: .1em .6em .1em;
  font-size: 80%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
  background-color: #9954bb;
}
// 左侧边框红色
p#div-border-left-red {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #df3e3e;
}
// 左侧边框黄色
p#div-border-left-yellow {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #f0ad4e;
}
// 左侧边框绿色
p#div-border-left-green {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #5cb85c;
}
// 左侧边框蓝色
p#div-border-left-blue {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #2780e3;
}
// 左侧边框紫色
p#div-border-left-purple {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: #9954bb;
}
// 右侧边框红色
p#div-border-right-red {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-right-width: 5px;
  border-radius: 3px;
  border-right-color: #df3e3e;
}
// 右侧边框黄色
p#div-border-right-yellow {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-right-width: 5px;
  border-radius: 3px;
  border-right-color: #f0ad4e;
}
// 右侧边框绿色
p#div-border-right-green {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-right-width: 5px;
  border-radius: 3px;
  border-right-color: #5cb85c;
}
// 右侧边框蓝色
p#div-border-right-blue {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-right-width: 5px;
  border-radius: 3px;
  border-right-color: #2780e3;
}
// 右侧边框紫色
p#div-border-right-purple {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-right-width: 5px;
  border-radius: 3px;
  border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-top-width: 5px;
  border-radius: 3px;
  border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-top-width: 5px;
  border-radius: 3px;
  border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-top-width: 5px;
  border-radius: 3px;
  border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-top-width: 5px;
  border-radius: 3px;
  border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
  display: block;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-top-width: 5px;
  border-radius: 3px;
  border-top-color: #9954bb;
}

支持颜色为：red、yellow、green、blue、purple，也可自己根据配置格式增加

描述语法
颜色块<span id="inline-red"> 这里是红色块 </span>
颜色块<span id="inline-blue"> 这里是蓝色块 </span>
左侧边框<p id="div-border-left-yellow"> 这里是黄色左侧边框 </p>
右侧边框<p id="div-border-right-green"> 这里是绿色右侧边框 </p>
上侧边框<p id="div-border-top-purple"> 这里是紫色上侧边框 </p>

效果展示：
这里是红色块
这里是蓝色块

这里是黄色左侧边框

这里是绿色右侧边框

这里是紫色上侧边框

动态背景和鼠标特效

动态线条背景

修改主题配置_config.yml，新增配置：

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
+ # Canvas-nest
+ # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
+ # For more information: https://github.com/hustcc/canvas-nest.js
+ canvas_nest:
+   enable: false
+   enable: true
+   onmobile: true # Display on mobile or not
+   color: "0,0,255" # RGB values, use `,` to separate
+   opacity: 0.5 # The opacity of line: 0~1
+   zIndex: -1 # z-index property of the background
+   count: 99 # The number of lines

  canvas_ribbon:
  ...

+   # Internal version: 1.0.0
+   # canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
+   # canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
+   canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
+   canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js

  canvas_ribbon:

在themes/next/layout/_scripts/vendors.njk(7.x已有该部分代码)中添加代码：

themes/next/layout/_scripts/vendors.njk
1
2
3
4
5
6
7
8
9
10
+ {%- if theme.canvas_nest.enable %}
+   {%- if theme.canvas_nest.onmobile %}
+     {%- set canvas_nest_uri = theme.vendors.canvas_nest or next_vendors('canvas-nest/canvas-nest.min.js') %}
+   {% else %}
+     {%- set canvas_nest_uri = theme.vendors.canvas_nest_nomobile or next_vendors('canvas-nest/canvas-nest-nomobile.min.js') %}
+   {%- endif %}
+   <script color='{{ theme.canvas_nest.color }}' opacity='{{ theme.canvas_nest.opacity }}' zIndex='{{ theme.canvas_nest.zIndex }}' count='{{ theme.canvas_nest.count }}' src="{{ canvas_nest_uri }}"></script>
+ {%- endif %}

{%- if theme.canvas_ribbon.enable %}

鼠标特效

其他配置修改

修改单引号(``)包含的代码块字体颜色

themes/next/source/css/_variables/base.styl
1
2
3
4
5
6
7
// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace;
$code-border-radius             = 3px;
- $code-foreground                = $black-light;
+ $code-foreground                = #009AFF;
$code-background                = $gainsboro;

修改超链接字体颜色

方案一：Next主题修改超链接样式
在themes\next\source\css\_common\components\post\post.styl中添加如下字段：

themes\next\source\css\_common\components\post\post.styl
1
2
3
4
5
6
7
8
9
10
11
12
.post-button {
  ...
}

+ .post-body a {
+   color: #7B68EE;
+   font-weight: bold;
+ }

.use-motion {
  ...
}

方案二：修改文章内链接样式
在themes/next/_config.yml和themes/next/source/css/_custom/custom.styl中添加如下字段和代码：

themes/next/_config.yml
1
2
3
4
5
6
custom_css:
  # the style of post body link
  post_body_a:
    enable: true
    normal_color: "#0000FF"
    hover_color: "#0000AF"
themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
if hexo-config("custom_css.post_body_a.enable") {
  .post-body a {
      color: convert(hexo-config("custom_css.post_body_a.normal_color"));
      border-bottom: none;
      &:hover {
        color: convert(hexo-config("custom_css.post_body_a.hover_color"));
        text-decoration: underline;
      }
    }
}

修改hexo n file创建文件模板

scaffolds/post.md
1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
+ categories:
tags:
+ comments: false
+ abbrlink:
---

博客文章加密

更多美化增强参考

NexT主题升级记录

  • 主题自定义修改

自定义修改在source/_data中实现，尽量保持主题纯净

  1. 网站运行时长
  2. 文章置顶功能
  3. 动态背景和鼠标特效
  4. 修改``代码块和超链接颜色
  5. 对比_config.yml修改
  • 主题升级记录

【必读】更新说明及常见问题

v4.7.0 –> v8.0.0-rc.3

  1. canvas_nest字段丢失导致自定义动态背景失效
  2. 自带的Font Awesome5图标由4.7.0版本升级为5.13.0版本，注意：fa、fas、far和fab的区别