Hexo+Github博客：如何折叠(显示/隐藏)部分文字

@Author：CSU张扬
@Email：[email protected] or [email protected]
@我的网站: https://www.faker.top
参考：Github/hexo-theme-next

1. HTML语法：使用 details 元素

1.1 如何使用

<details>
  <summary>隐藏内容的标题summary>

隐藏文字隐藏文字隐藏文字。  
支持 `markdown` 语法

- 支持 **粗体**、*斜体*
- 支持列表
- 支持md插入图片语法：![1](hexo-pictures/hexo-6_1.png)
- 支持html插入图片语法：
- 支持行内代码 `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 };
    }
    ```// 此处加点文字，防止排版错误：因为这是代码块内的代码。使用时可删除

- 支持表格

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

details>

1.2 实现效果

CSDN不支持折叠文字，效果请到本人网站。faker.top

---

2. hexo-sliding-spoiler插件

2.1 安装和自定义设置

【1】安装

官网有安装教程：

插件地址：hexo-sliding-spoiler

npm install hexo-sliding-spoiler --save

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aDE1mLTK-1581731870108)(hexo-pictures/hexo-6_4.gif)]

【2】自定义设置

1. 默认是 Show: .../ Hide: ...，我们可以更改前面的字。

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

    .spoiler.collapsed .spoiler-title:before {
        content: "Show: ";
    }
   
    .spoiler.expanded .spoiler-title:before {
        content: "Hide: ";
    }
   

2.2 如何使用

{% spoiler "隐藏内容的标题" %}

隐藏文字隐藏文字隐藏文字。  
支持 `markdown` 语法

- 支持 **粗体**、*斜体*
- 支持列表
- 支持md插入图片语法：![1](hexo-pictures/hexo-6_1.png)
- 支持html插入图片语法：<img src = "hexo-pictures/hexo-6_1.png">
- 支持行内代码 `markdown`
- 支持代码块
  
    ```cpp
    #include 
    #include 
    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 };
    }
    ```// 此处加点文字，防止排版错误：因为这是代码块内的代码。使用时可删除

- 支持表格

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

{% endspoiler %}

2.3 实现效果

CSDN不支持折叠文字，效果请到本人网站。faker.top