扩展功能

友情链接

  • 打开Basn命令
1
hexo new page link
  • 找到C:\[rootblog]\source\link\index.md
1
2
3
4
5
---
title: 友情链接
date: 2020-06-03 17:53:02
type: link
---
  • C:\[rootblog]\source\ 目录下新建_data 文件夹,文件夹内新建 link.yml
1
2
3
4
5
6
7
- class_name: 友情链接
class_desc: 🤝🤝🤝
link_list:
- name: 小李博客
link: https://xiaoliblog.cn/
avatar: https://cdn.jsdelivr.net/gh/lzyblog/image@main/2020/11/19/1f52735f41052a8a163fbef9101b879e.png
descr: 越努力越幸运

Categories Magnet

  • 首页分类磁贴效果如下

Gitcalendar

  • Gitcalendar效果如下

Algolia搜索功能

注册algolia

  • 项目地址:https://github.com/oncletom/hexo-algolia
  • 前往Algolia注册页面,注册一个新账户。可以使用GitHub或者Google账户直接登录,注册后的14天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户总共有10,000条记录,每月有100,000的可以操作数
  • 注册完成后,左侧侧边栏找到【Indices】创建一个新的Index,这个 Index 将在后面使用
  • 左侧侧边栏找到API Keys,进入后点击【All API Keys】,然后【New API Key】

  • 填上index name,然在ACL里面增加删除和新增Object的权限,其他可以默认
  • 然后就有了一个API Key(马赛克部分),保存好

安装algolia

  • 在Hexo根目录下执行
1
npm install hexo-algolia --save
  • 在Hexo根目录的_config.yml中加入algolia的配置,注意改成前面API Keys页面相应配置
    • 这里注意apikey填写刚才你创建的那个有权限的,其余的在your api keys里面可以找到

1
2
3
4
5
6
algolia:
applicationID: 'your applicationID'
apiKey: 'your apiKey'
adminApiKey: 'your adminApiKey'
indexName: 'your indexName'
chunkSize: 5000
  • 上传数据到algolia,下面your apiKey替换为刚才自己创建拥有权限的api
1
2
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia
  • 看到如下信息,证明成功了,可以去algolia网站上查看,索引已经上传成功了
1
2
3
4
5
6
7
8
9
INFO  [hexo-algolia] Testing HEXO_ALGOLIA_INDEXING_KEY permissions.
INFO Start processing
INFO [hexo-algolia] 218 records to index (post, page).
INFO [hexo-algolia] Indexing chunk 1 of 5 (50 records)
INFO [hexo-algolia] Indexing chunk 2 of 5 (50 records)
INFO [hexo-algolia] Indexing chunk 3 of 5 (50 records)
INFO [hexo-algolia] Indexing chunk 4 of 5 (50 records)
INFO [hexo-algolia] Indexing chunk 5 of 5 (18 records)
INFO [hexo-algolia] Indexing done.

开启algolia

  • 进入主题的_config.yml配置文件,配置如下
1
2
3
4
5
6
7
8
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "我们没有找到任何搜索结果: ${query}"
hits_stats: "找到${hits}条结果(用时${time} ms)"

本地搜索

  • 由于Algolia每次增加文章都要重新提交一下如下代码:
1
2
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia
  • 觉得麻烦的话可以换本地搜索

  • 把Algolia的根目录配置文件注释掉,主题配置文件改为false,并卸载掉插件

1
npm uninstall hexo-algolia

searchdb插件

  • 安装本地搜索插件
1
npm install hexo-generator-searchdb --save
  • 在站点根目录的配置文件组添加
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
  • 在主题配置文件_config.yml中启用:
1
2
3
# Local search
local_search:
enable: true #本地搜索
  • 最后记得hexo三连,如果直接hexo g -d的话,搜索关键字不会变红
1
hexo cl & hexo g & hexo d

jsoncontent插件

  • 还有另一个插件hexo-generator-json-content,本插件原理和上个插件差不多,都是生成一个文件用来本地搜索,二选一即可
  • 输入以下命令安装插件
1
npm install hexo-generator-json-content --save
  • 打开博客目录,找到_config.yml文件,添加以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jsonContent:
dateFormat: MM-DD
pages:
title: true
text: true
path: true
date: true
excerpt: true
preview: true
posts:
title: true
text: true
path: true
date: true
excerpt: true
tags: [{
name: tag.name,
slug: tag.slug,
permalink: tag.permalink
}]
preview: true
  • 同样在主题配置文件中打开本地搜索
1
2
3
# 本地搜索
local_search:
enable: true

扩展特效

引入GIuHub徽标

  • 徽标生成网站:https://shields.io/
  • 图标查询网站:https://simpleicons.org/
  • 通过 shields.io 在线生成
    • label: 标签,徽标左侧内容
    • message: 信息,徽标右侧内容
    • color: 色值,支持支持十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。十六进制记得删除前面的 #
  • 输入相关信息后,点击 make badge 即可得到徽标的 URL。可以用 img 标签引用,写法简单。不过正式写法建议用 object 标签引用,写法示例如下
1
2
3
4
5
6
7
<!-- label=Frame,Message=Hexo,color=blue -->
https://img.shields.io/badge/Frame-Hexo-blue
<!-- 在页面上可以使用img标签来引用 -->
<img src="https://img.shields.io/badge/Frame-Hexo-blue">
<!-- 部分属性例如link需要用object标签来引用 -->
<!--/badge/label-message-color?style&logo&link-->
<object data="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=Hexo&link=https://hexo.io"></object>

查看代码测试

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
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #ABBAC3;
margin-bottom: 5px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4D4D4D;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.github-badge .bg-brightgreen {
background-color: #4DC820 !important;
}
.github-badge .bg-orange {
background-color: #FFA500 !important;
}
.github-badge .bg-yellow {
background-color: #D8B024 !important;
}
.github-badge .bg-blueviolet {
background-color: #8833D7 !important;
}
.github-badge .bg-pink {
background-color: #F26BAE !important;
}
.github-badge .bg-red {
background-color: #e05d44 !important;
}
.github-badge .bg-blue {
background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color: #9f9f9f !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="github-badge">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span>
</div>
<div class="github-badge">
<span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">GitHub</span>
</div>
<div class="github-badge">
<span class="badge-subject">DNR</span><span class="badge-value bg-firebrick">Aliyun</span>
</div>
<div class="github-badge">
<span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span>
</div>
<div class="github-badge">
<span class="badge-subject">PictureBed</span><span class="badge-value bg-blueviolet">SM.MS</span>
</div>
<div class="github-badge">
<span class="badge-subject">Theme</span><span class="badge-value bg-blue">Material X</span>
</div>
<div class="github-badge">
<span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span>
</div>

参考Akilar的博文:https://akilar.top/posts/e87ad7f8/

添加2D人物模型

  • 在博客文件夹下右击,Git Bash
1
npm install --save hexo-helper-live2d
1
npm install live2d-widget-model-hijiki(模型名)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在根目录配置文件中添加如下代码:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-hijiki(模型名)
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7

新春灯笼特效

1
2
3
4
inject:
head:
bottom:
- <script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.6/dist/china-lantern.min.js"></script>
  • 也可以通过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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
@media only screen and (max-width: 760px) {
.deng-box,
.deng-box1 {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.right {
float: left !important;
}
}
.deng-box {
position: fixed;
top: 20px;
left: 10px;
z-index: 99;
}
.deng-box1 {
position: fixed;
top: 20px;
right: 10px;
z-index: 99;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(
to right,
#dc8f03,
#ffa500,
#dc8f03,
#ffa500,
#dc8f03
);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(
to right,
#dc8f03,
#ffa500,
#dc8f03,
#ffa500,
#dc8f03
);
}
.deng-t {
font-family: 华文行楷;
font-size: 26px;
color: #dc8f03;
font-weight: bold;
line-height: 44px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg);
}
50% {
-moz-transform: rotate(10deg);
}
100% {
-moz-transform: rotate(-10deg);
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg);
}
50% {
-webkit-transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(-10deg);
}
}
</style>
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">喜迎</div></div>
</div>
<div class="shui shui-a">
<div class="shui-c"></div>
<div class="shui-b"></div>
</div>
</div>
</div>
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">新春</div></div>
</div>
<div class="shui shui-a">
<div class="shui-c"></div>
<div class="shui-b"></div>
</div>
</div>
</div>
</body>
</html>

雪花飘落特效

  • butterlfy主题配置文件相应位置修改
1
2
3
4
5
6
inject:
head:
bottom:
- <div><canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none"></canvas></div>
- <script>const notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));</script>
- <script async type="text/javascript" src="https://cdn.jsdelivr.net/gh/Candinya/Kratos-Rebirth@latest/source/js/snow.min.js"></script>

自定义404页面

  • 无论是GitHub还是Vercel自带的404页面,个人都不是很满意,所以可以自定义404页面
1
$ hexo new page "404"
  • 在Hexo博客source目录下生成一个404文件夹,其中有一个index.md文件,这个文件其实就相当于是404.html
  • 打开index.md,修改头部信息。注意不要忘了修改permalink,不然不会在根目录下生成404.html
1
2
3
4
layout: false
comments: false
title: 404
permalink: /404
  • 由于markdown是支持插入html内容的,因此只需要在这个md文件里写入html代码即可。要注意的是html代码之间千万不能有空行,不然会标签识别错误!
  • 自定义404页面可以去404模板查找,js和css可以放到刚才生成的404目录下
  • 然后hexo ghexo d部署即可

自定义独立页面

  • Hexo 是一个轻量、快速,简单和强大的博客框架,当我们需要发布博文的时候,只需要将写好的文章(MarkDown文件)放入本地的 \source\_posts 文件夹,然后再推送上去就行了,原理就是当我们在执行 hexo g 命令时,.md 文件就会被转化成 HTML 文件,但是有时候我们需要新建一个独立的页面,这个页面不使用主题的渲染,具有自己独立的样式,有两种方法实现

skip_render

  • 使用 Hexo 提供的跳过渲染配置,在博客根目录的配置文件 _config.yml 里找到 skip_render 关键字,在后面添加想要跳过渲染的页面
  • 比如我们创建 \source\about\index.html, 配置文件填写:skip_render: about\*\*,那么就表示 \source\about 里所有的文件将跳过渲染,里面的文件将会被直接复制到 public 文件夹,此时就会得到一个独立的 about 页面;官方文档:https://hexo.io/docs/configuration

layout: false

  • 还可以通过在文章头部的Front-matter里添加配置 layout: false 来跳过渲染配置
  • 比如我们要使 about 页面跳过渲染,创建 \source\about\index.md,将这个页面的相关 HTML 代码写进.md文件并保存,然后在 index.md 的头部写入:
1
2
3
4
5
6
7
8
9
---
layout: false
---

{% raw %}
xxxxxxxxxxxxx
xx HTML代码 xx
xxxxxxxxxxxxx
{% endraw %}
  • Front-matter 是 .md 文件最上方以 — 分隔的区域,用于指定个别文件的变量,官方文档:https://hexo.io/docs/front-matter

  • .md文件中的 HTML 代码要用 ` 和 ` 包起来,使其能正确编译里面的代码

Hexo访问URL全英文

  • 在使用Hexo框架生成静态博客时,其实是将你写好的.md文件输出成HTML文件进行渲染,其中HTML的文件名称就是.md的文件名称
  • 例如:Java学习笔记.md经过hexo g命令会生成Java学习笔记.html;执行hexo d命令会将文件推送到你的仓库,那么你访问这篇章时,对应的地址栏就是http://xxxx/.../Java学习笔记.html ,这样看起来很别扭,对搜索引擎也不友好
  • 于是有两种解决方法
    • 一种是增加文章ID,可以自动生成一串字符,但不会现实HTML后缀
    • 另一种是修改文件生成规则,需要为每一篇文章定义一个唯一的名称

增加文章ID

1
2
#permalink: :year/:month/:day/:title # 这是原配置
permalink: :year/:id/ # 替换为此新配置
  • 可以自定义名称,在.\scaffolds\post.md中修改为:
1
2
3
4
5
6
7
8
9
---
title: {{ title }}
id:
date: {{ date }}
updated: {{ date }}
categories:
tags:
permalink:
---
  • 在我们的具体文章中,你可以使用任意数字和字母作为此文章的id,但最好有规律的命名,不用包含特殊字符,推荐使用创建日期中的月+日+时+分+秒来定义一个id
1
2
3
4
---
title: {{ title }}
permalink: 02062017
---

改文件生成规则

  • 在博客根目录的配置文件_congif.yml中修改permalink变量
1
2
#permalink: :year/:month/:day/:title # 这是原配置
permalink: page/:fileName.html # 替换为此新配置
  • page是目录,执行hexo g会在public下生成,我让生成的HTML文件都放在page下,:fileName.html是HTML的命名格式,其中fileName是个变量,变量值来自于.md文件的设置,每篇文章只要头部加了这个属性,并赋值且确保唯一就OK了
1
2
3
4
5
6
7
---
title: 计算机网络🌈数据链路层
subtitle:
sticky:
fileName: h3s09b
tags: 计算机网络
categories:
  • 为了避免忘记在写文章时写fileName属性,我们可以修改模板,在scaffolds目录下有三个模板,修改其中的post.md
1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
tags:
categories:
fileName: 千万别忘写,必须要唯一!
---
  • 命名规范可以自己定义,比如今天是五月m,日期29,周三w,时间是17点,文件名就可以就是m29w17