目录
@Author:CSU张扬
@Email:csuzhangyang@gmail.com or csuzhangyang@qq.com
@我的网站: 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插入图片语法:<img src = "hexo-pictures/hexo-6_1.png" width = "50%">
- 支持行内代码 `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】自定义设置
-
默认是
Show: .../ Hide: ...
,我们可以更改前面的字。 -
打开文件
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 <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 };
}
```// 此处加点文字,防止排版错误:因为这是代码块内的代码。使用时可删除
- 支持表格
|文字|文字|
|-|-|
|文字|文字|
{% endspoiler %}
2.3 实现效果
CSDN不支持折叠文字,效果请到本人网站。faker.top