Hexo -16- 折叠博客内容-工具盒子

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

需求描述 {#需求描述}

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

方法一： HTML语法 - 使用 details 元素 {#方法一：-HTML语法-使用-details-元素}

使用方法 {#使用方法}

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

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

支持 markdown 语法

支持标题 {#支持标题}

支持简单文本编辑 {#支持简单文本编辑}

支持粗体、斜体

支持列表 {#支持列表}

列表1
列表2

支持图片 {#支持图片}

md插入图片语法：
html插入图片语法：

支持代码块 {#支持代码块}

行内代码 markdown

支持表格 {#支持表格}

| 文字 | 文字 | |----|----| | 文字 | 文字 |

支持公式 {#支持公式}

行内公式$Y=aX^2+bX+c$
$$
Y=aX^2+bX+c
$$

示例代码 {#示例代码}

上述示例代码如下(由于markdown解码问题，示例cpp代码段前后的 ``` 请自行补全)：示例代码

方法二：使用hexo-sliding-spoiler插件 {#方法二：-使用hexo-sliding-spoiler插件}

官网链接 {#官网链接}

hexo-sliding-spoiler

插件安装 {#插件安装}

自定义设置 {#自定义设置}

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

例如：可以自定义修改默认的 show hide 关键字

打开文件 hexo\node_modules\hexo-sliding-spoiler\assets\spoiler.css，找到25-31行，修改其中的 content。

例如：将Show 改为 ▶ ，Hide改为▼

使用方法 {#使用方法-2}

安装好插件后，使用 {% spoiler "隐藏内容的标题" %} 和{% endspoiler %}包裹需要隐藏的内容即可。
隐藏内容的标题
隐藏文字隐藏文字隐藏文字。

支持 markdown 语法

支持标题 {#支持标题}

支持简单文本编辑 {#支持简单文本编辑}

支持粗体、斜体

支持列表 {#支持列表}

列表1
列表2

支持图片 {#支持图片}

md插入图片语法：
html插入图片语法：

支持代码块 {#支持代码块}

行内代码 markdown

支持表格 {#支持表格}

| 文字 | 文字 | |----|----| | 文字 | 文字 |

支持公式 {#支持公式}

行内公式$Y=aX^2+bX+c$
$$
Y=aX^2+bX+c
$$

示例代码 {#示例代码-2}

上述示例代码如下(由于markdown解码问题，示例cpp代码段前后的 ``` 请自行补全)：
示例代码

方法对比 {#方法对比}

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