跳过正文
  1. 文章/

Blowfish主题常用简码

··3000 字·4 分钟
目录

详细见https://blowfish.page/zh-cn/docs/shortcodes/#button

1. 展开折叠
#

这是折叠的内容
这个内容块默认是展开的

2. 各类型提示框
#

这是一个信息提示框
这是一个警告提示框
这是一个危险提示框

3. 画廊
#

用于生成可交互且具有视觉吸引力的方式展示多个图像的画廊。这允许用户滑动浏览多个图像,同时仅占用单个图像的垂直空间。所有图像均使用父组件的完整宽度并使用预定义的宽高比 16:921:932:9 之一显示。

参数功能
images必填 用于匹配图像名称的正则表达式或 URL。
aspectRatio可选 画廊的纵横比。 16-921-932-9 。默认设置为 16-9
interval可选 自动滚动的时间间隔,以毫秒为单位指定。默认为 2000 (2 秒)。

4. 图表
#

支持chart.js,具体见Chart.js 官方文档

5. 外部代码
#

此短代码用于轻松从外部源导入代码,无需复制和粘贴

ParameterDescription
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 文档

graph LR; A[Lemons]-->B[Lemonade]; B-->C[Profit]

9. 本地视频
#

用于在文章中嵌入本地视频文件,支持响应式设计和多种配置选项。 最简单的使用方式:

PLAINTEXT
{{< video src="video.mp4" >}}

参数说明
#

参数说明默认值
src必填 视频文件路径(本地或 URL)-
poster可选 视频封面图路径-
aspectRatio可选 视频纵横比。16-921-932-916-9
controls可选 是否显示控制条true
autoplay可选 是否自动播放false
loop可选 是否循环播放false
muted可选 是否静音false
playsinline可选 是否在移动端内联播放false
preload可选 预加载方式(metadataautononemetadata
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

用法示例
#

PLAINTEXT
{{< 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

用法示例
#

PLAINTEXT
{{< 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

用法示例
#

PLAINTEXT
{{< 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 >}}
xiadengma
作者
xiadengma