详细见https://blowfish.page/zh-cn/docs/shortcodes/#button
1. 展开折叠#
2. 各类型提示框#
这是一个信息提示框
这是一个警告提示框
这是一个危险提示框
3. 画廊#
用于生成可交互且具有视觉吸引力的方式展示多个图像的画廊。这允许用户滑动浏览多个图像,同时仅占用单个图像的垂直空间。所有图像均使用父组件的完整宽度并使用预定义的宽高比 16:9 、 21:9 或 32:9 之一显示。
| 参数 | 功能 |
|---|---|
images | 必填 用于匹配图像名称的正则表达式或 URL。 |
aspectRatio | 可选 画廊的纵横比。 16-9 、 21-9 或 32-9 。默认设置为 16-9 。 |
interval | 可选 自动滚动的时间间隔,以毫秒为单位指定。默认为 2000 (2 秒)。 |
4. 图表#
支持chart.js,具体见Chart.js 官方文档。
5. 外部代码#
此短代码用于轻松从外部源导入代码,无需复制和粘贴
| Parameter | Description |
|---|---|
| url | 必需的 外部托管代码文件的 URL. |
| type | 用于语法突出显示的代码类型. |
| startLine | 可选 从代码文件中导入的起始行. |
| endLine | 可选 从代码文件中导入的结束行. |
6. Github 卡片#
允许您快速链接到 github Repo,同时显示和更新有关它的实时统计信息,例如它的 star 和 fork 数。
| 参数 | 功能 |
|---|---|
| repo | [String] 格式为 username/repo 的 github repo |
7. KaTeX 数学公式#
katex 简码可用于使用 KaTeX 包向文章内容添加数学表达式。有关可用语法,请参阅支持的 TeX 函数的在线参考。
要在文章中加入数学表达式,只需将简码放在任意位置即可。每篇文章只需加入一次,KaTeX 将自动呈现该页面上的任何标记。支持内联和块表示法。
可以通过将表达式包装在 \\( 和 \\) 分隔符中来生成内联表示法。或者,可以使用 $$ 分隔符生成块符号。
\(f(a,b,c) = (a^2+b^2+c^2)^3\)
8. Mermaid 图表和流程图#
mermaid 允许您使用文本绘制可视化的图表。底层使用 Mermaid,并支持各种图表、图表和其他输出格式。
只需在 mermaid 简码中编写您的 Mermaid 语法,然后让插件完成其余的工作。
已经支持 markdown 语法,直接在 markdown 中编写即可。
有关语法和支持的图表类型的详细信息,请参阅官方 Mermaid 文档。
9. 本地视频#
用于在文章中嵌入本地视频文件,支持响应式设计和多种配置选项。 最简单的使用方式:
{{< video src="video.mp4" >}}参数说明#
| 参数 | 说明 | 默认值 |
|---|---|---|
src | 必填 视频文件路径(本地或 URL) | - |
poster | 可选 视频封面图路径 | - |
aspectRatio | 可选 视频纵横比。16-9、21-9 或 32-9 | 16-9 |
controls | 可选 是否显示控制条 | true |
autoplay | 可选 是否自动播放 | false |
loop | 可选 是否循环播放 | false |
muted | 可选 是否静音 | false |
playsinline | 可选 是否在移动端内联播放 | false |
preload | 可选 预加载方式(metadata、auto、none) | metadata |
caption | 可选 视频说明文字(支持 Markdown) | - |
src-webm | 可选 WebM 格式视频源(提供多格式以提高兼容性) | - |
src-ogg | 可选 OGG 格式视频源 | - |
class | 可选 自定义 CSS 类 | - |
10. 单张图片 figure(推荐)#
参考 content/posts/MIT 6.S184 课程笔记/index.md 的写法:本站推荐用 figure 简码统一插图格式(可选图注/宽度/懒加载等)。该简码模板位于 layouts/shortcodes/figure.html。
参数说明#
| 参数 | 说明 |
|---|---|
src | 必填 图片路径(相对当前文章 Page Bundle,或站点资源路径/外链 URL) |
alt | 可选 图片 alt(缺省会回退到 caption 的纯文本) |
width | 可选 图片宽度(CSS 值,例如 70%、40%、520px) |
caption | 可选 图注(支持 Markdown) |
loading | 可选 传给 <img loading>,例如 lazy |
class | 可选 追加到 <figure> 的 CSS class |
用法示例#
{{< figure
src="imgs/example.png"
alt="示例图"
width="70%"
caption="图:示例图注(支持 Markdown)"
loading="lazy"
>}}11. 自定义:并排图片 figuregroup#
用于把多张图片并排排成一行(类似论文里一排多图的效果),并共享同一个图注。该简码是本站新增,模板位于 layouts/shortcodes/figuregroup.html。
参数说明#
| 参数 | 说明 |
|---|---|
src | 必填 多图路径列表,用 ; 分隔,例如 a.png;b.png;c.png |
alt | 可选 多图 alt 列表,用 ; 分隔;缺省会回退到 caption 或文件名 |
itemWidth | 可选 单张图的宽度(CSS 值),例如 45%、260px |
caption | 可选 图注(支持 Markdown) |
title | 可选 标题 |
class | 可选 追加到 <figure> 的 CSS class |
loading | 可选 传给 <img loading="...">,例如 lazy |
用法示例#
{{< figuregroup
src="imgs/a.png;imgs/b.png"
alt="图 a;图 b"
itemWidth="45%"
caption="两张图并排显示(共享同一条图注)"
>}}12. 自定义:算法框 algorithm#
用于在文章中插入“论文风格”的算法框(参考 arXiv HTML 的 Algorithm 样式:外框 + caption 上下双线)。该简码是本站新增,模板位于 layouts/shortcodes/algorithm.html,样式在 assets/css/custom.css 的 .bf-algorithm*。
参数说明#
| 参数 | 说明 |
|---|---|
title | 可选 算法标题(建议包含“算法 X:…”) |
id | 可选 给 <figure> 设置 id(便于锚点引用) |
class | 可选 追加 CSS class |
用法示例#
{{< algorithm title="算法 1:用欧拉方法从流模型采样" id="alg1" >}}
输入:神经网络向量场 $u_t^{\\theta}$,步数 $n$
1. 设 $t=0$
2. 设步长 $h=\\frac{1}{n}$
3. 迭代更新 $x_{t+h}=x_t + h\\,u_t^{\\theta}(x_t)$
输出:$x_1$
{{< /algorithm >}}
