Hexo 模仿 OI Wiki 折叠标签样式
在 Hexo 上写文章时常常发现代码太长想要折叠，但 NexT 主题自带的折叠功能感觉太丑。
一番搜索后发现一篇文章复现了 Oi Wiki 的折叠样式，结果又发现 Oi Wiki 的 css 太长不想看，
于是决定自己实现类似的样式。
注意
以下内容只适用于 Hexo NexT 8.0。
NexT 8.0 支持将自定义样式放在独立的文件中。
找到 NexT 主题配置文件 _config.yml，找到以下内容：
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyStart: source/_data/post-body-start.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl将其中 style 前面的注释符号删掉，如上面所示。
在站点文件夹下创建文件 source/_data/styles.styl，在其中添加如下内容：
source/_data/styles.styl
details.mkmt
border 1px solid #ddd
border-radius 6px
margin 1em 0
background #fff
overflow hidden
transition all 0.2s ease
details.mkmt > summary
display flex
align-items center
gap 0.5em
padding 0.6em 1em
font-weight 600
cursor pointer
list-style none
position relative
color inherit
details.mkmt > summary::after
content ">"
position absolute
right 1em
transition transform 0.2s ease
details.mkmt[open] > summary::after
transform rotate(90deg)
details.mkmt > *:not(summary)
margin 0
padding 0.6em 0.8em
details.mkmt > summary::before
content ''
display inline-block
width 1.2em
height 1.2em
margin-right 0.4em
background-repeat no-repeat
background-position center
background-size contain
details.mkmt.mt-note > summary::before
background-image url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23588bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='8'/><line x1='12' y1='12' x2='12' y2='16'/></svg>")
details.mkmt.mt-note
border 1.5px solid #588bff
background #fff
details.mkmt.mt-note > summary
background #eef3ff
color #588bff
details.mkmt.mt-warning > summary::before
background-image url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23f69202' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>")
details.mkmt.mt-warning
border 1.5px solid #f69202
background #fff
details.mkmt.mt-warning > summary
background #fef4e5
color #f69202
details.mkmt.mt-danger > summary::before
background-image url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23f45555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>")
details.mkmt.mt-danger
border 1.5px solid #f45555
background #fff
details.mkmt.mt-danger > summary
background #feeeee
color #f45555
pre
margin 0
details.mkmt.mt-code > summary::before
background-image url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237f50ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M7 8L3 12L7 16'/> <path d='M17 16L21 12L17 8'/> <path d='M9 19.5L14.5 5'/></svg>")
details.mkmt.mt-code
border 1.5px solid #7f50ff
background #fff
details.mkmt.mt-code > summary
background #f2edff
color #7f50ff使用示例：
<details class="mkmt mt-note" open>
<summary>提示</summary>
这是提示类型的折叠框内容。
</details>
<details class="mkmt mt-warning" open>
<summary>警告</summary>
这是警告类型的折叠框内容。
</details>
<details class="mkmt mt-danger" open>
<summary>危险</summary>
这是危险类型的折叠框内容。
</details>
<details class="mkmt mt-code " open>
<summary>代码</summary>
```text
This is a sample snippet of code.
```
</details>效果如下：
提示
这是提示类型的折叠框内容。
警告
这是警告类型的折叠框内容。
危险
这是危险类型的折叠框内容。
代码
This is a sample snippet of code.