标签插件总览

所有标签插件在 Markdown 正文中直接使用,不需要安装任何插件——它们由主题的 scripts/tags/index.js 注册。

语法索引

插件 语法 说明
提示块 {% note info 标题 %}…{% endnote %} 八种语义色
折叠块 {% fold 标题 %}…{% endfold %} 默认收起,可 open
选项卡 {% tabs %}{% tab 标题 %}…{% endtab %}{% endtabs %} 多标签切换
时间轴 {% timeline %}{% event 标题 / 时间 / 颜色 %}…{% endevent %}{% endtimeline %} 纵向时间线
栅格 {% row %}{% col 6 %}…{% endcol %}{% endrow %} 12 列栅格
按钮 {% button /path/, 标题, 图标, 样式 %} 两种样式
徽标 {% label primary 文本 %} 行内标签
图标 {% icon github, 20 %} 内置 SVG 图标
流程图 {% mermaid %}…{% endmermaid %} Mermaid 语法
链接卡片 {% linkcard url, 名称, 简介, 头像 %} 富链接卡片

通用约定

参数分隔

大部分插件用逗号切分参数,且会自动去掉首尾引号:

Text
1
2
{% raw %}{% button /archives/, 查看归档, archive, outline %}{% endraw %}
└─ 1 ────────┘└─ 2 ────┘└─ 3 ──┘└─ 4 ──┘

note、label 这类使用 toList() 解析的插件,逗号和空格都算分隔符,因此下面两种写法等价:

Text
1
2
{% raw %}{% label primary 新特性 %}{% endraw %}
{% raw %}{% label primary, 新特性 %}{% endraw %}

内容渲染

标签体内的内容会尽量按 Markdown 渲染。若标签体以块级 HTML 标签开头(如 <p> <div> <table> <ul>),则原样保留不重复渲染。

Text
1
2
3
4
5
6
{% raw %}{% note tip 支持 Markdown %}
这里可以写 **加粗**、`行内代码`、[链接](/)。

- 列表项一
- 列表项二
{% endnote %}{% endraw %}

嵌套

插件可以嵌套使用,但同类型插件不要交叉嵌套(如 tabs 里再放 tabs),因为渲染依赖一个内部栈,交叉嵌套会导致内容错位。

Text
1
2
3
4
5
6
7
8
9
10
{% raw %}{% row %}
{% col 6 %}
{% note info 左边 %}
栅格内可以放提示块。
{% endnote %}
{% endcol %}
{% col 6 %}
支持嵌套组合。
{% endcol %}
{% endrow %}{% endraw %}
在本文档里写示例要用

本文档自身的源码里,示例用 … 包裹,否则会被主题先解析掉。你写自己的内容时不需要这层包裹——直接写标签即可。

分页索引

页面 覆盖插件
提示与折叠 note / fold
选项卡与时间轴 tabs / timeline
栅格与行内元素 row / button / label / icon
图表与链接卡片 mermaid / linkcard

写在哪

标签插件可以在任何 Markdown 内容里使用:

  • 文章(source/_posts/)
  • 页面(source/xxx/index.md)
  • 甚至是 source/_data/ 之外的 YAML 值中不行——标签只在 Markdown 渲染阶段解析
状态是共享的

tabs / timeline / row 三个插件在渲染时使用一个临时数组收集子项,父标签闭合时取出并清空。这意味着同一页面内可以放多组同类标签,主题会用递增的 id 区分(xfm-tabs-0、xfm-tabs-1…),互不干扰。