HEXO & NexT个性化设置

发表于 分类于 Waline： 阅读次数： 本文字数： 18k 阅读时长 ≈ 17 分钟

记录一些自己用到的个性化设置

版本说明

  • Hexo 版本：7.2.0
  • Next 版本： 8.20.0

3D动态背景

3D鼠标

实现效果图

具体实现方法

旧版本设置已淘汰
打开主题配置文件_config.yml，查找canvas_nest，设为true

~/blog/themes/next/_config.yml
1
2
3
4
5
6
...
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true
...

以下为新版本设置

去掉 footer 注释

~/blog/_config.next.yml
1
2
3
4
5
6
# 定义自定义文件路径.
# 在站点目录 `source/_data` 中创建自定义文件并取消注释下面所需的文件.
custom_file_path:
  ....
  footer: source/_data/footer.njk
  ....

新建footer.njk ，如下

~/blog/source/_data/footer.njk
1
2
<!--动态线条背景-->
<script color="0,0,255" opacity="0.8" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

3D线条

实现效果图

具体实现方法

旧版本设置已淘汰

安装模块到~/blog/themes/next/source/lib

1
$ git clone https://github.com/theme-next/theme-next-three source/lib/three

打开主题配置文件_config.yml，查找canvas_lines，设为true

~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
...
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false
...

修改文章底部的标签图标

实现效果图

具体实现方法

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

在每篇文章末尾统一添加“本文结束”标记

实现效果图

具体实现方法

旧版本设置已淘汰
在路径 /themes/next/layout/_macro 中新建 passage-end-tag.swig 文件，并添加以下内容：

~/blog/themes/next/layout/_macro/passage-end-tag.swig
1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开/themes/next/layout/_macro/post.swig文件，在post-body 之后， post-footer 之前，添加如下代码（post-footer之前两个DIV）：

~/blog/themes/next/layout/_macro/post.swig
1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件_config.yml在末尾添加：

~/blog/themes/next/_config.yml
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

以下为新版本设置

去掉 postBodyEnd 注释

~/blog/_config.next.yml
1
2
3
4
5
6
# 定义自定义文件路径.
# 在站点目录 `source/_data` 中创建自定义文件并取消注释下面所需的文件.
custom_file_path:
  ....
  postBodyEnd: source/_data/post-body-end.njk
  ....

新建post-body-end.njk ，如下

~/blog/source/_data/post-body-end.njk
1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #060606;font-size:14px;">本 文 结 束 啦 <i class="fa fa-paw fa-lg"></i> 感 谢 您 阅 读</div>
    {% endif %}
</div>

添加看板娘

以下为新版本设置

去掉 head 注释

~/blog/_config.next.yml
1
2
3
4
5
6
# 定义自定义文件路径.
# 在站点目录 `source/_data` 中创建自定义文件并取消注释下面所需的文件.
custom_file_path:
  ....
  head: source/_data/head.njk
  ....

新建 head.njk ，如下

~/blog/source/_data/head.njk
1
2
<!--看板娘-->
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

点击侧栏头像回到博客首页

旧版本设置已淘汰

首先要在主题配置文件中配置好，比如我把头像avatar.gif放在~/blog/source/uploads/下，则：

~/blog/themes/next/_config.yml
1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /uploads/avatar.gif

然后编辑文件sidebar.swig

~/blog/themes/next/layout/_macro/
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>

设置页面显示数目

~/blog/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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: 10
  order_by: -date
#archive归档文章显示条数
archive_generator:
  per_page: 50
#tag
tag_generator:
  per_page: 30
#category
category_generator:
  per_page: 30

gulp 压缩代码

首先安装插件：

1
$ npm install gulp -g

然后到站点文件夹根目录：

1
$ npm install gulp gulp-minify-css gulp-htmlmin gulp-htmlclean --save

接着在站点文件夹根目录新建 gulpfile.js：

~/blog/gulpfile.js
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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 执行 gulp 命令时执行的任务
gulp.task('default', ['minify-html', 'minify-css']);

最后部署到 Github Pages 上查看效果：

1
2
3
4
hexo clean
hexo g
gulp
hexo d

修改(代码)字体大小

旧版本设置已淘汰
打开~/blog/themes/next/source/css/_variables/base.styl文件，如下修改：

~/blog/themes/next/source/css/_variables/base.styl
1
2
3
4
5
...
$font-size-base                 = 15px
...
$code-font-size                 = 12px
...

以下为新版本设置

去掉 variables 注释

~/blog/_config.next.yml
1
2
3
4
5
6
# 定义自定义文件路径.
# 在站点目录 `source/_data` 中创建自定义文件并取消注释下面所需的文件.
custom_file_path:
  ....
  variables: source/_data/variables.styl
  ....

新建 ~/blog/source/_data/variables.styl文件，如下：

~/blog/source/_data/variables.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Title Font, set it to font family you want.
$font-family-headings = Georgia, sans

// Set it to font family you want.
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 代码字体.
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 文章的字体大小.
$font-size-base = 15px

// 表格和代码的字体大小.
$table-font-size = 13px

设置动态 title

旧版本设置已淘汰

在 /themes/next/source/js/src 目录下新建 dytitle.js 。添加以下内容：

~/blog/themes/next/source/js/src/dytitle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = ' 页面崩溃啦 ! | 快回来！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' 噫,又好了!' + OriginTitile;
         titleTime = setTimeout(function () {
             document.title = OriginTitile;
         }, 2000);
     }
 });

更改 /themes/next/layout/_layout.swig 。在 </body>之前添加：

~/blog/themes/next/layout/_layout.swig
1
2
<!--卖萌-->
<script type="text/javascript" src="/js/src/dytitle.js"></script>

添加音乐&视频

用到两个插件:

  • hexo-tag-aplayer
  • hexo-tag-dplayer

音乐

首先在站点文件夹根目录安装插件：

1
npm install hexo-tag-aplayer --save

官方文档
一般文章中的写法：

1
{% aplayer "XXX" "XXX" "https://XXX.mp3" "https://XXX.jpg" "lrc:https://XX.lrc" %}

歌单书写方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% aplayerlist %}
{
    "autoplay": false,
    "showlrc": 3,
    "mutex": true,
    "music": [
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://XXX.mp3",
            "pic": "https://XXX.jpg",
            "lrc": "https://XXX.lrc"
        },
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://XXX.mp3",
            "pic": "https://XXX.jpg",
            "lrc": "https://XXX.lrc"
        }
    ]
}
{% endaplayerlist %}

视频

首先在站点文件夹根目录安装插件：

1
npm install hexo-tag-dplayer --save

官方文档
一般文章中的写法：

1
2
3
4
5
{% dplayer
  "url=https://XXX.mp4"
  "pic=https://XXX.jpg"
  "api=https://api.prprpr.me/dplayer/"
  "id=" "loop=false" %}

配置 Sitemap

Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是XML 文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。

1
$ npm install hexo-generator-sitemap --save

配置到站点配置文件:

~/biog/_config.yml
1
2
3
sitemap:
  path: sitemap.xml
  #path 表示 Sitemap 的路径. 默认为 sitemap.xml.

对于国内用户还需要安装:

1
$ npm install hexo-generator-baidu-sitemap --save

配置到站点配置文件:

~/biog/_config.yml
1
2
baidusitemap:
  path: baidusitemap.xml

本地搜索

在站点的根目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

编辑站点配置文件，新增以下内容到任意位置

~/hexo/_config.yml
1
2
3
4
5
6
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用本地搜索功能：

~/hexo/themes/next/_config.yml
1
2
local_search:
  enable: true

更改标签云（tagcloud）的颜色

如果你和我一样个性化了博客的整体布局颜色，那么默认的标签云页面可能看起来很丑，怎么更改？

修改下文件：

~/blog/themes/next/layout/page.swig
1
{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

Next主题 6.0+ 新配置设置

侧栏头像设置

~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 # Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  # 头像设置为圆形
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  # 设置透明度
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  # 头像旋转
  rotated: true

代码块圆角+复制按钮

~/blog/themes/next/_config.yml
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: 10
  # Add copy button on codeblock
  # 添加复制按钮
  copy_button:
    enable: true
    # Show text copy result
    show_result: true

博文字数统计

Next V6 下使用 hexo-symbols-count-time 进行替代。

1
$ npm install hexo-symbols-count-time --save
  1. 在站点配置文件中开启：
~/hexo/_config.yml
1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  1. 然后在主题配置文件中开启：
~/hexo/themes/next/_config.yml
1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 5
  wpm: 200

我的自定义 custom.styl

~/blog/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
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
// Custom styles.
//首页头部样式
.header {
    background: url("/images/header-bbk.jpg");
}
// 站点名背景
.brand{
    background-color: rgba(255, 255, 255, 0);
    margin-top: 15px;
    padding: 0px;
}
// 站点名字体
.site-meta {
    margin-left: 0px;
    text-align: center;
}

.site-meta .site-title {
    margin-top: 60px;
    font-size: 50px;
    font-family: 'Comic Sans MS', sans-serif;
    color: #fff;
}
// 菜单
.menu {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0);

}
// 菜单超链接字体大小
.menu .menu-item a {
    font-size: 15px;
}
// 菜单各项边距
.menu .menu-item {
    margin: 5px 15px;
}
// 菜单超链接样式
.menu .menu-item a:hover {
    border-bottom-color: rgba(161, 102, 171, 0);
}

// 修改背景图片
body{
    background-image:url(/images/bg.png);
    background-attachment: fixed; // 不随屏幕滚动而滚动
    background-repeat: no-repeat;
    // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺
    background-position:50% 50%;
}
// 页面背景色
.container {
    background-color: rgba(0, 0, 0, 0);
}
// 页面留白更改
.header-inner {
    padding-top: 0px;
    padding-bottom: 0px;
}
.posts-expand {
    padding-top: 80px;
}
.posts-expand .post-meta {
    margin: 5px 0px 0px 0px;
}
.post-button {
    margin-top: 0px;
}
// 主页文章添加阴影效果
 .post {
       margin-top: 60px;
       margin-bottom: 60px;
       padding: 25px;
       -webkit-box-shadow: 0 0 5px rgba(100, 100, 100, 1);
       -moz-box-shadow: 0 0 5px rgba(100, 100, 100, 1);
  }
// 文章
.post {
    margin-bottom: 50px;
    padding: 45px 36px 36px 36px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255,0.65);
}
// 文章标题字体
.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;
}
// 页面底部页码
.pagination .page-number.current {
    border-radius: 100%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.35);
}
.pagination .prev, .pagination .next, .pagination .page-number {
    margin-bottom: 10px;
    border: none;
}
.pagination .space {
    color: rgb(255, 255, 255);
}
// 页面底部页脚
.footer {
    line-height: 1.5;
    background-color: rgba(255, 255, 255, 0.75);
    color: #333;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: rgb(161, 102, 171);
    box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.15);
}
// 文章底部的tags
.posts-expand .post-tags a {
    border-bottom: none;
    margin-right: 0px;
    font-size: 13px;
    padding: 0px 5px;
    border-radius: 3px;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.posts-expand .post-tags a:hover {
    background: #eee;
}
// 文章底部留白更改
.post-widgets {
    padding-top: 0px;
}
.post-nav {
    margin-top: 30px;
}
// 文章底部页面跳转
.post-nav-item a {
    color: rgb(80, 115, 184);
    font-weight: bold;
}
.post-nav-item a:hover {
    color: rgb(161, 102, 171);
    font-weight: bold;
}
// 文章底部评论
.comments {
    background-color: rgba(255, 255, 255,0.65);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    margin: 80px 0px 40px 0px;
}
// 超链接样式
a {
    color: rgb(80, 115, 184);
    border-bottom-color: rgb(80, 115, 184);
}
a:hover {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
// 分割线样式
hr {
    margin: 10px 0px 30px 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;
}
.post-gallery .post-gallery-img img {
    padding: 3px;
}
// 文章``代码块的自定义样式
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 文章```代码块顶部样式
.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;
}
// 右下角侧栏按钮样式
.sidebar-toggle {
    right: 10px;
    bottom: 43px;
    background-color: rgba(232, 33, 172, 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(232, 33, 172, 0.75);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.back-to-top.back-to-top-on {
    bottom: 10px;
}
// 侧栏
.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;
}
// 侧栏头像（圆形以及旋转效果）
.site-author-image {
    border: 2px solid rgb(255, 255, 255);
    border-radius: 100%;
    transition: transform 1.0s ease-out;
}
img:hover {
    transform: rotateZ(360deg);
}
.posts-expand .post-body img:hover {
    transform: initial;
}
// 时间轴样式
.posts-collapse {
    margin: 50px 0px;
}
@media (max-width: 1023px) {
    .posts-collapse {
        margin: 50px 20px;
    }
}
// 时间轴左边线条
.posts-collapse::after {
    margin-left: -2px;
    background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
// 时间轴左边线条圆点颜色
.posts-collapse .collection-title::before {
    background-color: rgb(255, 255, 255);
}
// 时间轴文章标题左边圆点颜色
.posts-collapse .post-header:hover::before {
    background-color: rgb(161, 102, 171);
}
// 时间轴年份
.posts-collapse .collection-title h1, .posts-collapse .collection-title h2 {
    color: rgb(255, 255, 255);
}
// 时间轴文章标题
.posts-collapse .post-title a {
    color: rgb(80, 115, 184);
}
.posts-collapse .post-title a:hover {
    color: rgb(161, 102, 171);
}
// 时间轴文章标题底部虚线
.posts-collapse .post-header:hover {
    border-bottom-color: rgb(161, 102, 171);
}
// archives页面顶部文字
.page-archive .archive-page-counter {
    color: rgb(255, 255, 255);
}
// archives页面时间轴左边线条第一个圆点颜色
.page-archive .posts-collapse .archive-move-on {
    top: 10px;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
// 分类页面
.post-block.page {
    margin-top: 40px;
}
.category-all-page {
    margin: -80px 50px 40px 50px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255,0.65);
    padding: 86px 36px 36px 36px;
}
@media (max-width: 767px) {
    .category-all-page {
        margin: -73px 15px 50px 15px;
    }
    .category-all-page .category-all-title {
        margin-top: -5px;
    }
}
// 标签云页面
.tag-cloud {
    margin: -80px 50px 40px 50px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255,0.65);
    padding: 86px 36px 36px 36px;
}
.tag-cloud-title {
    margin-bottom: 15px;
}
@media (max-width: 767px) {
    .tag-cloud {
        margin: -73px 15px 50px 15px;
        padding: 86px 5px 36px 5px;
    }
}
// 自定义ABOUT页面的样式
.about-page {
    margin: -80px 0px 60px 0px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255,0.65);
    padding: 106px 36px 36px 36px;
}
@media (max-width: 767px) {
    .about-page {
        margin: -73px 0px 50px 0px;
        padding: 96px 15px 20px 15px;
    }
}
h2.about-title {
    border-left: none !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
    text-align: center;
    background-image: linear-gradient(90deg, #a166ab 0%, #a166ab 40%, #ef4e7b 45%, #f37055 50%, #ef4e7b 55%, #a166ab 60%, #a166ab 100%);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

参考

  • NexT 使用文档
  • Getting Started | NexT(需科学上网)