标签插件总览
所有标签插件在 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, 名称, 简介, 头像 %} |
富链接卡片 |
通用约定
参数分隔
大部分插件用逗号切分参数,且会自动去掉首尾引号:
1 | {% raw %}{% button /archives/, 查看归档, archive, outline %}{% endraw %} |
note、label 这类使用 toList() 解析的插件,逗号和空格都算分隔符,因此下面两种写法等价:
1 | {% raw %}{% label primary 新特性 %}{% endraw %} |
内容渲染
标签体内的内容会尽量按 Markdown 渲染。若标签体以块级 HTML 标签开头(如 <p> <div> <table> <ul>),则原样保留不重复渲染。
1 | {% raw %}{% note tip 支持 Markdown %} |
嵌套
插件可以嵌套使用,但同类型插件不要交叉嵌套(如 tabs 里再放 tabs),因为渲染依赖一个内部栈,交叉嵌套会导致内容错位。
1 | {% raw %}{% row %} |
在本文档里写示例要用
本文档自身的源码里,示例用 … 包裹,否则会被主题先解析掉。你写自己的内容时不需要这层包裹——直接写标签即可。
分页索引
| 页面 | 覆盖插件 |
|---|---|
| 提示与折叠 | 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…),互不干扰。
评论