以前我每次部署博客时都需要先在命令行切换到博客根目录，然后依次执行 hexo cl、hexo g、hexo d 才能实现清除缓存、生成静态文件、部署博客的操作，后来了解到还可以使用一键三连：

1

hexo cl && hexo g && hexo d

Hexo 指令三件套虽然可以直接完成整套操作，但每次更新还得手动输入，如果更新频繁的话未免还是会觉得有些麻烦，再后来又了解到可以通过编写脚本来简化操作。

1
2

@echo off
hexo cl && hexo g && hexo d

一键自动部署

通过 Github Action 不但可以实现自动部署，另外还可以起到备份博客的作用。

自动部署

具体的操作流程可以看下这篇文章，人家已经讲的很清楚了，我就不过多赘述了。

另外，我们同样可以通过上面一键部署的方式来进行一键 push 的操作：

1
2
3
4

@echo off
git add .
git commit -m 'auto deploy blog'
git push origin master

备份博客

如果你的电脑坏了或者电脑上的博客文件不小心被删掉了，那么你可以通过下面任意一种方式提前备份好你的博客，以后就可以直接在你的新电脑上恢复你的博客啦~

1

hexo cl && hexo g && hexo d && hexo b

Hexo 博客管理器

不知道大家有没有这样的困扰，每次在 VSCode 写文章的时候，尽管你的 Markdown 语法已经运用的炉火纯青了，但还是觉得怪怪的，总感觉自己并不像是在写文章，而是在写某个程序……

hexo-admin

这是一款 Hexo 管理员插件，它的优点是配置简单，操作方便，你只需要一条安装命令即可使用它：

1

npm install --save hexo-admin

安装完成后，在浏览器地址栏输入 http://localhost:4000/admin/，即可打开如下界面：

可以看到它的 UI 界面非常简约，我们试着点击一篇文章的编辑按钮：

然后随便改点什么，可以发现本地的内容也一同被更改了，所以不难看出这只是一个简单的本地编辑器。

Qexo

相比于 hexo-admin，Qexo 不但界面美观，而且还支持在线编辑博客文章，详细配置请查看 Qexo 文档。

最近有些朋友加我微信咨询一些关于 Hexo 博客搭建的问题，特此写下了这篇文章，希望能够帮助到大家。

以后再有人问我，我就直接让他看这个。

搭建环境

安装 Git

• Git 官网下载
• Windows 版下载镜像

安装完成后，在 CMD 窗口中输入以下命令：

1

git -v

若显示版本号则表示安装成功。

安装 Node.js

• Node.js 官网下载
• Node.js 中文网下载

安装完成后，在 CMD 窗口中输入以下命令：

1

node -v

1

npm -v

若都可以显示版本号则表示安装成功。

快速上手

安装 Hexo

接着在 CMD 窗口中输入以下命令：

1

npm install hexo-cli -g

如果执行 hexo -v 后，打印出的信息中第一行能显示 hexo-cli: x.x.x，则表示 Hexo 安装成功。

进入博客目录

新建好博客想要存放的目录，比如我是放在了 D 盘的 Blog 文件夹里，那么你就需要右键该目录，然后选择 Open Git Bash here，打开 Git Bash 终端面板（以下简称终端）。

当然，你也可以在桌面直接右键选择 Open Git Bash here，然后使用 Liunx 命令创建并进入 Blog 目录：

1

cd D: && mkdir Blog && cd Blog

初始化 Hexo

1

hexo init

在终端执行上面的命令后，不出意外的话，你就能在下面最后一行信息中看到 Start blogging with Hexo! 了，并且你的博客目录中已经生成了很多东西，那么恭喜你已经可以在本地开启你的 Hexo 博客啦！

1
2
3
4
5
6
7
8
9

├── .github                # 可以利用 GitHub Actions 自动部署博客
├── node_modules           # Node.js 项目的模块，包括通过 npm 下载的 Hexo 插件和主题等
├── scaffolds              # 创建草稿、页面、文章时的模板
├── source                 # 全局资源文件夹，用来存放博客的源文件，例如：文章、草稿、页面、图片、CNAME 等都应该放在这里
├── themes                 # 主题
├── _config.landscape.yml  # 主题配置文件
├── _config.yml            # 博客全局配置文件
├── package.json           # Node.js 项目的清单，可以通过 npm install 来恢复 Node.js 项目的模块
└── package-lock.json      # 用于跟踪 Node.js 项目模块的确切版本和依赖关系树

启动服务器

1

hexo s

输入上面的命令后，可以看到 Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. 这条信息，Hexo 默认为我们开启了一个本地服务器地址 http://localhost:4000，按 Ctrl + C 停止开启。

进来后你会看到上面的页面，这是 Hexo 默认使用的 landscape 主题，接下来我们需要为它更换一个更加美观且强大的主题。

更换主题

Theme 推荐

这里只推荐几款我用过，并且觉得还不错的主题：

• 【Fluid】：主题预览 | 主题源码 | 主题文档
• 【Butterfly】：主题预览 | 主题源码 | 主题文档
• 【Anzhiyu】：主题预览 | 主题源码 | 主题文档
• 【Aurora】：主题预览 | 主题源码 | 主题文档
• 【Icarus】：主题预览 | 主题源码 | 主题文档
• 【Volantis】：主题预览 | 主题源码 | 主题文档

建议在选好心仪的主题后大致浏览下他们的主题文档，后期可以减少许多不必要的麻烦和问题。

Theme 安装

这里以 Fluid 主题为例，这个也是我目前正在使用的主题，很喜欢这种 Material Design 风格，感觉非常的低调沉稳大气。

1

npm install --save hexo-theme-fluid

1

cp node_modules/hexo-theme-fluid/_config.yml  _config.fluid.yml

1

git clone https://github.com/fluid-dev/hexo-theme-fluid.git  themes/fluid

1

git clone git@github.com:fluid-dev/hexo-theme-fluid.git  themes/fluid

1
2

git config --global user.name "xxxxx"
git config --global user.email "xxxxx@xxxxx.com"

1
2

git config user.name
git config user.email

1

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

1

cat ~/.ssh/id_rsa.pub

不管你用了以上哪种方式，最后都别忘了修改 Hexo 博客目录中 _config.yml 的指定主题：

1
2
3

# theme: landscape
# 更换为：
theme: fluid

改好后，重新 hexo s 一下就能看到效果啦~

Theme 双开

如果你想同时开两个博客主题的话，正常情况下执行 hexo s 时会报 EADDRINUSE 错误，这是由于两个主题默认都会使用 localhost:4000 的端口，所以后开的那个博客主题就会失败，你需要使用 -p 选项来将其更换为另一个端口打开，从而避免冲突。

例如：

1

hexo s -p 5000

值得注意的是，如果你同时开两个博客主题的话，那么你的第二个博客主题每次都需要使用上面的命令才能正常开启。

常用 Hexo 命令

创建新文章

1

hexo new post "posts name"

创建新页面

1

hexo new page "page name"

创建新草稿

1

hexo new draft "posts name"

将草稿转为正式文章

1

hexo publish "posts name"

清除缓存

1

hexo cl

生成静态文件

1

hexo g

本地调试

1

hexo s

部署博客

1

hexo d

首次执行 hexo d 部署命令时需要先安装并配制好 hexo-deployer-git 插件，详见 Hexo 官方文档。

常用 Hexo 插件

1

npm i -S 插件名称

1

npm uni 插件名称

1

npm list 插件名称

鸣谢

这是我这个小博客目前收到最大的一笔打赏了，记录一下，真的很感谢🙏🌹🌹🌹

今天逛良（凉）心云想看下域名什么时候到期，发现里面有张域名证书感觉挺不错的，于是突发奇想花了半天时间搞了个网页版的域名证书。

演示

这里简单放几张图展示一下：

结语

我已将项目源码开源，感兴趣的朋友欢迎 Star。

项目地址：dotnetcore/FastGithub: github 加速神器，解决 github 打不开、用户头像无法加载、releases 无法上传下载、git-clone、git-pull、git-push 失败等问题

如果上面的地址打不开，这里还准备了备用的 FastGithub 下载地址。选择你需要下载的安装包然后进行解压，建议选择 最新版 的，我选择的是 fastgithub_win-x64.zip，解压后双击打开 FastGithub.UI.exe，不出意外的话你的 GitHub 就能正常访问了。

FastGithub 已经寄了，我现在更推荐使用 docmirror/dev-sidecar 来平替，可惜 Gitee 上的同步项目已经被封禁了，目前只能在 Github Release 上下载了。

可笑的是，如果你连 GitHub 都进不去的话，那就更别提在上面下载辅助工具了，唉听我的，实在不行咱就整个梯子吧，我也没有其他更好的办法了，恕我爱莫能助。

原始代码

1
2
3

<div class="father">
  <div class="son"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

body {
  background-color: #6ed0ff;
}

.father {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border-radius: 20px;
  background-color: #be33ec;
  box-shadow: 0 0 15px rgb(0, 0, 0);
}

.son {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background-color: #fcff00;
  box-shadow: 0 0 10px rgb(0, 0, 0);
}

实现方法

flex

1
2
3
4
5

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

1
2
3
4
5
6
7

.father {
  display: flex;
}

.son {
  margin: auto;
}

grid

1
2
3
4

.father {
  display: grid;
  place-items: center;
}

1
2
3
4
5
6
7
8

.father {
  display: grid;
}

.son {
  align-self: center;
  justify-self: center;
}

absolute + margin

1
2
3
4
5
6
7
8
9
10
11

.father {
  position: relative;
}

.son {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

1
2
3
4
5
6
7
8
9
10
11
12

.father {
  position: relative;
}

.son {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

absolute + transform

1
2
3
4
5
6
7
8
9
10

.father {
  position: relative;
}

.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

margin + transform

1
2
3
4
5
6
7
8

.father {
  overflow: hidden;
}

.son {
  margin: 50% auto;
  transform: translateY(-50%);
}

inline-block + vertical-align

1
2
3
4
5
6
7
8
9

.father {
  text-align: center;
  line-height: 300px;
}

.son {
  display: inline-block;
  vertical-align: middle;
}

原始代码

1
2
3
4
5

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

body {
  min-width: 630px;
  margin: 0;
}

.left,
.center,
.right {
  height: 150px;
}

.left {
  width: 100px;
  background-color: #ffb5bf;
}

.center {
  background-color: #94e8ff;
}

.right {
  width: 200px;
  background-color: #8990d5;
}

实现方法

flex 布局

1
2
3
4
5
6
7

.container {
  display: flex;
}

.center {
  flex: 1;
}

grid 布局

1
2
3
4

.container {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
}

table 布局

1
2
3
4
5
6
7
8
9
10

.container {
  width: 100%;
  display: table;
}

.left,
.center,
.right {
  display: table-cell;
}

定位布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.container {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
}

.center {
  position: absolute;
  left: 100px;
  right: 200px;
}

.right {
  position: absolute;
  right: 0;
}

浮动布局

1
2
3
4
5

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">center</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.container {
  overflow: hidden;
}

.left {
  float: left;
}

.right {
  float: right;
}

圣杯布局

1
2
3
4
5

<div class="container">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

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

.container {
  overflow: hidden;
  padding-left: 100px;
  padding-right: 200px;
}

.center,
.left,
.right {
  float: left;
}

.center {
  width: 100%;
}

.left {
  position: relative;
  left: -100px;
  margin-left: -100%;
}

.right {
  position: relative;
  right: -200px;
  margin-left: -200px;
}

双飞翼布局

1
2
3
4
5
6
7

<div class="container">
  <div class="center-container">
    <div class="center">center</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

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

.container {
  overflow: hidden;
}

.center-container,
.left,
.right {
  float: left;
}

.center-container {
  width: 100%;
}

.center-container .center {
  margin-left: 100px;
  margin-right: 200px;
}

.left {
  margin-left: -100%;
}

.right {
  margin-left: -200px;
}

原始代码

1
2
3
4

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

body {
  min-width: 630px;
  margin: 0;
}

.left,
.right {
  height: 100px;
}

.left {
  width: 100px;
  background-color: #ffb5bf;
}

.right {
  background-color: #94e8ff;
}

实现方法

使用 flex

1
2
3
4
5
6
7

.container {
  display: flex;
}

.right {
  flex: 1;
}

使用 grid

1
2
3
4

.container {
  display: grid;
  grid-template-columns: 100px auto;
}

使用 table

1
2
3
4
5
6
7
8
9

.container {
  display: table;
  width: 100%;
}

.left,
.right {
  display: table-cell;
}

使用 absolute

1
2
3
4
5
6
7
8
9
10
11

.container {
  position: relative;
}

.left {
  position: absolute;
}

.right {
  margin-left: 100px;
}

使用 float

1
2
3
4
5
6
7
8
9
10
11

.container {
  overflow: hidden;
}

.left {
  float: left;
}

.right {
  margin-left: 100px;
}

1
2
3
4
5
6
7
8
9
10
11
12

.container {
  overflow: hidden;
}

.left,
.right {
  float: left;
}

.right {
  width: calc(100% - 100px);
}

1
2
3
4
5
6
7
8
9
10
11

.container {
  overflow: hidden;
}

.left {
  float: left;
}

.right {
  overflow: auto;
}

原始代码

1
2
3
4
5
6

<div class="box1">
  盒子一
  <div class="subBox1">子盒子一</div>
  <div class="subBox2">子盒子二</div>
</div>
<div class="box2">盒子二</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.box1,
.box2 {
  width: 600px;
}
.box1 {
  background-color: purple;
}
.subBox1,
.subBox2 {
  float: left;
  width: 200px;
  height: 200px;
}
.subBox1 {
  background-color: pink;
}
.subBox2 {
  background-color: aqua;
}
.box2 {
  height: 200px;
  background-color: skyblue;
}

实现方法

空 div 清除

在浮动元素末尾（也就是子盒子二的后面）添加一个空的 div 标签，例如：

1

<div style="clear:both"></div>

缺点：会添加许多无意义的标签，结构语义化较差。

父级使用 after 伪元素

这与上面的空 div 清除的方法是等效的，结构语义化较好。

1
2
3
4
5

.box1::after {
  content: "";
  clear: both;
  display: block;
}

父级添加 overflow 属性

可以给浮动元素的父级（也就是 .box1）添加 overflow 属性设置为除 visible 外的其他值来触发 BFC。

1
2
3
4
5

.box1 {
  overflow: hidden;
  /* overflow: auto; */
  /* overflow: scroll; */
}

缺点：可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

父级添加 display: flow-root

这是一个较为现代的方案，它可以无需 clearfix 小技巧^[1]来创建 BFC，在使用上没有副作用。

1
2
3

.box1 {
  display: flow-root;
}

唯一的缺点可能就是兼容性问题，因为它并不像前面的几种解决方案，均可以在所有浏览器中奏效。

标题

1

### 标题内容

为了不影响目录层级，这里就不展示了。

段落

1
2
3

这是一个普通段落

这是另一个普通段落

这是一个普通段落

这是另一个普通段落

1
2

　这是一个开头空两格的段落
 这是一个开头空两格的段落

　这是一个开头空两格的段落
 这是一个开头空两格的段落

加粗

1
2

把文本 **加粗** 一下
把文本 __加粗__ 一下

把文本 加粗 一下
把文本 加粗 一下

1
2

把文本**加粗**一下
把文本__加粗__一下

把文本加粗一下
把文本__加粗__一下

斜体

1
2

这两个字是 *斜体* 着的
这两个字是 _斜体_ 着的

这两个字是 斜体 着的
这两个字是 斜体 着的

加粗并斜体

1
2

同时 ***加粗并斜体*** 的示例
同时 ___加粗并斜体___ 的示例

同时 加粗并斜体 的示例
同时 加粗并斜体 的示例

分割线

1
2
3

***
---
___

删除线

1
2

我~经常~在我的博客上写文章
我~~经常~~在我的博客上写文章

我经常在我的博客上写文章
我经常在我的博客上写文章

链接

普通链接

1

推荐阅读：[Markdown 教程](https://www.runoob.com/markdown/md-tutorial.html)

推荐阅读：Markdown 教程

带有提示的链接

1

推荐阅读：[Markdown 教程](https://www.runoob.com/markdown/md-tutorial.html "菜鸟教程")

推荐阅读：Markdown 教程

带格式化的链接

1
2

推荐阅读：[**Markdown 教程**](https://www.runoob.com/markdown/md-tutorial.html)
推荐阅读：[`Markdown 教程`](https://www.runoob.com/markdown/md-tutorial.html)

推荐阅读：Markdown 教程
推荐阅读：Markdown 教程

自动链接

1
2

<https://www.baidu.com>
<appsupport@baidu.com>

https://www.baidu.com
appsupport@baidu.com

禁用自动链接

1
2

https://www.baidu.com
`https://www.baidu.com`

https://www.baidu.com
https://www.baidu.com

图片

1

![Logo](https://pic.imgdb.cn/item/6279e4a9094754312967c8b0.png)

链接图片

1

[![Logo](https://pic.imgdb.cn/item/6279e4a9094754312967c8b0.png)](https://xukaiyyds.cn)

扩展语法

列表

有序列表

1
2
3
4

1. 列表项一
1. 列表项二
1) 列表项一
1) 列表项二

1. 列表项一
2. 列表项二

1. 列表项一
2. 列表项二

无序列表

1
2
3

- 列表项
* 列表项
+ 列表项

• 列表项

• 列表项

• 列表项

任务列表

1
2

- [x] 待办事项一
- [ ] 待办事项二

• 待办事项一
• 待办事项二

代码块

1
2
3
4
5
6

```html
<html>
  <head>
  </head>
</html>
```

1
2
3
4
5
6

```json
{
  "firstName": "kai",
  "lastName": "xu",
}
```

1
2
3
4
5
6
7
8

````html
```html
<html>
  <head>
  </head>
</html>
```
````

表格

表格排版

1
2
3
4

| 姓名 | 性别 |
| ---  | --- |
| 张三 | 男 |
| 李四 | 女 |

表格对齐

1
2
3
4

| 左对齐 | 居中对齐 | 右对齐 |
| :--- | :---: | ---: |
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |

块引用

块引用的使用

1
2
3

> 原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
> 背弃了理想 ，谁人都可以
> 哪会怕有一天只你共我

原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
背弃了理想 ，谁人都可以
哪会怕有一天只你共我

块引用分段

1
2
3
4

> 原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
> 背弃了理想 ，谁人都可以
>
> 哪会怕有一天只你共我

原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
背弃了理想 ，谁人都可以

哪会怕有一天只你共我

块引用嵌套

1
2
3
4

> 原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
> 背弃了理想 ，谁人都可以
>
>> 哪会怕有一天只你共我

原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
背弃了理想 ，谁人都可以

哪会怕有一天只你共我

块引用包含其它元素

1
2
3
4

> 1. 列表是块级元素
> 1. 列表是块级元素
>
> **加粗**和*斜体*是行级元素

1. 列表是块级元素
2. 列表是块级元素

加粗和斜体是行级元素

脚注

1
2
3
4

本文参考了 [Markdown 官方教程](https://markdown.com.cn/) 的基本语法[^1] 和扩展语法[^2]。

[^1]: [Markdown 基本语法](https://markdown.com.cn/basic-syntax/)
[^2]: [Markdown 扩展语法](https://markdown.com.cn/extended-syntax/)

本文参考了 Markdown 官方教程 的基本语法^[1] 和扩展语法^[2]。

转义字符

1

\\（反斜杠）\`（反引号）\*（星号）\_（下划线）\{}（花括号）\[]（方括号）\()（圆括号）

\（反斜杠）`（反引号）*（星号）_（下划线）{}（花括号）[]（方括号）()（圆括号）

嵌入 HTML

1

**Markdown** 和 <em>HTML</em> 混合排版

Markdown 和 HTML 混合排版

1

<p>**粗体**不会生效</p>

**粗体**不会生效

文本颜色

1
2
3
4
5
6

<span class="text-primary">primary</span>
<span class="text-secondary">secondary</span>
<span class="text-success">success</span>
<span class="text-danger">danger</span>
<span class="text-warning">warning</span>
<span class="text-info">info</span>

行内标签

1
2
3
4
5
6

{% label primary @primary %}
{% label default @default %}
{% label info @info %}
{% label success @success %}
{% label warning @warning %}
{% label danger @danger %}

1
2
3
4
5
6

<span class="label label-primary">primary</span>
<span class="label label-default">default</span>
<span class="label label-info">info</span>
<span class="label label-success">success</span>
<span class="label label-warning">warning</span>
<span class="label label-danger">danger</span>

便签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{% note primary %}
primary
{% endnote %}
{% note secondary %}
secondary
{% endnote %}
{% note success %}
success
{% endnote %}
{% note danger %}
danger
{% endnote %}
{% note warning %}
warning
{% endnote %}
{% note info %}
info
{% endnote %}
{% note light %}
light
{% endnote %}

1
2
3
4
5
6
7

<p class="note note-primary">primary</p>
<p class="note note-secondary">secondary</p>
<p class="note note-success">success</p>
<p class="note note-danger">danger</p>
<p class="note note-warning">warning</p>
<p class="note note-info">info</p>
<p class="note note-light">light</p>

按钮

1

{% btn https://xukaiyyds.cn, 个人主页, XKの主页 %}

1

<a class="btn" href="https://xukaiyyds.cn" title="XKの主页">个人主页</a>

组图

• 演示
• 使用

1 2 3 4 5 6 7

{% gi 5 3-2 %}      {% endgi %}

折叠块

演示

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{% fold primary @点击查看 %}
primary
{% endfold %}
{% fold default @点击查看 %}
default
{% endfold %}
{% fold info @点击查看 %}
info
{% endfold %}
{% fold success @点击查看 %}
success
{% endfold %}
{% fold warning @点击查看 %}
warning
{% endfold %}
{% fold danger @点击查看 %}
danger
{% endfold %}

勾选框

演示

使用

1
2
3
4

{% cb 项目1, true, true %}
{% cb 项目2, false, true %}
{% cb 工程1, true, false %}
{% cb 工程2, false, false %}

Volantis 组件

这里就需要使用 Hexo 注入器了，以折叠框与时间线为例，编写注入代码：

需要在博客的根目录下创建 scripts 文件夹，然后在里面创建一个任意命名的 js 文件。

例如，创建一个 tag.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
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

hexo.extend.injector.register(
  "body_end",
  function () {
    /* 折叠框 */
    ("use strict");
    function postFolding(args, content) {
      if (/::/g.test(args)) {
        args = args.join(" ").split("::");
      } else {
        args = args.join(" ").split(",");
      }
      let style = "";
      let title = "";
      if (args.length > 1) {
        style = args[0].trim();
        title = args[1].trim();
      } else if (args.length > 0) {
        title = args[0].trim();
      }
      if (style != undefined) {
        return `<details ${style}><summary> ${title} </summary>
              <div class='content'>
              ${hexo.render
                .renderSync({ text: content, engine: "markdown" })
                .split("\n")
                .join("")}
              </div>
            </details>`;
      }
      return `<details><summary> ${title} </summary>
              <div class='content'>
              ${hexo.render
                .renderSync({ text: content, engine: "markdown" })
                .split("\n")
                .join("")}
              </div>
            </details>`;
    }
    hexo.extend.tag.register("folding", postFolding, {
      ends: true,
    });

    /* 时间线 */
    ("use strict");
    function postTimeline(args, content) {
      if (args.length > 0) {
        return `<div class="timeline"><p class='p h2'>${args}</p>${content}</div>`;
      }
      return `<div class="timeline">${content}</div>`;
    }
    function postTimenode(args, content) {
      if (/::/g.test(args)) {
        args = args.join(" ").split("::");
      } else {
        args = args.join(" ").split(",");
      }
      var time = args[0];
      return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync(
        { text: time, engine: "markdown" }
      )}</p></div><div class="body">${hexo.render
        .renderSync({ text: content, engine: "markdown" })
        .split("\n")
        .join("")}</div></div>`;
    }
    hexo.extend.tag.register("timeline", postTimeline, {
      ends: true,
    });
    hexo.extend.tag.register("timenode", postTimenode, {
      ends: true,
    });
  },
  "default"
);

然后再引入相关的 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

details {
  display: block;
  margin: 0.5rem 0;
  padding: 16px;
  border: 0;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.28s ease;
}

details summary {
  position: relative;
  margin: -16px;
  padding: 16px;
  color: #555;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: normal;
  border-radius: 4px;
}

details summary > p,
details summary > h1,
details summary > h2,
details summary > h3,
details summary > h4,
details summary > h5,
details summary > h6 {
  display: inline;
}

details summary:hover {
  color: #30a9de;
}

details summary:hover:after {
  position: absolute;
  top: 50%;
  right: 16px;
  content: "+";
  text-align: center;
  transform: translateY(-50%);
}

details > summary {
  background-color: #f6f6f6;
}

details[blue] {
  border-color: #e8f4fd;
}

details[blue] > summary {
  background-color: #e8f4fd;
}

details[cyan] {
  border-color: #e8fafe;
}

details[cyan] > summary {
  background-color: #e8fafe;
}

details[green] {
  border-color: #ebf9ed;
}

details[green] > summary {
  background-color: #ebf9ed;
}

details[yellow] {
  border-color: #fff8e9;
}

details[yellow] > summary {
  background-color: #fff8e9;
}

details[red] {
  border-color: #feefee;
}

details[red] > summary {
  background-color: #feefee;
}

details[open] {
  border-color: rgba(85, 85, 85, 0.2);
}

details[open] > summary {
  border-bottom: 1px solid rgba(85, 85, 85, 0.2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details[open][blue] {
  border-color: rgba(33, 150, 243, 0.3);
}

details[open][blue] > summary {
  border-bottom-color: rgba(33, 150, 243, 0.3);
}

details[open][cyan] {
  border-color: rgba(27, 205, 252, 0.3);
}

details[open][cyan] > summary {
  border-bottom-color: rgba(27, 205, 252, 0.3);
}

details[open][green] {
  border-color: rgba(61, 197, 80, 0.3);
}

details[open][green] > summary {
  border-bottom-color: rgba(61, 197, 80, 0.3);
}

details[open][yellow] {
  border-color: rgba(255, 189, 43, 0.3);
}

details[open][yellow] > summary {
  border-bottom-color: rgba(255, 189, 43, 0.3);
}

details[open][red] {
  border-color: rgba(254, 95, 88, 0.3);
}

details[open][red] > summary {
  border-bottom-color: rgba(254, 95, 88, 0.3);
}

details[open] > summary {
  color: #555;
  margin-bottom: 0;
}

details[open] > summary:hover:after {
  content: "-";
}

details[open] > div.content {
  margin: -16px;
  margin-top: 0;
  padding: 16px;
  border: 1px solid lightgray;
  border-top-color: transparent;
  border-radius: 0 0 2px 2px;
  cursor: auto;
}

details[open] > div.content p > a:hover {
  text-decoration: underline;
}

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

div.timenode {
  position: relative;
}

div.timenode:before,
div.timenode:after {
  position: absolute;
  left: 7px;
  z-index: 1;
  content: "";
  width: 2px;
  background-color: rgba(68, 215, 182, 0.5);
}

div.timenode:before {
  top: 0;
  height: 6px;
}

div.timenode:after {
  top: 26px;
  height: calc(100% - 26px);
}

div.timenode:last-child:after {
  height: calc(100% - 26px - 16px);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

div.timenode .meta,
div.timenode .body {
  max-width: calc(100% - 24px);
}

div.timenode .meta {
  position: relative;
  font-size: 0.75rem;
  line-height: 32px;
  height: 32px;
}

div.timenode .meta:before,
div.timenode .meta:after {
  position: absolute;
  top: 8px;
  z-index: 2;
  content: "";
}

div.timenode .meta:before {
  width: 16px;
  height: 16px;
  background-color: rgba(68, 215, 182, 0.5);
  border-radius: 8px;
}

div.timenode .meta:after {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  margin-top: 2px;
  background-color: #44d7b6;
  border-radius: 6px;
  transform: scale(0.5);
}

div.timenode .meta p {
  margin: 0 0 0 24px;
  font-weight: bold;
}

div.timenode .body {
  display: inline-block;
  margin: 4px 0 20px 24px;
  padding: 0 12px;
  border: 1px solid lightgray;
  border-radius: 6px;
  transition: all 0.3s;
}

div.timenode .body p:first-child {
  margin-top: 0;
}

div.timenode .body p:last-child {
  margin-bottom: 0;
}

div.timenode .body .highlight {
  background-color: #fff7ea;
  filter: grayscale(0%);
}

div.timenode .body .highlight figcaption {
  background-color: #ffeed2;
}

div.timenode .body .highlight .gutter {
  background-color: #ffedd0;
}

div.timenode:hover .meta {
  color: #ff6666;
}

div.timenode:hover .meta:before {
  background-color: rgba(255, 87, 34, 0.5);
}

div.timenode:hover .meta:after {
  background-color: #ff5722;
}

折叠框

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

{% folding blue open::默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding cyan::默认关闭的折叠框 %}

这是一个默认关闭的折叠框。

{% endfolding %}

{% folding red::查看列表测试 %}

- 你好
- hello

{% endfolding %}

{% folding green::查看列表测试 %}

- 你好
- hello

{% endfolding %}

{% folding yellow::查看列表测试 %}

- 你好
- hello

{% endfolding %}

时间线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{% timeline 标题 %}

{% timenode 2022-10-16 %}

内容

{% endtimenode %}

{% timenode 2021-10-16 %}

内容

{% endtimenode %}

{% endtimeline %}

Tab 切换

我目前用的是插件版的，这个组件 Volantis 其实也有，但我懒得做适配了，所以就直接用了现成的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{% tabs First unique name %}

<!-- tab First unique name 1 @ri:home-4-line -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab Icon Test @ri:cloud-line -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}