来源网站

Admonition 折叠框

  1. 访问 hugo-backup 下载以下 4 个文件及 font-fa，移动到对应目录下。
资源来源

hugo-backup

  • admonition.css
    • Function: admonition的CSS文件，自定义各标签的颜色、大小、边界、字体大小等。
    • Path: assets/css/extended/admonition.css
  • details.css
    • Function: 右上角箭头符号的CSS设定文件，用来控制文章的闭合。
    • Path: assets/css/extended/details.css
  • admonition.html
    • Function: 模板，其中有部分能用来修改各标签的icon。
    • Path: layouts/shortcodes/admonition.html
  • fa-all.css
    • Function: fontawesome(V5)的CSS文件，里面是fontawesome的图标设置文件。
    • Path: assets/css/extended/fa-all.css
  • font-fa
    • Function: fontawesome(V5)的字库。
    • Path: static/webfont，默认(static/font/fa)
  1. 修改 admonition 的模板 extend_footer.html。

仅需要复制原作者 extend_footer.html 198-211行的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{- /* Footer custom content area start */ -}}
{{- /*     Insert any custom code web-analytics, resources, etc. here */ -}}
{{- /* admonition toggle */}}
<script>
    let details = document.getElementsByClassName('details')
    details = details || [];
    for (let i = 0; i < details.length; i++) {
        let element = details[i]
        const summary = element.getElementsByClassName('details-summary')[0];
        if (summary) {
            summary.addEventListener('click', () => {
                element.classList.toggle('open');
            }, false);
        }
    }
</script>
{{- /* Footer custom content area end */ -}}

语法

{{<admonition type=quote title=“title” open=true >}} 内容 {{< /admonition >}}

效果

参考教程
如何移植HUGO Loveit主題的admonition shortcodes

目前支持类型

Type 可选参数为：tip、note、abstract、info、success、question、warning、failure、danger、bug、example、quote 共 12 种。

note
admonition - note
abstract
admonition - abstract
info
admonition - info
tip
admonition - tip
success
admonition - success
question
admonition - question
warning
admonition - warning
failure
admonition - failure
danger
admonition - danger
bug
admonition - bug
example
admonition - example
quote
admonition - quote

Vscode代码模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

"Admonition Template with Choices": {
    "prefix": "admonition", // 触发代码片段的前缀
    "body": [
        "{.{< admonition type=${1|quote,tip,note,abstract,info,success,question,warning,failure,danger,bug,example|} title=${2:参考教程} open=${3:false} >}}",
        "",
        "",
        "",
        "{.{< /admonition >}}"
    ],
    "description": "插入一个带有类型选择的 admonition"
}

使用方法：输入 admonition后，按下 Tab 出现代码，默认 Type 为 quote 、Title 为 参考教程 、折叠框不打开 false，可自行更改。

注意事项
记得去掉第一个大括号 { 后的 . 粘贴即可。