Hexo -16- 折叠博客内容

本文最后更新于:2022年7月6日 下午

在写博客时,可能会遇到需要读者选读的内容,此时出现了折叠博客内容的需求。本文介绍在Hexo中自定义折叠部分内容的方法。

需求描述

  • 可折叠部分内容,暴露标题,在读者需要查看标题下内容时点击展开
  • 支持尽可能多的markdown语法
  • 方便快速

方法一: HTML语法 - 使用 details 元素

使用方法

使用 <details> </details> 标签包裹需要隐藏的内容
在其中使用<summary> </summary>标签包裹需要隐藏内容的标题

隐藏内容的标题

隐藏文字隐藏文字隐藏文字。

支持 markdown 语法

支持标题
支持简单文本编辑
  • 支持 粗体斜体
支持列表
  • 列表1
  • 列表2
支持图片
  • md插入图片语法:markdown 图片
  • html插入图片语法:
支持代码块
  • 行内代码 markdown
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插入图片语法:![markdown 图片](/about/index/1.png)
- 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 --save

自定义设置

  • 可以修改css文件来自定义配置样式

例如:可以自定义修改默认的 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解码问题,示例cpp代码段前后的 ``` 请自行补全):

方法对比

details endspoiler
markdown支持 基本支持常用语法 基本支持常用语法
使用 直接使用 需要安装插件
外观 简洁清爽,保留原始格式 默认灰色底边,内容带框
动画 有过渡动画
配置 不需要/无法配置 可以自定义配置显示样式

个人建议使用 endspoiler插件,毕竟是为hexo设计的插件,可以进行自定义配置。

参考资料


Hexo -16- 折叠博客内容
https://www.zywvvd.com/notes/hexo/website/16-fold-content/fold-content/
作者
Yiwei Zhang
发布于
2020年12月26日
许可协议