本文最后更新于：2024年5月7日 下午
在写博客时，可能会遇到需要读者选读的内容，此时出现了折叠博客内容的需求。本文介绍在Hexo中自定义折叠部分内容的方法。
需求描述
- 可折叠部分内容，暴露标题，在读者需要查看标题下内容时点击展开
- 支持尽可能多的markdown语法
- 方便快速
方法一： HTML语法 - 使用 details 元素
使用方法
使用 <details> </details> 标签包裹需要隐藏的内容
在其中使用<summary> </summary>标签包裹需要隐藏内容的标题
隐藏内容的标题
隐藏文字隐藏文字隐藏文字。
支持 markdown 语法
支持标题
支持简单文本编辑
支持列表
支持图片
- md插入图片语法：
- html插入图片语法：
支持代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
| #include <initializer_list>
#include <iostream>
struct A {
A() { std::cout << "1"; }
A(int) { std::cout << "2"; }
A(std::initializer_list<int>) { std::cout << "3"; }
};
int main(int argc, char *argv[]) {
A a1;
A a2{};
A a3{ 1 };
A a4{ 1, 2 };
}
|
支持表格
支持公式
- 行内公式$Y=aX^2+bX+c$
$$
Y=aX^2+bX+c
$$
示例代码
上述示例代码如下(由于markdown解码问题，示例cpp代码段前后的 ``` 请自行补全)：
示例代码
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
| <details>
<summary>隐藏内容的标题</summary>
隐藏文字隐藏文字隐藏文字。
支持 `markdown` 语法
##### 支持标题
##### 支持简单文本编辑
- 支持 **粗体**、*斜体*
##### 支持列表
- 列表1
- 列表2
##### 支持图片
- md插入图片语法：
- html插入图片语法：
<div style='margin:0 auto'>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
##### 支持代码块
- 行内代码 `markdown`
cpp
#include <initializer_list>
#include <iostream>
struct A {
A() { std::cout << "1"; }
A(int) { std::cout << "2"; }
A(std::initializer_list<int>) { std::cout << "3"; }
};
int main(int argc, char *argv[]) {
A a1;
A a2{};
A a3{ 1 };
A a4{ 1, 2 };
}
##### 支持表格
| 文字 | 文字 |
| ---- | ---- |
| 文字 | 文字 |
##### 支持公式
- 行内公式$Y=aX^2+bX+c$
$$
Y=aX^2+bX+c
$$
</details>
|
方法二： 使用hexo-sliding-spoiler插件
官网链接
hexo-sliding-spoiler
插件安装
1
| npm install hexo-sliding-spoiler
|
自定义设置
例如：可以自定义修改默认的 show hide 关键字
- 打开文件
hexo\node_modules\hexo-sliding-spoiler\assets\spoiler.css，找到25-31行，修改其中的 content。
- 例如： 将
Show 改为 ▶ ，Hide改为▼
1
2
3
4
5
6
7
| .spoiler.collapsed .spoiler-title:before {
content: "Show: ";
}
.spoiler.expanded .spoiler-title:before {
content: "Hide: ";
}
|
使用方法
安装好插件后，使用 {% spoiler "隐藏内容的标题" %} 和 {% endspoiler %}包裹需要隐藏的内容即可。
隐藏内容的标题
隐藏文字隐藏文字隐藏文字。
支持 markdown 语法
支持标题
支持简单文本编辑
支持列表
支持图片
- md插入图片语法：
- html插入图片语法：
支持代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
| #include <initializer_list>
#include <iostream>
struct A {
A() { std::cout << "1"; }
A(int) { std::cout << "2"; }
A(std::initializer_list<int>) { std::cout << "3"; }
};
int main(int argc, char *argv[]) {
A a1;
A a2{};
A a3{ 1 };
A a4{ 1, 2 };
}
|
支持表格
支持公式
- 行内公式$Y=aX^2+bX+c$
$$
Y=aX^2+bX+c
$$
示例代码
上述示例代码如下(由于markdown解码问题，示例cpp代码段前后的 ``` 请自行补全)：
示例代码
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
| {% spoiler "隐藏内容的标题" %}
隐藏文字隐藏文字隐藏文字。
支持 `markdown` 语法
##### 支持标题
##### 支持简单文本编辑
- 支持 **粗体**、*斜体*
##### 支持列表
- 列表1
- 列表2
##### 支持图片
- md插入图片语法：
- html插入图片语法：
<div style='margin:0 auto'>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
##### 支持代码块
- 行内代码 `markdown`
cpp
#include <initializer_list>
#include <iostream>
struct A {
A() { std::cout << "1"; }
A(int) { std::cout << "2"; }
A(std::initializer_list<int>) { std::cout << "3"; }
};
int main(int argc, char *argv[]) {
A a1;
A a2{};
A a3{ 1 };
A a4{ 1, 2 };
}
##### 支持表格
| 文字 | 文字 |
| ---- | ---- |
| 文字 | 文字 |
##### 支持公式
- 行内公式$Y=aX^2+bX+c$
$$
Y=aX^2+bX+c
$$
{% endspoiler %}
|
方法对比
|
details |
endspoiler |
| markdown支持 |
基本支持常用语法 |
基本支持常用语法 |
| 使用 |
直接使用 |
需要安装插件 |
| 外观 |
简洁清爽，保留原始格式 |
默认灰色底边，内容带框 |
| 动画 |
无 |
有过渡动画 |
| 配置 |
不需要/无法配置 |
可以自定义配置显示样式 |
个人建议使用 endspoiler插件，毕竟是为hexo设计的插件，可以进行自定义配置。
参考资料
文章链接：
https://www.zywvvd.com/notes/hexo/website/16-fold-content/fold-content/
