前言
之所以想要搞这个，纯粹是因为某些文章过长想要折叠（比如说 LCA 和 FHQ Treap），但是又嫌弃原版折叠太丑，于是盯上了 OI Wiki 的折叠效果。
发现 OI Wiki 的 css 文件没有单独列出折叠虽然是个正常人写的代码都不会单独搞一个文件，于是全部复制进 Blog 的 css 文件 hux-blog.css，然后删掉与折叠无关的，行数从 $8872$ 降到 $2265$。
纯 css 实现的折叠框
OI Wiki 依靠原本的 details 标签和纯 css 美化。
代码与使用
首先，html 是必不可少的，基本代码如下：
1
2
3
4
5
6
7
8
9
10
<details class="note">
<summary>
标题
</summary>
<p>html格式的第一段内容</p>
<p>html格式的第二段内容</p>
<p>html格式的第三段内容</p>
<p>...</p>
</details>
其中，<details> 的 class 需要从 note、abstract、info、tip、success、question、warning、failue、danger、bug、example、quote 中选择一个；这代表着不同的样式或功能，具体见使用样例。
不过需要注意的是，在 <details> 内部不能使用 Markdown 语法，如果需要类似于粗体、插入图片等 Markdown 能实现的功能，请使用 html。
但是，实测发现 $\KaTeX$ 可以直接将源码写入 <details> 内。
$\KaTeX$ 测试样例
行内公式：$1+2+3+\cdots+10=\sum\limits_{i=1}^10=\dfrac{(1+10)\times 10}{2}=55$。
多行公式： $$ 1+2+3+\cdots+10=\sum\limits_{i=1}^10=\dfrac{(1+10)\times 10}{2}=55 $$
$\KaTeX$ 测试样例源码
1
2
3
4
5
6
7
8
9
<details class="example" open>
<summary>$\KaTeX$ 测试样例</summary>
<p>行内公式：$1+2+3+\cdots+10=\sum\limits_{i=1}^10=\dfrac{(1+10)\times 10}{2}=55$。</p>
<p>多行公式：
$$
1+2+3+\cdots+10=\sum\limits_{i=1}^10=\dfrac{(1+10)\times 10}{2}=55
$$
</p>
</details>
值得一提的是，可折叠框可以默认打开。
只需要在 <details> 中加上 open 即可。
即：<details class="example" open>。
默认打开
这是一个样例。
使用样例
使用样例
这是一个 "note" 样例
这是一个笔记。
这是一个 "abstract" 样例
这是一个信息摘要。
这是一个 "info" 样例
这是一个信息补充。
这是一个 "tip" 样例
这是一个提示。
这是一个 "success" 样例
这是一个成功。
这是一个 "question" 样例
这是一个问题。
这是一个 "warning" 样例
这是一个警告。
这是一个 "failure" 样例
这是一个错误提醒。
这是一个 "danger" 样例
这是一个危险提醒。
这是一个 "bug" 样例
这是一个漏洞提醒。
这是一个 "example" 样例
这是一个样例。
这是一个 "quote" 样例
这是一个引用。
