Hexo搭建个人博客 (四) 升级与功能配置(持续更新)

升级与功能配置

一. Hexo升级

从2018年后一直未更新Hexo和Next主题版本,中间跨了好几个大版本,所以尝试直接升级至最新版本。

当前最新Next主题:hexo-theme-next

1.1 Hexo升级

执行 npm outdated 查看所有可以升级的插件。

1
2
3
4
5
6
7
npm install -g npm-check     //安装npm-check
npm-check //查看系统插件是否需要升级
npm install -g npm-upgrade //安装npm-upgrade
npm-upgrade //更新package.json
//在执行npm-upgrade命令后会要求输入yes或者no,直接输入Yes或Y即可
npm update -g //更新全局插件
npm update --save //更新系统插件

1.2 主题更新

主题的根目录(注意不是博客根目录),打开命令行。

1
$ git pull

Next主题从5.X版本升级,因为差异较大,需要参考官方文档:从 NexT v5.1.x 更新

1.3 npm更新

npm更新全局安装的包:

1
npm update -g

npm 更新站点文件夹根目录下安装的依赖包:

1
$ npm update

更新 npm:

1
npm install npm -g

更新 Node.js 到最新版(Linux):

1
2
3
4
5
6
7
# 查看当前node版本
node -v
npm -v

npm install -g n

n latest

更新 Node.js 到最新版Win10:

1
2
3
4
5
6
# 查看原nodejs安装目录
where node
npm config list | findstr location
# 下载最新nodejs安装包放在原安装目录下
# 官网: https://nodejs.org/en/download/
# 淘宝镜像: https://npm.taobao.org/mirrors/node/v14.15.2/

1.4 问题记录

问题 err: Error: Cannot find module 'hexo-util' 缺少 hexo-util

1
2
# 安装hexo-util
npm install hexo-util --save

执行 hexo generator 命令后,themes/next/scripts/events/lib/vendors.js 代码里面解析 localcall 一直出现以下错误

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
INFO  Start processing
FATAL {
err: TypeError: Cannot read property 'call' of undefined
at module.exports (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/themes/next/scripts/events/lib/vendors.js:27:25)
at Hexo.<anonymous> (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/themes/next/scripts/events/index.js:9:27)
at Hexo.tryCatcher (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/util.js:16:23)
at Hexo.<anonymous> (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/method.js:15:34)
at /home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/hexo/lib/extend/filter.js:67:52
at tryCatcher (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/util.js:16:23)
at Object.gotValue (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/reduce.js:166:18)
at Object.gotAccum (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/reduce.js:155:25)
at Object.tryCatcher (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/promise.js:547:31)
at Promise._settlePromise (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/promise.js:604:18)
at Promise._settlePromiseCtx (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/promise.js:641:10)
at _drainQueueStep (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/async.js:97:12)
at _drainQueue (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/async.js:86:9)
at Async._drainQueues (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/async.js:102:5)
at Immediate.Async.drainQueues [as _onImmediate] (/home/rqh656418510/HDDD/Workspaces_MarkDown/hexo-develop/node_modules/bluebird/js/release/async.js:15:14)
at processImmediate (internal/timers.js:461:21)

这个报错是没找到 hexo-utilurl_for ,可能是 hexo-util 模块更新失败,最终导致代码不兼容。首先检查 hexo-util 模块的版本,然后可以尝试执行以下命令,强制更新 NPM 模块:

1
2
3
4
5
# 进入博客的主题目录
$ cd /boot-root/

# 强制更新
$ npm update --save --force

二. 功能配置-整体

有些旧版的设置,新版因为觉得没必要、或未找到修改方案在菜单中标记了(旧版本)。

2.1 修改主题风格

nexT默认 Scheme: Muse ,修改主题配置文件 \themes\next\_config.yml 中的scheme:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白

  • Mist - Muse 的紧凑版本,整洁有序的单栏外观

  • Pisces - 双栏 Scheme,小家碧玉似的清新

  • Gemini - 不太清楚,有想法可以试用一下

2.2 添加头像

新建 source/images/ 目录,复制进去一些图片(可以是动图Gif),在站点配置文件 \_config.yml 添加:

1
2
# 头像
avatar: /images/riho_yoshioka1.jpg

主题配置文件 \themes\next\_config.yml 若设置了,会优先于前者:

1
2
3
4
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: XXX

也可以采用第二种方法:

  1. 首先在网上找或者自己PS一张心仪的图片,取名 background.jpg ,把它放在 Hexo\source\image 路径下(或者直接使用图床的图片地址)。

  2. 进入 Hexo\themes\hexo-theme-next\source\css\_common\components\header 目录,找到 header.styl 文件,双击打开。将第一行默认的 .header { background: $head-bg; } 修改为:

    1
    2
    // 下面的url()里不一定非要填相对路径,填一个能访问的url即可
    .header { background: url('../image/background.jpg'); }

2.3 设置头像旋转

旧版,打开 \themes\next\source\css\_common\components\sidebar\sidebar-author.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
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;

/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;

/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}

img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/

/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

新版可以直接修改主题配置文件 \themes\next\_config.yml ,设置 rotated 属性:

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: https://pic-1258215793.cos.ap-shanghai.myqcloud.com/cover/IMG_0759.JPG
# If true, the avatar will be dispalyed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: true

2.4 设置侧栏位置

修改主题配置文件 \themes\next\_config.yml 中的sidebar:

默认是左边,display设置侧栏在什么情况下显示。

2.5 设置菜单

修改主题配置文件中 \themes\next\_config.yml 菜单映射:

界面所显示的映射value是去 languages/{yourlanguage}.yml 查询的,想要修改时只需去修改 {yourlanguage}.yml 即可,不过要先在主题配置文件中开启这个标签。

设置菜单的图标:

(1)添加标签页面

修改主题配置文件 \themes\next\_config.yml 中的menu选项,可以在主页面的菜单栏添加标签选项,但是此时点击标签,跳转的页面会显示page not found。

添加标签页面的具体方法是:

  • 新建页面,输入如下命令:

    1
    2
    3
    $ cd myBlog

    $ hexo new page tags
  • 输入命令后,在 myBlog/source 下会新生成一个新的文件夹tags,在该文件夹下会有一个 index.md 文件。

  • 设置页面类型,在上步新生成的 myBlog/source/tags/index.md 中添加 type: "tags"index.md 文件内容如下:

    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2016-11-15 19:10:05
    type: "tags"
    ---
  • 设置具体文章的tags,当要为某一篇文章添加标签,只需在 myBlog/source/_post 目录下的具体文章的tags中添加标签即可,如:

    1
    2
    3
    4
    5
    6
    ---
    title: 基于Hexo和Github搭建博客
    date: 2016-11-09
    tags: [npm, hexo, github]
    categories: 搭建博客
    ---

(2)添加分类页面

步骤与添加标签页面类似,具体如下:

  • 新建页面,输入如下命令:

    1
    2
    3
    $ cd myBlog

    $ hexo new page categories
  • 输入命令后,在myBlog/source下会新生成一个新的文件夹categories,在该文件夹下会有一个index.md文件。

  • 设置页面类型,在上步新生成的 myBlog/source/categories/index.md 中添加 type: "categories"index.md 文件内容如下:

    1
    2
    3
    4
    5
    ---
    title: categories
    date: 2016-11-15 19:11:13
    type: "categories"
    ---
  • 设置具体文章的categories,当要为某一篇文章添加分类,只需在 myBlog/source/_post 目录下的具体文章的categories中添加分类即可,如:

    1
    2
    3
    4
    5
    6
    ---
    title: 基于Hexo和Github搭建博客
    date: XXXX-XX-XX
    tags: [hexo, github]
    categories: 搭建博客
    ---

(3)添加关于我页面

步骤与添加标签页面类似,具体如下:

  • 新建页面:

    1
    2
    3
    $ cd myBlog

    $ hexo new page about
  • 输入命令后,在 myBlog/source 下会新生成一个新的文件夹about,在该文件夹下会有一个 index.md 文件。修改 about/index.md ,本站点 index.md 如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: about
    date: 2016-11-15 19:08:50
    ---
    ## 关于我

    XXXX,XXXXXXXXX。

    From XXX

    QQ: XXXXXXX
    Email: XXXXXX@XX.com

2.6 设置社交链接

修改主题配置文件 \themes\next\_config.yml

可以在图标库中搜索图标 :

将链接设置为居中显示:

打开文件 themes\next\source\css\_common\components\sidebar\sidebar-author-links.styl ,添加如下内容:

1
2
3
.links-of-author-item {
text-align: center;
}

2.7 添加友链

(1)简单方案

在source目录下新建一个xx.html文件,然后配置menu映射即可。

xx: /xx.html

xx: /xx

添加如友情链接的方法:

1
2
3
4
5
6
7
# Blogrolls 
links_title: 友情链接
# links_layout: block
#links_layout: inline
links: Java学习天地: https://wangli0.github.com
ruulai.com: https://wangli0.github.com
视听中国: https://wangli0.github.com

(2)Next侧边栏添加

参考官方文档:Sidebar Setting

会在社交下增加任意个超链接,缺点是地方有限,无法放置过多链接;以及没有图标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Blog rolls
links_settings:
icon: far fa-smile-wink
title: 个人
# Available values: block | inline
layout: block

links:
网易云音乐: https://music.163.com/#/XXX

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading

(3)自定义界面

参考:Hexo NexT 添加友链页面

涉及到的文件:

1
2
3
4
5
6
7
8
9
10
11
12
.
├── _config.next.yml
└── source
├── _data
│ └── body-end.njk
├── css
│ └── link.css(也可以放置到主题中相同子路径)
├── js
│ └── link.js(也可以放置到主题中相同子路径)
└── links
├── index.md
└── linklist.json
1. 建立页面

执行命令,这会创建 source/links/index.md 文件:

1
hexo new page links

文件示例:

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
---
title: 友情链接
type: links
toc:
enable: false
---

<link rel="stylesheet" href="/css/link.css">

{% note info %}

排名不分先后,每次刷新会随机排列。

{% endnote %}

<div>
<div class="links-content">
<div class="link-navigation" id="links1"></div>
</div>
</div>

------

<div style="text-align:center;">
<span class="with-love" id="animate1"><i class="fa fa-heart"></i></span>
留言互换友链 o ((>ω<)) o
<span class="with-love" id="animate2"><i class="fa fa-heart"></i></span>
</div>

------

{% note success %}

## 友链格式

- 名称:如鱼饮水,冷暖自知
- 网址:[https://wangjiezhe.com](https://wangjiezhe.com)
- 头像:[https://gravatar.loli.net/avatar/e09cf54e933e5a690716e68961ff3b1c?s=512](https://gravatar.loli.net//avatar/e09cf54e933e5a690716e68961ff3b1c?s=512)

{% endnote %}

注意在 Front-Matter 里一定要有 type: links ,这里我还关闭了侧边栏的目录。

2. 存储数据

所有友链的数据都放在 source/links/linklist.json 里,其格式为:

1
2
3
4
5
6
7
8
9
10
11
12
[
{
"name": "",
"site": "",
"avatar": ""
},
{
"name": "",
"site": "",
"avatar": ""
}
]

其中 name 为网站的名字,site 为网址,avatar 为头像。头像可以使用 Gravatar,这样可以保证始终可用的。

3. 渲染页面

source/_data/body-end.njk 中,引入 link.js

1
2
3
{% if page.type === 'links' %}
{{- next_js('link.js', true) }}
{% endif %

修改主题配置文件 \themes\next\_config.yml 中开启自定义配置:

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

其中 source/js/link.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
26
// 随机排列
function shuffle(arr) {
let i = arr.length;
while (i) {
let j = Math.floor(Math.random() * i--);
[arr[j], arr[i]] = [arr[i], arr[j]];
}
}

// 渲染数据
function renderlink(data) {
var name, avatar, site, li = "";
shuffle(data);
for (var i = 0; i < data.length; i++) {
name = data[i].name;
avatar = data[i].avatar;
site = data[i].site;
li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + name + '</a></div>' + '</div>' + '</div>';
}
document.querySelector(".link-navigation").innerHTML = li;
}

// 获取 json 文件
fetch('/links/linklist.json')
.then(response => response.json())
.then(res => renderlink(res));
4. 创建样式

创建 source/css/link.css,其内容为(这个文件完全来自于网络):

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
.links-content {
margin-top: 1rem
}

.link-navigation::after {
content: " ";
display: block;
clear: both
}

.card {
width: 130px;
font-size: 1rem;
padding: 0;
border-radius: 4px;
transition-duration: .15s;
margin-bottom: 1rem;
display: block;
float: left;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.12);
background: #f5f5f5
}

.card {
margin-left: 16px
}

@media(max-width:567px) {
.card {
margin-left: 16px;
width: calc((100% - 16px)/2)
}

.card:nth-child(2n+1) {
margin-left: 0
}

.card:not(:nth-child(2n+1)) {
margin-left: 16px
}
}

@media(min-width:567px) {
.card {
margin-left: 16px;
width: calc((100% - 32px)/3)
}

.card:nth-child(3n+1) {
margin-left: 0
}

.card:not(:nth-child(3n+1)) {
margin-left: 16px
}
}

@media(min-width:768px) {
.card {
margin-left: 16px;
width: calc((100% - 48px)/4)
}

.card:nth-child(4n+1) {
margin-left: 0
}

.card:not(:nth-child(4n+1)) {
margin-left: 16px
}
}

@media(min-width:1200px) {
.card {
margin-left: 16px;
width: calc((100% - 64px)/5)
}

.card:nth-child(5n+1) {
margin-left: 0
}

.card:not(:nth-child(5n+1)) {
margin-left: 16px
}
}

.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)
}

.card .thumb {
width: 100%;
height: 0;
padding-bottom: 100%;
background-size: 100% 100%!important
}

.posts-expand .post-body img {
margin: 0;
padding: 0;
border: 0
}

.card .card-header {
display: block;
text-align: center;
padding: 1rem .25rem;
font-weight: 500;
color: #333;
white-space: normal
}

.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: 700;
text-decoration: none;
border: 0
}

.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
border: 0
}
5. 添加侧栏

在主题配置文件 \themes\next\_config.yml 中,添加

1
2
3
4
5
6
menu:
home: / || fa fa-home
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
+ links: /links/ || fa fa-link
6. 问题排查

步骤:

  1. 浏览器 F12 查看页面源码,是否有一个 class 是 .link-navigation 的网页元素。
  2. 查看 link.js 是否正常加载了,json 文件是否正常加载了。

按上述配置后, link.js 加载报错 Unexpected token '<' ,发现是因为启用了音乐播放器APlayer,默认会为文件添加一行标签配置,导致JS和读取Json时报错。

官方文档:hexo-tag-aplayer

站点配置文件 \_config.yml 中将asset_inject属性设置为false,即可解决问题(可能需要重新编译):

1
2
3
4
5
# 音乐播放器
aplayer:
meting: true
# 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
asset_inject: false

2.8 设置站点图标

下载一个32*32的ico图标,修改主题配置文件 \themes\next\_config.yml

1
2
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

2.9 修改字体

Google Fonts 上找到心仪的字体,然后在主题配置文件 \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
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
# ---------------------------------------------------------------
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
# light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
enable: true

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Monda
size:

# Font settings for site title (.site-title).
title:
external: true
family:
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: Roboto Slab
size:

# Font settings for posts (.post-body).
posts:
external: true
family:

# Font settings for <code> and code blocks.
codes:
external: true
family:

2.10 设置首页只显示部分内容

这个只要在文章中加上 <!–more–> 标记 ,该标记以后部分就不在显示了,只有展开全部才显示,这是hexo定义的。但这样手动配置感觉会很麻烦,所以修改主题配置文件中 \themes\next\_config.yml

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

把enable改为对应的false改为true。

新版本:

1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

2.11 设置博客背景

旧版本,打开文件 blog\themes\next\source\css\_custom\custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:1200px) {

body {
background-image:url(/images/background.jpg); //这一行的括号里填背景图片的路径,将图片重命名为background.jpg放在\themes\next\source\images下,也可填图片的链接。
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;

}

#footer a {
color:#eee;
}
}

新版本,source/_data/styles.styl 文件,添加:

1
2
3
4
5
6
7
body {
background:url(/images/background.jpg); // 可以是路径也可以是链接
background-repeat: no-repeat; // 不重复
background-attachment:fixed; // 固定住背景图片
background-position:50% 50%; // 图片位置:居中
background-size: 100% 100%; // 图片长宽扩充为100%
}

主题配置文件 blog/themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
- #style: source/_data/styles.styl
+ style: source/_data/styles.styl

2.12 添加腾讯公益404页面

blog\themes\next\source\ 路径下新建 404.html 文件,添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

修改主题配置文件 blog/themes/next/_config.yml ,开启 commonweal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
# schedule: /schedule/ || calendar
sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
enable: true
# Icon Mapping
home: home
about: about
categories: th
tags: tags
archives: archive
commonweal: heartbeat

2.13 添加版权声明

旧版本,修改主题配置文件 \themes\next\_config.xml ,找到 post_copyright 开启 enable

1
2
3
4
5
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

修改根目录配置文件:确认 url 属性有配置:

1
url: http://linyishui.top

新版本,修改主题配置文件 \themes\next\_config.xml

1
2
3
4
5
6
7
8
9
10
11
12
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
sidebar: true
post: true
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language: deed.zh

2.14 页脚增加建站时间

修改主题配置文件 blog/themes/next/_config.yml ,找到since:

1
since: 2018

2.15 侧栏增加已运行时间(旧版本)

打开文件 blog/themes/next/layout/_custom/sidebar.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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("07/26/2018 00:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i) {
if (i<10) {
i="0" + i
};
return i;
}
show_date_time();
</script>

然后打开文件 blog/themes/next/layout/_macro/sidebar.swig(修改位置,可不修改):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  {# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}&nbsp;
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
{% include '../_custom/sidebar.swig' %}
</div>
{% endif %}

</div>
</section>

可以通过文件 blog/themes/next/source/css/_custom/custom.styl ,修改时间栏样式:

1
2
3
4
5
6
7
/* 自定义的侧栏时间样式 */
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}

2.16 侧栏头像点击返回首页(旧版本)

修改文件 blog/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>

2.17 页脚增加会跳动的心(旧版本)

首先修改主题配置文件 blog\themes\next\_config.yml ,找到icon:

1
2
3
footer:
# Icon between year and copyright info.
icon: heart

然后修改文件 blog/themes/next/layout/_partials/footer.swig ,找到 with-love ,增加id:

1
2
3
<span class="with-love" id="heart">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>

最后修改文件 blog/themes/next/source/css/_custom/custom.styl ,增加以下内容:

1
2
3
4
5
6
7
8
9
10
11
/* 自定义页脚跳动的心样式 */
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart {
color: red;
animation: heartAnimate 1.33s ease-in-out infinite;
}

2.18 隐藏网页底部powered By(旧版本)

打开 themes/next/layout/_partials/footer.swig ,使用 “<!–>” 隐藏之间的代码即可,或者直接删除,位置如图:

2.19 自定义鼠标样式(旧版本)

打开 themes/next/source/css/_custom/custom.styl ,在里面写下如下代码:

1
2
3
4
5
6
7
// 鼠标样式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
}

其中 url 里面必须是 ico 图片,替换后发现实际点触和鼠标图标是有偏差的,所以我取消了鼠标的样式。

2.20 博文压缩(旧版本)

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

1
2
3
$ npm install gulp -g

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

根目录下新建 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
26
27
28
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
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'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置,对 public 目录中的静态资源文件进行压缩。

2.21 添加主页文章阴影效果(旧版本)

打开 \themes\next\source\css\_custom\custom.styl ,向里面加入:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

2.22 添加动态背景(旧版本)

如果next主题在5.1.1以上的话,直接在主题配置文件 \themes\next\_config.yml 中找到 canvas_nest: false ,把它改为 canvas_nest: true 就行了(注意分号后面要加一个空格)。

三. 功能配置-博文

3.1 开启图片灯箱

修改主题配置文件 \themes\next\_config.yml

1
2
3
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: true

3.2 修改标签图标

默认情况下标签前缀是 # 字符,旧版本中用户可以通过修改主题源码将标签的字符前缀改为图标前缀,在 themes\next\layout\_macro\post.swig 文章布局模板中找到文末标签相关代码段,将 # 换成 <i class="fa fa-tags"></i> 即可:

1
2
3
4
5
6
7
8
9
10
11
<footer class="post-footer">
{% if post.tags and post.tags.length and not is_index %}
<div class="post-tags">
{% for tag in post.tags %}
- <a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
+ <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tags"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
...
</footer>

Next 中使用 FontAwesome 作为图标库,用户可以在 FontAwesome 上找到心仪的图标来替换标签的字符前缀。

新版直接修改主题配置文件 \themes\next\_config.yml

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

3.3 开启相关文章推荐

该功能由 hexo-related-popular-posts 插件提供,在站点根目录中执行以下命令安装依赖:

1
$ npm install hexo-related-popular-posts --save

在主题配置文件中 \themes\next\_config.yml 开启相关文章推荐功能:

1
2
3
4
5
6
7
8
9
10
11
12
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: # Custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

会在每篇文章结尾根据标签相关性和内容相关性来推荐相关文章。事实上并非每篇文章都需要开启该功能,可在文章 Front-Matter 中设置 related_posts 字段来控制是否在文末显示相关文章,然后修改文章布局模板中相关的判定条件 themes/next/layout/_macro/post.njk

1
2
3
-     {%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
+ {%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) and post.related_posts %}
{{ partial('_partials/post/post-related.njk') }}

为了方便可在草稿模板 \scaffolds\draft.md 中统一添加 related_posts 字段默认值:

1
2
3
4
  title: {{ title }}
tags:
categories:
+ related_posts: true

3.4 修改代码块自定义样式

旧版本,打开 \themes\next\source\css\_custom\custom.styl ,向里面加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

新版本,主题配置文件中 \themes\next\_config.yml 中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: default
dark: tomorrow-night
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: mac

3.5 添加顶部加载条

修改主题配置文件 \themes\next\_config.ymlpace: false 改为 pace: true ,还可以换不同样式的加载条,如下图:

查看不同主题效果:Pace-Themes

V8版本之后好像废弃了Pace,代替为nprogress,但没有样式可以选,而且似乎会和阅读进度条冲突:

1
2
3
4
5
# Progress bar in the top during page loading.
# For more information: https://github.com/rstacruz/nprogress
nprogress:
enable: true
spinner: true

3.6 开启顶部阅读进度

主题配置文件中 \themes\next\_config.yml 中:

1
2
3
4
5
6
7
8
9
10
# Reading progress bar
reading_progress:
enable: true
# Available values: left | right
start_at: left
# Available values: top | bottom
position: top
reversed: false
color: "#37acc6"
height: 3px

3.7 右上角添加bookmark记录阅读进度

修改主题配置文件中 \themes\next\_config.yml

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: manual

3.8 右上角添加 Follow Me On GitHub

修改主题配置文件中 \themes\next\_config.yml

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/LAILAIWA
title: Follow me on GitHub

3.9 返回顶部按钮添加百分比

修改主题配置文件 \themes\next\_config.yml

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

3.10 取消目录生成的自动序号

修改主题配置文件 \themes\next\_config.yml 中number属性为false即可。

1
2
3
4
5
6
# Table Of Contents in the Sidebar
toc:
enable: true

# Automatically add list number to toc.
number: false

3.11 添加底部访问量(旧版本)

打开 \themes\next\layout\_partials\footer.swig 文件,在copyright前加上这句话:

1
2
<script async src="https://dn-
lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2019/07/16更新:不蒜子官网提示原地址已失效,请把dn-lbstatics.qbox.me 域名更换为 busuanzi.ibruce.info

然后在合适的位置添加显示统计的代码:

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码:

  • pv的方式,单个用户连续点击n篇文章,记录n次访问量:

    1
    2
    3
    <span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>
    </span>
  • uv的方式,单个用户连续点击n篇文章,只记录1次访客数:

    1
    2
    3
    <span id="busuanzi_container_site_uv">
    本站总访问量<span id="busuanzi_value_site_uv"></span>
    </span>

添加之后再执行 hexo d -g ,然后再刷新页面就能看到效果。

3.12 添加博文末尾标记(旧版本)

\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):

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

然后打开主题配置文件 \themes\next\_config.yml ,在末尾添加:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。

3.13 MarkDown常用

代码新增删除变色:

1
2
3
4
```diff
+
-
​```

四. 新增插件

4.1 统计功能

实现统计功能,首先在根目录下安装 hexo-wordcount ,运行:

1
$ npm install hexo-wordcount --save

然后在主题配置文件 \themes\next\_config.yml 中,配置如下:

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

新版本,在根目录下安装 hexo-word-counter

1
2
$ npm install hexo-word-counter
$ hexo clean

根目录配置文件 \_config.yml 添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 字数统计
symbols_count_time:
# 开启当前页面字数统计
symbols: true
# 开启当前页面估计阅读时间
time: true
# 页脚添加全站字数统计
total_symbols: true
# 页脚添加全站估计阅读时间
total_time: true
# 平均字长
awl: 4
# 每分钟的平均字数
wpm: 275

修改主题配置文件 \themes\next\_config.yml 中:

1
2
3
4
5
6
7
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
# 是否在同一行
separated_meta: true
# 是否在页脚显式
item_text_total: true

4.2 增加搜索功能

安装 hexo-generator-searchdb ,在站点的根目录下执行以下命令:

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

修改主题配置文件 blog/themes/next/_config.yml ,找到 local_search

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

4.3 夜晚模式

安装 hexo-next-darkmode 插件

1
$ npm install hexo-next-darkmode --save

在主题配置文件 \themes\next\_config.yml 里添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
enable: true
bottom: '64px' # default: '32px'
right: 'unset' # default: '32px'
left: '32px' # default: 'unset'
time: '0.5s' # default: '0.3s'
mixColor: 'transparent' # default: '#fff'
backgroundColor: 'transparent' # default: '#fff'
buttonColorDark: '#100f2c' # default: '#100f2c'
buttonColorLight: '#fff' # default: '#fff'
isActivated: false # default false
saveInCookies: true # default: true
label: '🌓' # default: ''
autoMatchOsTheme: true # default: true
libUrl: # Set custom library cdn url for Darkmode.js
  • isActivated: true:默认激活暗黑 / 夜间模式,请始终与 saveInCookies: falseautoMatchOsTheme: false 一起使用

确保 Next 原生的 darkmode 选项设置为 false,在主题配置文件 \themes\next\_config.yml 中更改以下内容:

1
darkmode: false

夜晚模式激活后,hexo-next-darkmode 插件会将 darkmode--activated CSS 类添加到 body 标签,可以利用它覆盖插件默认自带的 CSS 样式(如下所示);这样就可以实现暗黑模式 CSS 样式的高度自定义,包括代码块颜色自定义切换等。更多配置内容介绍可以参考官方文档,实现原理分析可以看这里

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
.darkmode--activated {
--body-bg-color: #282828;
--content-bg-color: #333;
--card-bg-color: #555;
--text-color: #ccc;
--blockquote-color: #bbb;
--link-color: #ccc;
--link-hover-color: #eee;
--brand-color: #ddd;
--brand-hover-color: #ddd;
--table-row-odd-bg-color: #282828;
--table-row-hover-bg-color: #363636;
--menu-item-bg-color: #555;
--btn-default-bg: #222;
--btn-default-color: #ccc;
--btn-default-border-color: #555;
--btn-default-hover-bg: #666;
--btn-default-hover-color: #ccc;
--btn-default-hover-border-color: #666;
--highlight-background: #282b2e;
--highlight-foreground: #a9b7c6;
--highlight-gutter-background: #34393d;
--highlight-gutter-foreground: #9ca9b6;
}

.darkmode--activated img {
opacity: 0.75;
}

.darkmode--activated img:hover {
opacity: 0.9;
}

.darkmode--activated code {
color: #69dbdc;
background: transparent;
}

Hexo 重新构建生成静态文件后,点击页面上的按钮即可切换暗黑模式,最终演示效果可以看这里

1
2
3
$ hexo clean

$ hexo g -d

4.4 豆瓣阅读 / 电影 / 游戏

为站点添加豆瓣阅读 / 电影 / 游戏页面,在根目录下执行以下命令安装相关依赖:

1
$ npm install hexo-douban --save

在站点配置文件 /_config.yml 中添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
user: # 个人豆瓣ID
builtin: false
book:
title: "This is my book title"
quote: "This is my book quote"
movie:
title: "This is my movie title"
quote: "This is my movie quote"
game:
title: "This is my game title"
quote: "This is my game quote"
timeout: 10000
  • user: 填写豆瓣 ID。登陆豆瓣后点击个人主页,此时 url 中最后一段即是用户 ID,一般情况下会是一段数字,如果设置了个人域名的话,则个人域名即为 ID。
  • builtin: 是否将生成页面的功能嵌入 hexo shexo g 中。
  • timeout: 爬取数据的超时时间。

如果只想生成某一个页面(比如只生成读书页面),把其他的配置项注释掉即可。

在主题配置文件 \themes\next\_config.yml 中新增菜单入口:

1
2
3
4
5
6
7
8
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || tasks
+ books: /books/ || book
+ movies: /movies/ || video-camera
+ games: /games/ || gamepad

在语言包 themes\next\language\zh_CN.yml 中新增菜单中文:

1
2
3
4
5
6
7
8
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
+ movies: 电影
+ books: 读书
+ games: 游戏

然后在根目录下执行以下命令生成豆瓣阅读 / 电影 / 游戏页面:

1
$ hexo douban

可选参数:

  • -b | –books: 只生成豆瓣读书页面
  • -m | –movies: 只生成豆瓣电影页面
  • -g | –games: 只生成豆瓣游戏页面

执行命令后,插件会根据用户提供的 ID 爬取豆瓣中的数据信息并在 public 目录下生成对应的页面,当服务器启动或部署后会将页面显示在对应的菜单路由下。

如果在站点配置中设置了 douban.builtin: false,则每次豆瓣数据变动后需要手动执行一次 hexo douban 来刷新页面数据。如果设置了 douban.builtin: true,则每次执行 hexo shexo g 的时候将会自动同时执行 hexo douban 命令,但这样可能会增加打包编译的时间。建议如果豆瓣数据变动不频繁的情况下该项设为 false 即可。

普遍会用 hexo d 来作为 hexo deploy 命令的简化,但是当安装了 hexo douban 之后, hexo d 就会有歧义而无法执行,因为 hexo doubanhexo deploy 的 Alias 都是 hexo d

以下问题需要重装Node到12.18.x的版本:

1
2
3
INFO  0 books have been loaded in 1223 ms, because you are offline or your network is bad
INFO 0 movies have been loaded in 1743 ms, because you are offline or your network is bad
INFO 0 games have been loaded in 1133 ms, because you are offline or your network is bad

4.5 留言板

Next 支持多款评论系统:

  • Disqus:欧美 UI 风格,支持 Tweet、Facebook 等国外社交软件的三方登陆和一键分享; Demo
  • gitment:必须用 github 账号登陆才能评论,支持 Markdown 语法,与 github issues 页面风格一致;Demo
  • Valine:支持匿名评论,支持 Markdown 语法,界面简洁美观;
  • 畅言:国产评论系统,可区分热评和最新评论,论坛贴吧风;
  • 来必力:支持插入图片和 GIF,支持国内外多种社交媒体的三方登陆 Demo

(1)utterances

为什么选用utterances?

  1. 没有广告
  2. 不会追踪用户隐私
  3. 搭建于GitHub,不需要再注册账号才能使用

安装utterances->【Install】->【Only Select Repositories】选择博客所在repo->【填写owner/repo】->【设置issue标题如何开】->【填写Issue Label】->【选择主题样式】->【复制生成的代码】。

首先在博客对应的Repository中增加要使用的label:

如图所示,新增了一个💬Comments:

修改 blog\themes\next\layout\_third-party\comments\utterances.swig (请注意此处有漏掉label的配置,后续才发现,可以参考下文中正确内容):

1
2
3
4
5
6
7
8
9
{% if theme.utterances.enable %}
<script src="https://utteranc.es/client.js"
repo="LAILAIWA/LAILAIWA.github.io"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
{% endif %}

修改 blog\themes\next\layout\_partials\comments.swig

1
2
3
4
5
6
7
8
{% elseif theme.valine.appid and theme.valine.appkey %}
<div class="comments" id="comments">
</div>
{% elseif theme.utterances.enable %}
<div class="comments" id="comments">
{% include '../_third-party/comments/utterances.swig' %}
</div>
{% endif %}

然后在主题的配置文件中,增加如下配置:

1
2
3
4
5
6
7
8
9
10
11
# 增加留言板功能
# Demo: https://utteranc.es/ http://trumandu.github.io/about/
# pathname, url, title, og:title [ISSUE NUMBER] or [SPECIFIC TERM]
# theme: github-light,github-dark,github-dark-orange
# The label must exist in your repo
utterances:
enable: true
repo: LAILAIWA/LAILAIWA.github.io
issue_term: pathname
theme: github-light
label: 💬Comments

更新博客,并任意打开一篇文章:

需要授权GitHub账户信息才能正常使用:

尝试评论一次,测试功能是否正常:

回到GitHub-issues,可以发现多了刚刚添加的回复,但很明显没有使用我们创建的label:

检查以上步骤,发现 utterances.swig 粘贴copy的代码时,当时页面未填写label,补充完整:

1
2
3
4
5
6
7
8
9
10
{% if theme.utterances.enable %}
<script src="https://utteranc.es/client.js"
repo="LAILAIWA/LAILAIWA.github.io"
issue-term="pathname"
label="💬Comments"
theme="github-light"
crossorigin="anonymous"
async>
</script>
{% endif %}

更新博客,并再次评论,然后确认是否使用正确的label,结果如下,修改成功:

2019年8月1日更新的NexT 7.3.0 版本集成了utterances评论

使用命令安装:npm install theme-next/hexo-next-utteranc

配置部分和之前类似,使用Hexo theme nexT并加入utterances comment

(2)gitalk

hexo博客添加gitalk评论系统

4.6 文章评分

widgetpack 是一款轻量级的插件,提供四项具体的功能:

  • Comments: 评论系统,类似于留言板
  • Reviews: 评价系统,类似于商品评价
  • Rating: 星级评分系统
  • Google Reviews: 关联展示 Google Rating

Next 主题中已经集成了 widgetpack 的星级评分系统,用户无须再安装或引入插件脚本,只需在 widgetpack 中注册账号并修改主题配置即可,应用效果如下:

文章评分组件

widgetpack 中注册账号,根据引导填写应用名称和域名创建应用,创建后可在页面左上角看到应用 id。

在主题配置文件 themes\next_config.yml 中开启评分功能,填写应用 id,并设置评分颜色:

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: true
id: #<app_id>
color: fadb14

此时刷新浏览器即可在文章末尾看到空的评分栏了。点击评分发现需要以社交账号登陆,而这些社交账号基本都是 facebook、twitter 等墙外的社交软件,限制了评分系统可用性,我们可以在 widgetpack 控制台中修改评分认证机制。

在控制台中点击左上角展开菜单,在 Rating -> Setting 中将 Vote via 选项改为 Device(cookie) 以开启匿名评分,该选项将基于设备认证访问者身份:

开启匿名评分

用户还可以在该页面设定 star 数量和大小。修改后记得勾选右下角的 SAVE SETTING 才会生效。

在实际使用过程中,并非每篇文章都需要开启评分。此时可在 Front-Matter 中设定变量 rating 用于控制是否开启评分。修改文章布局模板中相关代码,使得只有当主题配置文件 themes\next\layout_macro\post.swigrating.enable 字段和 page.rating 字段同时为 true 才会插入评分组件:

1
2
3
4
5
6
7
8
9
  {% if not is_index %}
- {% if theme.rating.enable or (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) or (theme.needmoreshare2.enable and theme.needmoreshare2.postbottom.enable) or (theme.baidushare and theme.baidushare.type === "button" )%}
+ {% if (theme.rating.enable and post.rating) or (theme.vkontakte_api.enable and theme.vkontakte_api.like) or (theme.facebook_sdk.enable and theme.facebook_sdk.like_button) or (theme.needmoreshare2.enable and theme.needmoreshare2.postbottom.enable) or (theme.baidushare and theme.baidushare.type === "button" )%}
<div class="post-widgets">
{% if theme.rating.enable %}
<div class="wp_rating">
<div id="wpac-rating"></div>
</div>
{% endif %}

为了批量为每篇新文章设定该变量并赋默认值,可以修改草稿模板内容 scaffolds\draft.md ,这样以来每篇草稿发布后都会默认开启评分:

1
2
3
4
  title: {{ title }}
tags:
categories:
+ rating: true

站点上线后,可以在控制台菜单的 Site -> Setting 中勾选 Private,使得组件只对应用内指定的域名上生效,这样以来即时别人错填了你的 id 也不会将评分数据误提交到你的应用中了。

widgetpack 与前文提到的 hotjar 在评价反馈功能上的侧重点不一样,widgetpack 更侧重于对文章的评分,而 hotjar 侧重于对整个页面的评分,并提供了文字和截图反馈的渠道。

4.7 博文加密

首先安装插件:

1
2
3
npm install --save hexo-blog-encrypt
#
yarn add hexo-blog-encrypt

MD文件信息头中添加password:

1
password: <密码> # 为空表示无密码

标准内容如下:

1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

可以直接在配置文件中统一设置 blog/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Security
encrypt: # hexo-blog-encrypt
abstract: 这篇文章被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

encrypt:
enable: true
default_abstract: 此文章已被加密,需要输入密码访问。 //首页文章列表中加密文章的默认描述文案
default_message: 请输入密码以阅读这篇私密文章。 //文章详情页的密码输入框上的默认描述文案

然后在文章 Front-Matter 中添加 password 字段用于设置文章访问密码。重启服务器,这个时候可能需要经历较长一段时间的加密过程,请耐心等待,加密完成后刷新页面将会显示密码输入框,输入密码后才能继续访问文章内容。

该功能只会加密文章正文,其他内容如打赏、版权信息、标签等则不会被加密隐藏,这样看起来有点奇怪,所以建议加密文章隐藏掉打赏和版权信息内容。

密码输入错误时将会显示浏览器默认告警弹窗,可以使用 sweetalert 来美化错误提示。在主题自定义布局文件 themes\next\layout_custom\custom.swig 中添加如下代码:

1
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

如果 custom.swig 文件不存在,需要手动新建并在布局页面 themes\next\layout_layout.swig 中 body 末尾引入:

1
2
3
4
5
6
7
8
      ...
{% include '_third-party/exturl.swig' %}
{% include '_third-party/bookmark.swig' %}
{% include '_third-party/copy-code.swig' %}

+ {% include '_custom/custom.swig' %}
</body>
</html>

node_modules 依赖库 node_modules\hexo-blog-encrypt\lib\blog.encrypt.js 中修改 hexo-blog-encrypt 源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
  ...
} catch (e) {
- alert(decryptionError);
+ swal({
+ text: "密码错误!",
+ icon: "error",
+ className: "password-error",
+ timer: 1000,
+ button: false
+ });
console.log(e);
}
...

在自定义样式文件 themes/next/source/css/_custom/custom.styl 中添加如下代码:

1
2
3
4
5
6
7
8
9
//密码错误sweetalert弹框样式修改
.swal-overlay {
background-color: transparent;
}

.password-error {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 4px;
}

由于是在 node_module 中修改的依赖文件,一旦更新或者重装依赖都会覆盖修改,需要重新修改一遍

4.8 添加 Google Analytics 监控 GitHub Pages 访问流量

在谷歌的Google Analytics中注册个人账户,配置网站信息获得衡量ID(或者使用百度统计):

在博客目录主题下的 _config.yml 中配置(注意非根目录):

1
2
3
4
5
6
# Google Analytics
google_analytics:
tracking_id: XXX
localhost_ignored: true

baidu_analytics: XXX("https://hm.baidu.com/hm.js?____________________")

修改 \themes\next\layout\_third-party\analytics\google-analytics.swig

1
2
3
4
5
6
7
8
9
10
11
12
{% if theme.google_analytics.tracking_id %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ theme.google_analytics.tracking_id }}"></script>
<script>
var host = window.location.hostname;
if (host !== "localhost" || !{{theme.google_analytics.localhost_ignored}}) {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ theme.google_analytics.tracking_id }}');
}
</script>
{% endif %}

4.9 音乐播放器

音乐播放器使用:hexo-tag-aplayer

内容来自官方文档:MetingJS

(1)APlayer

安装:

1
npm install --save hexo-tag-aplayer

依赖版本:

  • APlayer.js > 1.8.0
  • Meting.js > 1.1.1

Markdown文档中使用:

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

参数:

  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: (可选)播放器袖珍风格
  • autoplay: (可选) 自动播放,移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: (可选)歌词文件 URL 地址

当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:

1
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:

1
2
3
{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

播放列表:

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
{% aplayerlist %}
{
"narrow": false, // (可选)播放器袖珍风格
"autoplay": true, // (可选) 自动播放,移动端浏览器暂时不支持此功能
"mode": "random", // (可选)曲目循环类型,有 'random'(随机播放), 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放), 默认:'circulation'
"showlrc": 3, // (可选)歌词显示配置项,可选项有:1,2,3
"mutex": true, // (可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
"theme": "#e6d0b2", // (可选)播放器风格色彩设置,默认:#b7daff
"preload": "metadata", // (可选)音乐文件预载入模式,可选项: 'none' 'metadata' 'auto', 默认: 'auto'
"listmaxheight": "513px", // (可选) 该播放列表的最大长度
"music": [
{
"title": "CoCo",
"author": "Jeff Williams",
"url": "caffeine.mp3",
"pic": "caffeine.jpeg",
"lrc": "caffeine.txt"
},
{
"title": "アイロニ",
"author": "鹿乃",
"url": "irony.mp3",
"pic": "irony.jpg"
}
]
}
{% endaplayerlist %}

(2)MeingJS 支持 (3.0 新功能)

MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

如果想在本插件中使用 MetingJS,请在 Hexo 配置文件 _config.yml 中设置:

1
2
aplayer:
meting: true

接着就可以通过 {% meting ...%} 在文章中使用 MetingJS 播放器了:

1
2
3
4
5
<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

有关 {% meting %} 的选项列表如下:

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式:all, one,none
order list 列表播放模式: list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放,移动端浏览器暂时不支持此功能
mutex true 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式,可选项: none, metadata, auto
theme #ad7a86 播放器风格色彩设置

关于如何设置自建的 Meting API 服务器地址,以及其他 MetingJS 配置,请参考章节自定义配置

若在 Hexo 中使用了 PJAX,可能需要自己手动清理 APlayer 全局实例:

1
2
3
4
5
6
7
8
$(document).on('pjax:start', function () {
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
window.aplayers[i].destroy();
}
window.aplayers = [];
}
});

(3)自定义配置(3.0 新功能)

现在你可以在 Hexo 配置文件 _config.yml 中配置本插件:

1
2
3
4
5
6
7
8
9
10
aplayer:
script_dir: some/place # Public 目录下脚本目录路径,默认: 'assets/js'
style_dir: some/place # Public 目录下样式目录路径,默认: 'assets/css'
cdn: http://xxx/aplayer.min.js # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
style_cdn: http://xxx/aplayer.min.css # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
meting: true # MetingJS 支持
meting_api: http://xxx/api.php # 自定义 Meting API 地址
meting_cdn: http://xxx/Meing.min.js # 引用 Meting.js 外部 CDN 地址 (默认不开启)
asset_inject: true # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
externalLink: http://xxx/aplayer.min.js # 老版本参数,功能与参数 cdn 相同

(4)故障排除

1. 标签参数空格问题

在 Hexo 标签中,用户可能无法直接在标签参数中加入空格

如果遇到这类问题,请直接将参数用双引号括起来使用,如下所示:

1
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "autoplay" "width:70%" "lrc:caffeine.txt" %}
2. 重复载入 Aplayer.js 资源脚本问题

本插件通过 after_render:html过滤器 , 将 APlayer.jsMeting.js 插入到使用了本插件标签 的 HTML 文件中:

1
2
3
4
5
6
7
8
<html>
<head>
...
<script src="assets/js/aplayer.min.js"></script>
<script src="assets/js/meting.min.js"></script>
</head>
...
</html>

但是 after_render:html 在一些情形下可能无法被正常触发:

  • Does not work with hexo-renderer-jade
  • after_render:html 似乎在 Hexo 服务器模式默认配置中无法被调用 (hexo server), 遇到这种情况用户可能需要使用 hexo-server 的静态文件解析模式 ( hexo server -s) .

如果在博客生成过程中,插件发现 after_render:html 没有被调用,那么插件将会通过 after_post_render 过滤器来植入脚本。但是使用 after_post_render 会有重复载入 APlayer.js 的情况(例如当一个页面中存在多篇博客时),以及一些非文章页面将无法使用本插件。

如果想完全解决这个问题,用户可能需要自己在主题文件中手动加入 Aplayer.jsMeting.js,同时关闭插件的自动脚本插入功能:

1
2
3
4
5
# 音乐播放器
aplayer:
meting: true
# 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
asset_inject: false

4.10 视频播放器

hexo-tag-dplayer

4.11 hexo-tag-mmedia

因APlayer自动引入JS依赖会导致一些全局文件出错,配置关闭后单个页面开启又很麻烦,所以寻找替代工具。

hexo-tag-mmedia 集成了多种音视频播放器,可以参考 hexo-tag-mmedia文档 ,目前支持:

效果参考:DEMO

安装插件:

  1. 删除已安装的几个插件,以防冲突。

    1
    2
    3
    npm uninstall hexo-tag-aplayer
    npm uninstall hexo-tag-dplayer
    npm uninstall hexo-tag-bilibili
  2. 安装 hexo-tag-mmedia

    1
    npm install hexo-tag-mmedia@1 --save

根目录配置文件 /_config.yml 添加:

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
# default 为默认配置,在 _config.yml 中填写就不需要在每个标签全部写入了,所有允许在 mmedia 标签上写入的配置项,均可在 default 下配置。default 下 contents 项,用于设置 JSON 类型的默认配置,注意要使用 yaml 格式写默认配置。
mmedia:
audio:
default:
video:
default:
aplayer:
js: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js
css: https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css
default:
contents:
meting:
js: https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
api:
default:
dplayer:
js: https://cdn.jsdelivr.net/npm/dplayer@1/dist/DPlayer.min.js
hls_js: https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js
dash_js: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
shaka_dash_js: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
flv_js: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
webtorrent_js: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
default:
contents:
bilibili:
default:
page: 1
danmaku: true
allowfullscreen: allowfullscreen
sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
width: 100%
max_width: 850px
margin: auto
xigua:
default:
autoplay: false
startTime: 0
allowfullscreen: allowfullscreen
sandbox: allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups
width: 100%
max_width: 850px
margin: auto

(1)MarkDown引入

MarkDown 内可以使用两种标签作为插件,分别是 mmediammedias ,使用方式为:

1
2
3
4
{% mmedia %}

{% mmedias %}
{% endmmedias %}

只使用 args 作为传参方式时,两种标签均可使用,当需要使用 contents 传参时,只能使用 mmedias 。后面第一个参数用于标记标签,可选(以详细文档为主,持续更新中):audio video meting aplayer dplayer bilibili xigua 再后面的参数将直接作为 args 参数直接传入插件。

(2)参数

传入标签的参数可以写入到三个位置,分别为: _config.ymlargscontents ,其中只有部分插件可使用 contents 配置,具体看详细文档,如有冲突项,覆盖规则为(后面的会被前面发覆盖):contents -> args -> _config.yml -> 插件默认

写入到 args 上的参数,有两种写法,分别是使用 := 分割,两种写法是等效的,在遇到第一个 := 时会自动分割,例如:

1
2
3
{% mmedia "bilibili" "bvid:BV1hb4y1R7xf" %}

{% mmedia "bilibili" "bvid=BV1hb4y1R7xf" %}

两种写法是等效的。

如果遇到布尔类型的参数,可以简写:

1
2
3
{% mmedia "audio" "src:a.mp3" "autoplay:" %}

{% mmedia "audio" "src:a.mp3" "autoplay:true" %}

两种写法等效,但需要注意, := 一定不能省略。

(3)JSON 传参

支持 JSON 方式传参,其中 JSON 为 JSON5 规范。示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% mmedias "aplayer" "autoplay:false" %}
{
"volume": 0.8,
"audio":
[
{
"name": "name1",
"artist": "artist1",
"url": "url1.mp3",
"cover": "cover1.jpg",
"lrc": "lrc1.lrc",
"theme": "#ebd0c2"
},
{
"name": "name2",
"artist": "artist2",
"url": "url2.mp3",
"cover": "cover2.jpg",
"lrc": "lrc2.lrc",
"theme": "#46718b"
}
]
}
{% endmmedias %}

(4)MetingJS

规则:

  • 使用 := 分割。
  • 所有 <meting-js> 标签的参数均可添加,只要能写进去就可以。
1
2
3
{% mmedia "meting" "auto=https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html" %}

{% mmedia "meting" "server=netease" "type=playlist" "id=60198" %}

(5)BiliBili

1
2
3
{% mmedia "bilibili" "bvid:BV1br4y1P7ND" %}

{% mmedia "bilibili" "bvid:BV1br4y1P7ND" "danmaku:false" %}

使用 := 分割,详细参数表:

参数 默认 解释
aid - aid
bvid - bvid,与 aid 同时出现时以 bvid 为准
page 1 page
danmaku true 是否有弹幕 ture or false
allowfullscreen allowfullscreen 允许全屏, allowfullscreen 或 true 允许,其他选项不允许
sandbox 配置 iframe sandbox
width 100% css 属性
max_width 850px css 属性
margin auto css 属性

4.12 添加看板娘(旧版本)

首先根目录打开命令工具,输入如下代码:

1
npm install -save hexo-helper-live2d

然后打开 Hexo/blog/themes/next/layout_layout.swig ,将下面代码放到 </body> 之前:

1
{{ live2d() }}

然后在根目录配置文件 \_config.yml 中添加参数:

1
2
3
4
5
6
7
8
9
10
11
12
13
# 动态妹子
live2d:
enable: true
scriptFrom: local
tagMode: true
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true

如果出现下面这个问题:

首先删除hexo 下面的 .deploy_git 文件夹,然后执行下列代码:

1
git config --global core.autocrlf false

新版本,有点卡卡的,而且没地方放了,不加了:live2d-widget

Edit source/_data/head.njk in site root directory and add the following content:

1
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

Then uncomment head under the custom_file_path section in theme config file.

1
2
custom_file_path:
head: source/_data/head.njk

五. 异常记录

(1)unknown block tag: endif

一次更新博客(hexo g)时,出现以下异常:

google了一下,看到有类似问题的是因为在’{‘和’%’之间多写了空格这种语法错误,所以花了一些时间去找项目中的swig文件,因为刚好这次更新也有增加一些博客功能,怀疑是不是修改swig文件时也写错了。(Hexo 的 Template render error 错误hexo 在markdown文档中出现{-% %-}语法会报错,提示“Template render error: (unknown path) )

但很快便发现没有找到异常,所以思考了一下,既然代码文件中的endif没有问题,会不会是其他地方也写了endif,突然想到这次提交也更新了MD文件,记录我这次更新,其中也直接记录了 \{\% endif \%\},所以就修改了相关描述。

重试了一下,问题解决。


参考:

🔗 Hexo+nexT主题搭建个人博客

🔗 nexT主题配置

🔗 nexT官方文档

🔗 自定义配置nexT

🔗 图标库

🔗 Hexo 与 Next 版本升级教程

🔗 Hexo NexT 添加友链页面

🔗 Hexo 搭建个人博客系列:进阶设置篇

🔗 Hexo Next 8.x 主题添加可切换的暗黑模式

🔗 给你的hexo插入音乐视频

🔗 hexo-tag-mmedia文档