Hexo折叠博客内容

需求描述

  • 可折叠部分内容，暴露标题，在读者需要查看标题下内容时点击展开

  • 支持尽可能多的markdown语法

  • 方便快速

方法： 使用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 %}包裹需要隐藏的内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% spoiler "隐藏内容的标题" %}

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

支持 `markdown` 语法

##### 支持标题

##### 支持简单文本编辑
- 支持 **粗体**、*斜体*

##### 支持列表
- 列表1
- 列表2
{% endspoiler %}

方法对比

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

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