[{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/","section":"","summary":"","title":"","type":"page"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/tags/blowfish/","section":"Tags","summary":"","title":"Blowfish","type":"tags"},{"content":"本页改编自 Blowfish 官方简码文档，用于验证本站主题组件；原项目采用 MIT License。\n除了所有默认 Hugo 简码 之外，Blowfish 还添加了一些额外的功能。\n醒目框 # alert 可以将其中内容输出为文章中的风格化消息框。它对于吸引读者注意您不想让读者错过的重要信息很有用。\n参数 功能 icon 可选 显示在左侧的图标。\n默认： exclaimation triangle icon (查看图标简码，了解有关使用图标的更多详细信息。) iconColor 可选 基本 CSS 样式中图标的颜色。\n可以是十六进制值 (#FFFFFF) 或颜色名称 (white)\n默认情况下由当前配色方案决定。 cardColor 可选 基本 CSS 样式中卡片背景的颜色。\n可以是十六进制值 (#FFFFFF) 或颜色名称 (white)\n默认情况下由当前配色方案决定。 textColor 可选 基本 CSS 样式中文本的颜色。\n可以是十六进制值 (#FFFFFF) 或颜色名称 (white)\n默认情况下由当前配色方案决定。 输入内容是用 Markdown 语言编写的，因此您可以根据需要设置其格式。\n例1: 无参数\n{{\u0026lt; alert \u0026gt;}} **警告！**此操作具有破坏性！ {{\u0026lt; /alert \u0026gt;}} **警告！**此操作具有破坏性！ 例2: 未命名参数\n{{\u0026lt; alert \u0026#34;twitter\u0026#34; \u0026gt;}} Don\u0026#39;t forget to [follow me](https://twitter.com/nunocoracao) on Twitter. {{\u0026lt; /alert \u0026gt;}} Don\u0026rsquo;t forget to follow me on Twitter. 例3: 命名参数\n{{\u0026lt; alert icon=\u0026#34;fire\u0026#34; cardColor=\u0026#34;#e63946\u0026#34; iconColor=\u0026#34;#1d3557\u0026#34; textColor=\u0026#34;#f1faee\u0026#34; \u0026gt;}} This is an error! {{\u0026lt; /alert \u0026gt;}} This is an error! 提示框 # Admonition 用于在内容中插入醒目提示。\nAdmonition 的用途与 alert shortcode 类似，但其实现方式是通过 Hugo 的 render hooks。两者的关键区别在于语法：admonition 使用 Markdown 语法，因此在不同平台之间具有更好的可移植性；而 shortcode 是 Hugo 专有的。其语法类似 GitHub 的 alerts：\n\u0026gt; [!TIP] \u0026gt; 一个 Tip 类型的提示块。 \u0026gt; [!TIP]+ 自定义标题 \u0026gt; 一个带有自定义标题的可折叠提示块。 {icon=\u0026#34;twitter\u0026#34;} 提示 一个 Tip 类型的提示块。\n自定义标题 一个带有自定义标题的可折叠提示块。\n提示符号（+ 或 -）是可选的，用于控制提示块是否默认折叠。请注意，该提示符号仅在 Obsidian 中兼容。\n支持的类型 可用的 admonition 类型包括 GitHub alert 类型 和 Obsidian callout 类型。类型名称不区分大小写。\nGitHub 类型： NOTE, TIP, IMPORTANT, WARNING, CAUTION\nObsidian 类型： note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote\n自定义提示框 请参阅 提示框自定义指南。\n文章嵌入 # Article 将把一篇文章嵌入到一个 markdown 文件中。 参数中的 link应该是要嵌入的文件的 .RelPermalink。请注意，如果简码引用其父级文件，则它不会显示任何内容。 注意：如果您在 Blowfish（即 /blowfish/）等子文件夹中运行网站，请在链接中包含该路径。\n参数 功能 link 必填 要嵌入文章的 .RelPermalink showSummary 可选 布尔值，指示是否显示文章摘要。如果未设置，将使用站点的默认配置。 compactSummary 可选 布尔值，指示是否以紧凑模式显示摘要。默认为 false。 例如：\n{{\u0026lt; article link=\u0026#34;/zh-cn/docs/welcome/\u0026#34; showSummary=true compactSummary=true \u0026gt;}} 此示例引用的文章请查看 Blowfish 官方欢迎页面。\n徽章 # badge 输出一个美观的徽章组件，该组件对于显示元数据很有用。\n例如：\n{{\u0026lt; badge \u0026gt;}} New article! {{\u0026lt; /badge \u0026gt;}} New article! 按钮 # button 输出一个样式化的按钮组件，可用于突出显示主要操作。它有三个可选变量 href、target 和 rel，可用于指定链接的 URL、目标和关系。\n例如：\n{{\u0026lt; button href=\u0026#34;#button\u0026#34; target=\u0026#34;_self\u0026#34; \u0026gt;}} Call to action {{\u0026lt; /button \u0026gt;}} Call to action 滑动画册 # carousel 用于生成可交互且具有视觉吸引力的方式展示多个图像的画廊。这允许用户滑动浏览多个图像，同时仅占用单个图像的垂直空间。 所有图像均使用父组件的完整宽度并使用预定义的宽高比 16:9 、 21:9 或 32:9 之一显示。\n参数 功能 images 必填 用于匹配图像名称的正则表达式或 URL。 aspectRatio 可选 画廊的纵横比。16-9 、21-9 或32-9 。默认设置为16-9 。 interval 可选 自动滚动的时间间隔，以毫秒为单位指定。默认为2000（2 秒）。 例1: 16:9 宽高比和 URL 图像列表\n{{\u0026lt; carousel images=\u0026#34;{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}\u0026#34; \u0026gt;}} Previous Next 例2: 21:9 宽高比和正则表达式图像列表\n{{\u0026lt; carousel images=\u0026#34;gallery/*\u0026#34; aspectRatio=\u0026#34;21-9\u0026#34; interval=\u0026#34;2500\u0026#34; \u0026gt;}} Previous Next 图表 # chart 使用 Chart.js 库将图表嵌入到使用简单结构化数据的文章中。它支持多种不同的图表样式，并且所有内容都可以在简码中进行配置。只需在简码中提供图表参数，Chart.js 将完成剩下的工作。\n有关语法和支持的图表类型的详细信息，请参阅 Chart.js 官方文档。\n例如：\n{{\u0026lt; chart \u0026gt;}} type: \u0026#39;bar\u0026#39;, data: { labels: [\u0026#39;Tomato\u0026#39;, \u0026#39;Blueberry\u0026#39;, \u0026#39;Banana\u0026#39;, \u0026#39;Lime\u0026#39;, \u0026#39;Orange\u0026#39;], datasets: [{ label: \u0026#39;# of votes\u0026#39;, data: [12, 19, 3, 5, 3], }] } {{\u0026lt; /chart \u0026gt;}} 您可以在 图表示例 页面上查看一些更多 Chart.js 示例。\n导入源码 # 此短代码用于轻松从外部源导入代码，无需复制和粘贴\nParameter Description url 必需的 外部托管代码文件的 URL. type 用于语法突出显示的代码类型. startLine 可选 从代码文件中导入的起始行. endLine 可选 从代码文件中导入的结束行. Example:\n{{\u0026lt; codeimporter url=\u0026#34;https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html\u0026#34; type=\u0026#34;go\u0026#34; \u0026gt;}} {{ $url := .Get \u0026#34;url\u0026#34; }} {{ with resources.GetRemote (urls.Parse $url) }} {{ .Content | markdownify }} {{ else }} {{ warnf \u0026#34;mdimporter shortcode: unable to fetch %q: %s\u0026#34; $url .Position }} {{ end }} {{\u0026lt; codeimporter url=\u0026#34;https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml\u0026#34; type=\u0026#34;toml\u0026#34; startLine=\u0026#34;11\u0026#34; endLine=\u0026#34;18\u0026#34; \u0026gt;}} enableRobotsTXT = true summaryLength = 0 buildDrafts = false buildFuture = false enableEmoji = true Codeberg Card # codeberg 允许您通过 Codeberg API 快速链接 Codeberg 存储库，提供星号和分叉等统计信息的实时更新.\nParameter Description repo [String] Codeberg 存储库的格式为 username/repo Example 1:\n{{\u0026lt; codeberg repo=\u0026#34;forgejo/forgejo\u0026#34; \u0026gt;}} \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e forgejo/forgejo Beyond coding. We forge. Go 5253 895 Figure # Blowfish 包含一个 figure 简码，用于将图像添加到内容中。该简码取代了基本的 Hugo 功能，且性能更好。\n当提供的图像是页面资源时，将使用 Hugo Pipes 对其进行优化并缩放，以提供适合不同设备分辨率的图像。如果提供了静态资产或外部图像的 URL，它将按原样包含在内，而无需 Hugo 进行任何图像处理。\nfigure 简码接受六个参数：\n参数 功能 src 必填 图像的本地路径/文件名或 URL。当提供路径和文件名时，主题将尝试使用以下查找顺序来查找图像：首先，作为与页面绑定的页面资源；然后是 assets/ 目录中的文件；最后是，static/目录中的文件。 alt 图像的替代文本描述。 caption Markdown 格式的图像标题，将显示在图像下方。 class 应用于图像的其他 CSS 类。 href 图像应链接到的 URL。 target href URL 的目标属性。 nozoom nozoom=true 会禁用图像缩放功能。与 href 结合使用十分有用。 default 用于恢复默认 Hugo figure 行为的特殊参数。只需提供default=true，然后使用正常的 Hugo 简码语法。 Blowfish 还支持使用标准 Markdown 语法自动转换图像。只需使用以下格式，主题将自动处理：\n![Alt text](image.jpg \u0026#34;Image caption\u0026#34;) Forgejo 卡片 # forgejo allows you to quickly link a Forgejo repository via the forgejo API, providing real-time updates on stats such as stars and forks.\nParameter Description repo [String] forgejo repo in the format of username/repo server [String] server URL like https://v11.next.forgejo.org Example 1:\n{{\u0026lt; forgejo server=\u0026#34;https://v11.next.forgejo.org\u0026#34; repo=\u0026#34;a/mastodon\u0026#34; \u0026gt;}} a/mastodon Your self-hosted, globally interconnected microblogging community Ruby 0 0 例如：\n{{\u0026lt; figure src=\u0026#34;abstract.jpg\u0026#34; alt=\u0026#34;Abstract purple artwork\u0026#34; caption=\u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34; \u0026gt;}} \u0026lt;!-- OR --\u0026gt; ![Abstract purple artwork](abstract.jpg \u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34;) Photo by Jr Korpa on Unsplash 排布画册 # gallery 允许您以响应式一次展示多个图像，并具有更加多样化和有趣的布局的图库。\n为了将图像添加到图库中，请为每个图像使用img标签并添加class =\u0026quot;grid-wXX\u0026quot;，以便图库能够识别每个图像的列宽。默认情况下可用的宽度从 10% 开始，以 5% 的增量一直达到 100%。例如，要将宽度设置为 65%，请将类设置为grid-w65。此外，还可以使用 33% 和 66% 的宽度来构建 3 列的画廊。您还可以利用 Tailwind 的响应指示器来构建响应网格。\n例1: 普通图库\n{{\u0026lt; gallery \u0026gt;}} \u0026lt;img src=\u0026#34;gallery/01.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/02.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/03.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/04.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/05.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/06.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/07.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; {{\u0026lt; /gallery \u0026gt;}} 例2: 响应式图库\n{{\u0026lt; gallery \u0026gt;}} \u0026lt;img src=\u0026#34;gallery/01.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/02.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/03.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/04.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/05.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/06.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/07.jpg\u0026#34; class=\u0026#34;grid-w50 md:grid-w33 xl:grid-w25\u0026#34; /\u0026gt; {{\u0026lt; /gallery \u0026gt;}} Gist # gist 短代码允许你通过指定 Gist 用户名、ID 以及可选的特定文件，直接将 GitHub Gist 嵌入到内容中。\n参数 描述 [0] [字符串] GitHub 用户名 [1] [字符串] Gist ID [2]（可选） [字符串] Gist 中要嵌入的文件名（可选） 示例 1：嵌入整个 Gist\n{{\u0026lt; gist \u0026#34;octocat\u0026#34; \u0026#34;6cad326836d38bd3a7ae\u0026#34; \u0026gt;}} 示例 2：嵌入 Gist 中的特定文件\n{{\u0026lt; gist \u0026#34;rauchg\u0026#34; \u0026#34;2052694\u0026#34; \u0026#34;README.md\u0026#34; \u0026gt;}} Gitea 卡片 # gitea 允许你通过 gitea API 快速链接一个 Gitea 仓库，提供诸如 stars 和 forks 等统计数据的实时更新。\n参数 描述 repo [字符串] 以 用户名/仓库名 格式表示的 gitea 仓库 server [字符串] 服务器 URL，如 https://git.fsfe.org 示例 1：\n{{\u0026lt; gitea server=\u0026#34;https://git.fsfe.org\u0026#34; repo=\u0026#34;FSFE/fsfe-website\u0026#34; \u0026gt;}} FSFE/fsfe-website Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/ HTML 33 98 GitHub 卡片 # github 允许您快速链接到 github Repo，同时显示和更新有关它的实时统计信息，例如它的 star 和 fork 数。\n参数 功能 repo [字符串] 格式为 username/repo 的 github repo showThumbnail 可选 [布尔值] 是否显示缩略图，默认为 true 例1:\n{{\u0026lt; github repo=\u0026#34;nunocoracao/blowfish\u0026#34; \u0026gt;}} nunocoracao/blowfish Personal Website \u0026amp; Blog Theme for Hugo HTML 2854 743 GitLab 卡片 # gitlab 允许您快速链接 GitLab 项目（GitLab 的 Repo）。 显示有关的实时统计数据，例如它拥有的 star 和 fork 的数量。 与 github 不同，它无法显示项目的主要编程语言。 最后，只要 api/v4/projects/ 可用，就可以提供自定义 GitLab 实例 URL，从而使此简码能够显示大多数自托管/企业组织。\n参数 功能 projectID [String] gitlab 数字项目ID baseURL [String] 可选 gitlab 实例 URL，默认为 https://gitlab.com/ 例1:\n{{\u0026lt; gitlab projectID=\u0026#34;278964\u0026#34; \u0026gt;}} GitLab.org / GitLab GitLab is the open-source DevSecOps platform that provides a complete software development lifecycle toolchain including source control, CI/CD, security scanning, and project management in a single application. 6099 12322 Hugging Face 卡片 # huggingface 让您能够快速链接 Hugging Face 模型或数据集，显示实时信息如点赞数和下载量，以及类型和描述。\n参数 描述 model [字符串] 格式为 用户名/模型名 的 Hugging Face 模型 dataset [字符串] 格式为 用户名/数据集名 的 Hugging Face 数据集 注意： 使用 model 或 dataset 参数中的一个，不要同时使用。\n示例1（模型）：\n{{\u0026lt; huggingface model=\u0026#34;google-bert/bert-base-uncased\u0026#34; \u0026gt;}} google-bert/bert-base-uncased fill-mask 2728 1.2194759e\u0026#43;08 示例2（数据集）：\n{{\u0026lt; huggingface dataset=\u0026#34;stanfordnlp/imdb\u0026#34; \u0026gt;}} stanfordnlp/imdb Large Movie Review Dataset. This is a dataset for binary sentiment classification containing substantially more data than previous benchmark datasets. We provide a set of 25,000 highly polar movie reviews for training, and 25,000 for testing. There is additional unlabeled data for use as well. Supported Tasks and Leaderboards More Information Needed Languages More Information Needed… See the full description on the dataset page: https://huggingface.co/datasets/stanfordnlp/imdb. dataset 459 183340 图标 # icon 输出一个 SVG 图标并以图标名称作为其唯一参数。图标会自动缩放以匹配当前文本大小。\n例如：\n{{\u0026lt; icon \u0026#34;github\u0026#34; \u0026gt;}} Output: 图标使用 Hugo Pipeline 填充，这使得它们非常灵活。 Blowfish 包含许多用于社交、链接和其他内置图标。参考 图标示例 页面以获取支持的图标的完整列表。\n可以通过在项目的 assets/icons/ 目录中提供您自己的图标来添加自定义图标。然后可以使用不带 .svg 扩展名的 SVG 文件名在简码中引用该图标。\n还可以通过调用 icon partial 在 partials 中使用图标。\nKaTeX # katex 简码可用于使用 KaTeX 包向文章内容添加数学表达式。有关可用语法，请参阅支持的 TeX 函数 的在线参考。\n要在文章中加入数学表达式，只需将简码放在任意位置即可。每篇文章只需加入一次，KaTeX 将自动呈现该页面上的任何标记。支持内联和块表示法。\n可以通过将表达式包装在 \\( 和 \\) 分隔符中来生成内联表示法。或者，可以使用 $$ 分隔符生成块符号。\n例如：\n{{\u0026lt; katex \u0026gt;}} \\(f(a,b,c) = (a^2+b^2+c^2)^3\\) \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)\n查看 数学符号示例 页面以获取更多示例。\n重点突出 # keyword 组件可用于在视觉上突出显示某些重要的单词或短语，例如专业技能等。 keywordList 简码可用于将多个 keyword 组合在一起。每个组件可以具有以下参数。\n参数 功能 icon 可选 关键字中使用的图标 输入内容是用 Markdown 编写的，因此您可以根据需要设置其格式。\n例1 :\n{{\u0026lt; keyword \u0026gt;}} Super skill {{\u0026lt; /keyword \u0026gt;}} Standalone skill 例2 :\n{{\u0026lt; keywordList \u0026gt;}} {{\u0026lt; keyword icon=\u0026#34;github\u0026#34; \u0026gt;}} Lorem ipsum dolor. {{\u0026lt; /keyword \u0026gt;}} {{\u0026lt; keyword icon=\u0026#34;code\u0026#34; \u0026gt;}} **Important** skill {{\u0026lt; /keyword \u0026gt;}} {{\u0026lt; /keywordList \u0026gt;}} {{\u0026lt; keyword \u0026gt;}} *Standalone* skill {{\u0026lt; /keyword \u0026gt;}} Lorem ipsum dolor Important skill Standalone skill 开篇语 # lead 用于强调文章的开头。它可以用来设计介绍的样式，或者指出一条重要的信息。只需将任何 Markdown 内容包装在 lead 简码中即可。\n例如：\n{{\u0026lt; lead \u0026gt;}} When life gives you lemons, make lemonade. {{\u0026lt; /lead \u0026gt;}} When life gives you lemons, make lemonade. 列表 # List 将显示最近文章的列表。此简码需要一个限制值来约束列表。此外，它还支持输入 where 和 value ，以便按参数过滤文章。请注意，此简码不会显示其父页面，但会计入限制值。\n参数 功能 limit 必填 要显示的最近文章数量。 title 可选 列表标题，默认为 Recent cardView 可选 列表启用卡片视图，默认为 false where 用于筛选文章的变量，例如 Type value 需要与 where 中定义的参数匹配的值，以进行文章查询，例如对于 where == Type，可以找到文章 sample where 和 value 值用于简码中进行以下格式的查询 where .Site.RegularPages $where $value 。检查 Hugo 文档 以了解有关可用参数的更多信息。 例 1:\n{{\u0026lt; list limit=2 \u0026gt;}} 最近的文章 关于 例 2:\n{{\u0026lt; list title=\u0026#34;Samples\u0026#34; cardView=true limit=6 where=\u0026#34;Type\u0026#34; value=\u0026#34;sample\u0026#34; \u0026gt;}} Samples 文字书写方向 # ltr 和 rtl 允许您混排内容。许多从左往右书写语言的用户希望在文章中包含部分从右往左的书写内容。使用此简码可以让您做到这一点，并利用 % 作为简码中最外层的标识符 Hugo Shortcodes，其中任何 markdown 内容都会正常渲染。\n例如：\n- This is an markdown list. - Its per default a LTR direction {{% rtl %}} - هذه القائمة باللغة العربية - من اليمين الى اليسار {{% /rtl %}} This is an markdown list. Its per default a LTR direction هذه القائمة باللغة العربية من اليمين الى اليسار Markdown 导入 # 此简码允许您从外部源导入 Markdown 文件。这对于包含来自其他仓库或网站的内容非常有用，而无需复制和粘贴内容。\n参数 功能 url 必填 外部托管 Markdown 文件的 URL。 例如：\n{{\u0026lt; mdimporter url=\u0026#34;https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md\u0026#34; \u0026gt;}} Hi there 👋 # 🧠 Principal PM @ Elastic · Creator of Watchfire and Blowfish · Ex-Docker · Ex-founder · Mentor \u0026amp; advisor\n✨ Principal Product Manager @ Elastic 🚀 Personal blog - n9o.xyz 🔥 Creator and maintainer of Watchfire @ watchfire.io - repo 🐡 Creator and maintainer of Blowfish @ blowfish.page - repo prev.\n🐳 Principal Product Manager @ Docker - working on cagent 📚 mentoring @ mentorcruise Mermaid # mermaid 允许您使用文本绘制可视化的图表。底层使用 Mermaid，并支持各种图表、图表和其他输出格式。\n只需在 mermaid 简码中编写您的 Mermaid 语法，然后让插件完成其余的工作。\n有关语法和支持的图表类型的详细信息，请参阅官方 Mermaid 文档。\n例如：\n{{\u0026lt; mermaid \u0026gt;}} graph LR; A[Lemons]--\u0026gt;B[Lemonade]; B--\u0026gt;C[Profit] {{\u0026lt; /mermaid \u0026gt;}} graph LR; A[Lemons]--\u003eB[Lemonade]; B--\u003eC[Profit] 您可以在图表和流程图示例 页面上看到一些其他 Mermaid 示例。\n色板 # swatches 输出一组最多三种不同的颜色来展示颜色元素的调色板。该简码采用每种颜色的 HEX 码并为每种颜色创建预览。\n例\n{{\u0026lt; swatches \u0026#34;#64748b\u0026#34; \u0026#34;#3b82f6\u0026#34; \u0026#34;#06b6d4\u0026#34; \u0026gt;}} 输出 Tabs # tabs 简码常用于呈现某个步骤的不同变体。例如，可用于展示在不同平台上安装 VS Code 的方式。\n参数 描述 group 可选。 用于同步切换标签页的组名。具有相同组名的所有标签页将一起切换。 default 可选。 默认激活的标签页的标签。如果未设置，默认激活第一个标签页。 label 必填。 显示在标签按钮上的文本标签。 icon 可选。 在标签前显示的图标名称。 示例 1：基本用法\n{{\u0026lt; tabs \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Windows\u0026#34; \u0026gt;}} 使用 Chocolatey 安装: ```pwsh choco install vscode.install ``` 或使用 WinGet 安装 ```pwsh winget install -e --id Microsoft.VisualStudioCode ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;macOS\u0026#34; \u0026gt;}} ```bash brew install --cask visual-studio-code ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Linux\u0026#34; \u0026gt;}} 参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。 {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} 输出\nWindows macOS Linux 使用 Chocolatey 安装:\nchoco install vscode.install 或使用 WinGet 安装\nwinget install -e --id Microsoft.VisualStudioCode brew install --cask visual-studio-code 参见文档。 示例 2：使用 Group、Default 和 Icon\n{{\u0026lt; tabs group=\u0026#34;lang\u0026#34; default=\u0026#34;Python\u0026#34; \u0026gt;}} {{\u0026lt; tab label=\u0026#34;JavaScript\u0026#34; icon=\u0026#34;code\u0026#34; \u0026gt;}} ```javascript console.log(\u0026#34;Hello\u0026#34;); ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Python\u0026#34; icon=\u0026#34;sun\u0026#34; \u0026gt;}} ```python print(\u0026#34;Hello\u0026#34;) ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Go\u0026#34; icon=\u0026#34;moon\u0026#34; \u0026gt;}} ```go fmt.Println(\u0026#34;Hello\u0026#34;) ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} {{\u0026lt; tabs group=\u0026#34;lang\u0026#34; default=\u0026#34;Python\u0026#34; \u0026gt;}} {{\u0026lt; tab label=\u0026#34;JavaScript\u0026#34; icon=\u0026#34;code\u0026#34; \u0026gt;}} ```javascript const add = (a, b) =\u0026gt; a + b; ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Python\u0026#34; icon=\u0026#34;sun\u0026#34; \u0026gt;}} ```python def add(a, b): return a + b ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab label=\u0026#34;Go\u0026#34; icon=\u0026#34;moon\u0026#34; \u0026gt;}} ```go func add(a, b int) int { return a + b } ``` {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} Output\nJavaScript Python Go console.log(\u0026#34;Hello\u0026#34;); print(\u0026#34;Hello\u0026#34;) fmt.Println(\u0026#34;Hello\u0026#34;) JavaScript Python Go const add = (a, b) =\u0026gt; a + b; def add(a, b): return a + b func add(a, b int) int { return a + b } 在这个示例中，两个标签组都使用了相同的 group=\u0026quot;lang\u0026quot; 参数，因此点击任意一个标签时，两个标签组都会同步切换。default=\u0026quot;Python\u0026quot; 参数用于指定 Python 为初始激活的标签，而 icon=\u0026quot;code\u0026quot; 会在每个标签标题前添加一个图标。\n时间线 # timeline 创建了一个可视化时间线，用于展示专业经验、项目成就等。 timeline 简码依赖于 timelineItem 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。\n参数 功能 md 将内容渲染为 Markdown (true/false) icon 要在时间线中使用的图标 header 每个条目的标题 badge 放置在右上角徽章内的文本 subheader 每个条目的副标题 例如：\n{{\u0026lt; timeline \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;github\u0026#34; header=\u0026#34;header\u0026#34; badge=\u0026#34;badge test\u0026#34; subheader=\u0026#34;subheader\u0026#34; \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;code\u0026#34; header=\u0026#34;Another Awesome Header\u0026#34; badge=\u0026#34;date - present\u0026#34; subheader=\u0026#34;Awesome Subheader\u0026#34; \u0026gt;}} With html code \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;Coffee\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Tea\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Milk\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;star\u0026#34; header=\u0026#34;Shortcodes\u0026#34; badge=\u0026#34;AWESOME\u0026#34; \u0026gt;}} With other shortcodes {{\u0026lt; gallery \u0026gt;}} \u0026lt;img src=\u0026#34;gallery/01.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/02.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/03.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/04.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/05.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/06.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; \u0026lt;img src=\u0026#34;gallery/07.jpg\u0026#34; class=\u0026#34;grid-w33\u0026#34; /\u0026gt; {{\u0026lt; /gallery \u0026gt;}} {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; timelineItem icon=\u0026#34;code\u0026#34; header=\u0026#34;Another Awesome Header\u0026#34;\u0026gt;}} {{\u0026lt; github repo=\u0026#34;nunocoracao/blowfish\u0026#34; \u0026gt;}} {{\u0026lt; /timelineItem \u0026gt;}} {{\u0026lt; /timeline \u0026gt;}} header badge test subheader Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. Another Awesome Header date - present Awesome Subheader With html code Coffee Tea Milk Shortcodes AWESOME With other shortcodes Another Awesome Header nunocoracao/blowfish Personal Website \u0026amp; Blog Theme for Hugo HTML 2854 743 TypeIt # TypeIt 是用于创建打字机效果的最通用的 JavaScript 工具。通过简单的配置，它允许您键入单个或多个断行、删除和相互替换的字符串，甚至可以处理包含复杂 HTML 的字符串。\nBlowfish 使用简码实现 TypeIt 功能的子集。在 typeit 简码中编写文本，并使用以下参数来配置您想要的行为。\n参数 功能 tag [String] 将用于呈现字符串的 html 标签。 classList [String] 应用于 html 元素的 css 类列表。 initialString [String] 将显示为先写入并将被替换的初始字符串。 speed [number] 每步之间的打字速度，以毫秒为单位。 lifeLike [boolean] 使打字速度不规律，就像真人在打字一样。 startDelay [number] 插件在初始化后到开始输入的延迟时间。 breakLines [boolean] 将多个字符串换行输出 (true)，或者将它们删除并替换 (false)。 waitUntilVisible [boolean] 决定脚本在网站加载时启动还是在目标元素可见时启动。默认为 true loop [boolean] 字符串动画是否会循环 例1:\n{{\u0026lt; typeit \u0026gt;}} Lorem ipsum dolor sit amet {{\u0026lt; /typeit \u0026gt;}} 例2:\n{{\u0026lt; typeit tag=h1 lifeLike=true \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{\u0026lt; /typeit \u0026gt;}} 例3:\n{{\u0026lt; typeit tag=h3 speed=50 breakLines=false loop=true \u0026gt;}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{\u0026lt; /typeit \u0026gt;}} Video # Blowfish 提供 video 简码，用于在内容中嵌入本地或外部视频。该简码会渲染一个 \u0026lt;figure\u0026gt; 容器，包含自适应的视频播放器和可选说明。\nvideo 简码支持以下参数：\n参数 说明 src 必填。 视频 URL 或本地路径。本地查找顺序：页面资源 → assets/ → static/。 poster 可选的封面图 URL 或本地路径。未提供时，会尝试在页面 bundle 中寻找同名图片。 caption 可选的 Markdown 说明文字，显示在视频下方。 autoplay true/false。为 true 时自动播放。默认：false。 loop true/false。为 true 时循环播放。默认：false。 muted true/false。为 true 时静音。默认：false。 controls true/false。为 true 时显示浏览器默认播放控制条。默认：true。 playsinline true/false。为 true 时在移动端内联播放。默认：true。 preload metadata（仅加载信息）、none（节省带宽）或 auto（预加载更多）。默认：metadata。 start 可选的开始时间（秒）。 end 可选的结束时间（秒）。 ratio 为播放器预留的宽高比。支持 16/9、4/3、1/1 或自定义 W/H。默认：16/9。 fit 视频在比例中的适配方式：contain（不裁切）、cover（裁切填满）、fill（拉伸）。默认：contain。 如果浏览器无法播放视频，播放器会显示一段简短的英文提示并提供下载链接。\n示例：\n{{\u0026lt; video src=\u0026#34;https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm\u0026#34; poster=\u0026#34;https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg\u0026#34; caption=\u0026#34;**公有领域演示** — CC0 视频与封面。\u0026#34; loop=true muted=true \u0026gt;}} Your browser cannot play this video. Download video.\n公有领域演示 — CC0 视频与封面。 Youtube 嵌入播放器 # 使用 lite-youtube-embed 库嵌入 YouTube 视频的简码。该库是 YouTube 嵌入播放器的轻量级替代品，其设计速度更快、更高效。\n参数 功能 id [String] 要嵌入的 YouTube 视频 ID。 label [String] 视频的标签 例1:\n{{\u0026lt; youtubeLite id=\u0026#34;SgXhGb-7QbU\u0026#34; label=\u0026#34;Blowfish-tools demo\u0026#34; \u0026gt;}} ","date":"2026年8月5日","externalUrl":null,"permalink":"/posts/blowfish-shortcodes/","section":"文章","summary":"展示 Blowfish 提供的提示框、轮播、图表、图库、Mermaid 等扩展简码。","title":"Blowfish 简码示例","type":"posts"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/tags/hugo/","section":"Tags","summary":"","title":"Hugo","type":"tags"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/tags/mermaid/","section":"Tags","summary":"","title":"Mermaid","type":"tags"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/topics/","section":"Topics","summary":"","title":"Topics","type":"topics"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/tags/%E7%AE%80%E7%A0%81/","section":"Tags","summary":"","title":"简码","type":"tags"},{"content":"","date":"2026年8月5日","externalUrl":null,"permalink":"/topics/%E5%BC%80%E5%8F%91%E4%B8%8E%E5%B7%A5%E5%85%B7/","section":"Topics","summary":"","title":"开发与工具","type":"topics"},{"content":"这里收录经过整理的技术实践、故障排查记录和工具配置。\n","date":"2026年8月5日","externalUrl":null,"permalink":"/posts/","section":"文章","summary":"","title":"文章","type":"posts"},{"content":"","externalUrl":null,"permalink":"/authors/","section":"Authors","summary":"","title":"Authors","type":"authors"},{"content":"","externalUrl":null,"permalink":"/series/","section":"Series","summary":"","title":"Series","type":"series"},{"content":"我是 freeez。\n我会哭的很大声。\nGitHub\n本站的部分背景与文章配图来自 syego 的作品。\n","externalUrl":null,"permalink":"/about/","section":"","summary":"","title":"关于","type":"page"}]