↓ 跳过正文
Blowfish
Blowfish
  1. 文档/

简码

17 分钟· loading · ·
简码 Mermaid 图标 Lead Docs
目录
部署教程 - 这篇文章属于一个选集。
§ 1: 欢迎来到 Blowfish
§ 2: 安装和配置
§ 3: 入门指南
§ 4: 配置
§ 5: 主页布局
§ 6: 缩略图
§ 7: Front Matter(文件头信息)
§ 8: 本文
§ 9: 局部模板(Partials)
§ 10: 多创作者模式
§ 11: 系列
§ 12: 内容示例
§ 13: 进阶自定义
§ 14: 托管和部署
§ 15: Firebase: 阅读量 & 点赞量

除了所有默认 Hugo 简码 之外，Blowfish 还添加了一些额外的功能。

手风琴
#

accordion 可以创建一组可折叠的面板。使用 accordionItem 子简码定义每个条目。您可以通过 mode 参数控制是否允许多个条目同时展开。

参数功能
mode可选 collapse(单个展开)或 open(多个展开)。默认为 collapse。
separated可选 true 时每个条目显示为独立卡片。默认为 false(连接列表)。

accordionItem 参数:

参数功能
title必填 条目标题栏中显示的标题。
open可选 设置为 true 可使该条目默认展开。
header可选 title 的别名,为与其他简码兼容而保留。
icon可选 显示在标题前的图标名称。
align可选 条目内文本的对齐方式:left、center、right

例1: mode="open"(多个条目可同时展开)+ separated=true

{{< accordion mode="open" separated=true >}}
  {{< accordionItem title="Markdown example" icon="code" open=true >}}
  This item demonstrates Markdown rendering:
  - **Bold text**
  - Lists
  - `inline code`
  {{< /accordionItem >}}

  {{< accordionItem title="Shortcode example" md=false >}}
  This item demonstrates shortcode rendering with <code>md=false</code>:
  
  {{< alert >}}This is an inline alert.{{< /alert >}}
  {{< /accordionItem >}}
{{< /accordion >}}
Markdown example

This item demonstrates Markdown rendering:

  • Bold text
  • Lists
  • inline code
Shortcode example
This item demonstrates shortcode rendering with md=false:
This is an inline alert.

例2: mode="collapse"(同一时间仅展开一个条目)

{{< accordion mode="collapse" >}}
  {{< accordionItem title="First item" open=true >}}
  This item uses Markdown with a short list:
  1. One
  2. Two
  3. Three
  {{< /accordionItem >}}

  {{< accordionItem title="Second item" md=false >}}
  This item includes another shortcode:
  {{< badge >}}Tip{{< /badge >}}
  {{< /accordionItem >}}
{{< /accordion >}}
First item

This item uses Markdown with a short list:

  1. One
  2. Two
  3. Three
Second item
This item includes another shortcode: Tip




提示框
#

Admonition 用于在内容中插入醒目提示。

Admonition 的用途与 alert shortcode 类似，但其实现方式是通过 Hugo 的 render hooks。两者的关键区别在于语法：admonition 使用 Markdown 语法，因此在不同平台之间具有更好的可移植性；而 shortcode 是 Hugo 专有的。其语法类似 GitHub 的 alerts：

> [!TIP]
> 一个 Tip 类型的提示块。

> [!TIP]+ 自定义标题
> 一个带有自定义标题的可折叠提示块。
{icon="twitter"}
提示

一个 Tip 类型的提示块。

自定义标题

一个带有自定义标题的可折叠提示块。

提示符号（+ 或 -）是可选的，用于控制提示块是否默认折叠。请注意，该提示符号仅在 Obsidian 中兼容。

支持的类型

可用的 admonition 类型包括 GitHub alert 类型 和 Obsidian callout 类型。类型名称不区分大小写。

GitHub 类型： NOTE, TIP, IMPORTANT, WARNING, CAUTION
Obsidian 类型： note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote

自定义提示框

请参阅 提示框自定义指南。




醒目框
#

alert 可以将其中内容输出为文章中的风格化消息框。它对于吸引读者注意您不想让读者错过的重要信息很有用。

参数功能
icon可选 显示在左侧的图标。
默认： exclaimation triangle icon (查看图标简码，了解有关使用图标的更多详细信息。)
iconColor可选 基本 CSS 样式中图标的颜色。
可以是十六进制值 (#FFFFFF) 或颜色名称 (white)
默认情况下由当前配色方案决定。
cardColor可选 基本 CSS 样式中卡片背景的颜色。
可以是十六进制值 (#FFFFFF) 或颜色名称 (white)
默认情况下由当前配色方案决定。
textColor可选 基本 CSS 样式中文本的颜色。
可以是十六进制值 (#FFFFFF) 或颜色名称 (white)
默认情况下由当前配色方案决定。

输入内容是用 Markdown 语言编写的，因此您可以根据需要设置其格式。

例1: 无参数

{{< alert >}}
**警告！**此操作具有破坏性！
{{< /alert >}}
**警告！**此操作具有破坏性！

例2: 未命名参数

{{< alert "twitter" >}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< /alert >}}
Don’t forget to follow me on Twitter.

例3: 命名参数

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
This is an error!
{{< /alert >}}
This is an error!




Ansible Galaxy 卡片
#

ansible 会为 Ansible Galaxy 条目渲染一张卡片,数据在构建时获取。它接受 role 或 collection 参数,两者均为 namespace.name 格式。

参数功能
role[String] namespace.name 格式的 Galaxy 角色,例如 geerlingguy.docker
collection[String] namespace.name 格式的 Galaxy 集合,例如 community.general

每次调用只能设置 role 或 collection 中的一个。

卡片的所有值都是在构建时通过 Hugo 的 resources.GetRemote 获取的。Galaxy 不允许跨域请求,因此卡片不会在浏览器中刷新——重新构建站点即可更新这些值。

例1: 角色

{{< ansible role="geerlingguy.docker" >}}
geerlingguy.docker

Docker for Linux.

role
28,949,254
8.0.0
web system containers docker orchestration

例2: 集合

{{< ansible collection="community.general" >}}
community.general

The community.general collection is a part of the Ansible package and includes many modules and plugins supported by Ansible community which are not part of more specialized community collections.

collection
263,143,170
13.3.0
community




文章嵌入
#

Article 将把一篇文章嵌入到一个 markdown 文件中。 参数中的 link应该是要嵌入的文件的 .RelPermalink。请注意，如果简码引用其父级文件，则它不会显示任何内容。 注意：如果您在 Blowfish（即 /blowfish/）等子文件夹中运行网站，请在链接中包含该路径。

参数功能
link必填 要嵌入文章的 .RelPermalink
showSummary可选 布尔值，指示是否显示文章摘要。如果未设置，将使用站点的默认配置。
compactSummary可选 布尔值，指示是否以紧凑模式显示摘要。默认为 false。

例如：

{{< article link="/zh-cn/docs/welcome/" showSummary=true compactSummary=true >}}




徽章
#

badge 输出一个美观的徽章组件，该组件对于显示元数据很有用。

例如：

{{< badge >}}
New article!
{{< /badge >}}
New article!




按钮
#

button 输出一个样式化的按钮组件，可用于突出显示主要操作。它有三个可选变量 href、target 和 rel，可用于指定链接的 URL、目标和关系。

例如：

{{< button href="#button" target="_self" >}}
Call to action
{{< /button >}}
Call to action




滑动画册
#

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

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

例1: 16:9 宽高比和 URL 图像列表

{{< carousel images="{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}" >}}

例2: 21:9 宽高比和正则表达式图像列表

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}




图表
#

chart 使用 Chart.js 库将图表嵌入到使用简单结构化数据的文章中。它支持多种不同的图表样式，并且所有内容都可以在简码中进行配置。只需在简码中提供图表参数，Chart.js 将完成剩下的工作。

有关语法和支持的图表类型的详细信息，请参阅 Chart.js 官方文档。

例如：

{{< chart >}}
type: 'bar',
data: {
  labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
  datasets: [{
    label: '# of votes',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

您可以在 图表示例 页面上查看一些更多 Chart.js 示例。




导入源码
#

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

ParameterDescription
url必需的 外部托管代码文件的 URL.
type用于语法突出显示的代码类型.
startLine可选 从代码文件中导入的起始行.
endLine可选 从代码文件中导入的结束行.

Example:

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}
{{ $url := .Get "url" }}
{{ with resources.GetRemote (urls.Parse $url) }}
  {{ .Content | markdownify }}
{{ else }}
  {{ warnf "mdimporter shortcode: unable to fetch %q: %s" $url .Position }}
{{ end }}
{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" >}}
enableRobotsTXT = true
summaryLength = 0

buildDrafts = false
buildFuture = false

enableEmoji = true



Codeberg Card
#

codeberg 允许您通过 Codeberg API 快速链接 Codeberg 存储库，提供星号和分叉等统计信息的实时更新.

ParameterDescription
repo[String] Codeberg 存储库的格式为 username/repo

Example 1:

{{< codeberg repo="forgejo/forgejo" >}}
forgejo/forgejo

Beyond coding. We forge.

Go
5312
910




CTA 按钮
#

使用 cta 可以在文档、落地页或长篇内容中添加清晰、无障碍的行动号召按钮。

参数功能
url目标 URL。默认为 #。
label按钮文字。默认为 Learn more。
styleprimary(默认)或 outline。
{{< cta url="/docs/installation/" label="Start building" >}}
{{< cta url="/docs/configuration/" label="Explore configuration" style="outline" >}}

Start building   Explore configuration




电子邮件
#

创建一个经过混淆处理的 mailto 链接:

{{< email email="mailto:hello@test.com" text="text" subject="Reply to awesome article" >}}




功能网格
#

无需重复编写展示用的标记,即可构建精致、响应式的功能介绍区块。使用 feature-grid 作为容器,然后为每个条目添加一个 feature 简码。网格在大屏幕上默认为三列,也可以设置为四列。

参数功能
columns可选的大屏幕列数:3(默认)或 4。
icon功能的图标名称。默认为 wand-magic-sparkles。
title功能标题。支持 Markdown。
url功能链接的可选目标地址。
label链接文字。默认为 Learn more。

例:

{{< feature-grid columns="3" >}}
{{< feature icon="wand-magic-sparkles" title="Make it yours" url="/docs/configuration/" >}}
Start from a thoughtful default, then adjust every meaningful detail.
{{< /feature >}}
{{< feature icon="file-lines" title="Publish faster" url="/docs/shortcodes/" label="Browse shortcodes" >}}
Compose rich content with small, reusable building blocks.
{{< /feature >}}
{{< feature icon="heart" title="Built for people" >}}
Accessible defaults, responsive layouts, and dark mode included.
{{< /feature >}}
{{< /feature-grid >}}

Make it yours

Start from a thoughtful default, then adjust every meaningful detail.
Learn more

Publish faster

Compose rich content with small, reusable building blocks.
Browse shortcodes

Built for people

Accessible defaults, responsive layouts, and dark mode included.




Figure
#

Blowfish 包含一个 figure 简码，用于将图像添加到内容中。该简码取代了基本的 Hugo 功能，且性能更好。

当提供的图像是页面资源时，将使用 Hugo Pipes 对其进行优化并缩放，以提供适合不同设备分辨率的图像。如果提供了静态资产或外部图像的 URL，它将按原样包含在内，而无需 Hugo 进行任何图像处理。

figure 简码接受六个参数：

参数功能
src必填 图像的本地路径/文件名或 URL。当提供路径和文件名时，主题将尝试使用以下查找顺序来查找图像：首先，作为与页面绑定的页面资源；然后是 assets/ 目录中的文件；最后是，static/目录中的文件。
alt图像的替代文本描述。
captionMarkdown 格式的图像标题，将显示在图像下方。
class应用于图像的其他 CSS 类。
href图像应链接到的 URL。
targethref URL 的目标属性。
nozoomnozoom=true 会禁用图像缩放功能。与 href 结合使用十分有用。
default用于恢复默认 Hugo figure 行为的特殊参数。只需提供default=true，然后使用正常的 Hugo 简码语法。

Blowfish 还支持使用标准 Markdown 语法自动转换图像。只需使用以下格式，主题将自动处理：

![Alt text](image.jpg "Image caption")

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.

ParameterDescription
repo[String] forgejo repo in the format of username/repo
server[String] server URL like https://v11.next.forgejo.org

Example 1:

{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}
a/mastodon

Your self-hosted, globally interconnected microblogging community

Ruby
0
0




例如：

{{< figure
    src="abstract.jpg"
    alt="Abstract purple artwork"
    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
    >}}

<!-- OR -->

![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")
Abstract purple artwork
Photo by Jr Korpa on Unsplash




排布画册
#

gallery 允许您以响应式一次展示多个图像，并具有更加多样化和有趣的布局的图库。

为了将图像添加到图库中，请为每个图像使用img标签并添加class ="grid-wXX"，以便图库能够识别每个图像的列宽。默认情况下可用的宽度从 10% 开始，以 5% 的增量一直达到 100%。例如，要将宽度设置为 65%，请将类设置为grid-w65。此外，还可以使用 33% 和 66% 的宽度来构建 3 列的画廊。您还可以利用 Tailwind 的响应指示器来构建响应网格。

例1: 普通图库

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}




例2: 响应式图库

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{< /gallery >}}




Gist
#

gist 短代码允许你通过指定 Gist 用户名、ID 以及可选的特定文件，直接将 GitHub Gist 嵌入到内容中。

参数描述
[0][字符串] GitHub 用户名
[1][字符串] Gist ID
[2]（可选）[字符串] Gist 中要嵌入的文件名（可选）

示例 1：嵌入整个 Gist

{{< gist "octocat" "6cad326836d38bd3a7ae" >}}

示例 2：嵌入 Gist 中的特定文件

{{< gist "rauchg" "2052694" "README.md" >}}




Gitea 卡片
#

gitea 允许你通过 gitea API 快速链接一个 Gitea 仓库，提供诸如 stars 和 forks 等统计数据的实时更新。

参数描述
repo[字符串] 以 用户名/仓库名 格式表示的 gitea 仓库
server[字符串] 服务器 URL，如 https://git.fsfe.org

示例 1：

{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}
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 数。

参数功能
repo[字符串] 格式为 username/repo 的 github repo
showThumbnail可选 [布尔值] 是否显示缩略图，默认为 true

例1:

{{< github repo="nunocoracao/blowfish" >}}
GitHub Repository Thumbnail
nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML
2866
742




GitLab 卡片
#

gitlab 允许您快速链接 GitLab 项目（GitLab 的 Repo）。 显示有关的实时统计数据，例如它拥有的 star 和 fork 的数量。 与 github 不同，它无法显示项目的主要编程语言。 最后，只要 api/v4/projects/ 可用，就可以提供自定义 GitLab 实例 URL，从而使此简码能够显示大多数自托管/企业组织。

参数功能
projectID[String] gitlab 数字项目ID
baseURL[String] 可选 gitlab 实例 URL，默认为 https://gitlab.com/

例1:

{{< gitlab projectID="278964" >}}
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.

6116
12349




Hugging Face 卡片
#

huggingface 让您能够快速链接 Hugging Face 模型或数据集，显示实时信息如点赞数和下载量，以及类型和描述。

参数描述
model[字符串] 格式为 用户名/模型名 的 Hugging Face 模型
dataset[字符串] 格式为 用户名/数据集名 的 Hugging Face 数据集

注意： 使用 model 或 dataset 参数中的一个，不要同时使用。

示例1（模型）：

{{< huggingface model="google-bert/bert-base-uncased" >}}
google-bert/bert-base-uncased
fill-mask
2734
1.15691784e+08

示例2（数据集）：

{{< huggingface dataset="stanfordnlp/imdb" >}}
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
472
175517




图标
#

icon 输出一个 SVG 图标并以图标名称作为其唯一参数。图标会自动缩放以匹配当前文本大小。

例如：

{{< icon "github" >}}

Output:

图标使用 Hugo Pipeline 填充，这使得它们非常灵活。 Blowfish 包含许多用于社交、链接和其他内置图标。参考 图标示例 页面以获取支持的图标的完整列表。

可以通过在项目的 assets/icons/ 目录中提供您自己的图标来添加自定义图标。然后可以使用不带 .svg 扩展名的 SVG 文件名在简码中引用该图标。

还可以通过调用 iconpartial 在 partials 中使用图标。




KaTeX
#

katex 简码可用于使用 KaTeX 包向文章内容添加数学表达式。有关可用语法，请参阅支持的 TeX 函数 的在线参考。

要在文章中加入数学表达式，只需将简码放在任意位置即可。每篇文章只需加入一次，KaTeX 将自动呈现该页面上的任何标记。支持内联和块表示法。

可以通过将表达式包装在 \( 和 \) 分隔符中来生成内联表示法。或者，可以使用 $$ 分隔符生成块符号。

例如：

{{< katex >}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

查看 数学符号示例 页面以获取更多示例。




重点突出
#

keyword 组件可用于在视觉上突出显示某些重要的单词或短语，例如专业技能等。 keywordList 简码可用于将多个 keyword 组合在一起。每个组件可以具有以下参数。

参数功能
icon可选 关键字中使用的图标

输入内容是用 Markdown 编写的，因此您可以根据需要设置其格式。

例1 :

{{< keyword >}} Super skill {{< /keyword >}}
Standalone skill

例2 :

{{< keywordList >}}
{{< keyword icon="github" >}} Lorem ipsum dolor. {{< /keyword >}}
{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
{{< /keywordList >}}

{{< keyword >}} *Standalone* skill {{< /keyword >}}

Lorem ipsum dolor
Important skill
Standalone skill




开篇语
#

lead 用于强调文章的开头。它可以用来设计介绍的样式，或者指出一条重要的信息。只需将任何 Markdown 内容包装在 lead 简码中即可。

例如：

{{< lead >}}
When life gives you lemons, make lemonade.
{{< /lead >}}
When life gives you lemons, make lemonade.




列表
#

List 将显示最近文章的列表。此简码需要一个限制值来约束列表。此外，它还支持输入 where 和 value ，以便按参数过滤文章。请注意，此简码不会显示其父页面，但会计入限制值。

参数功能
limit必填 要显示的最近文章数量。
title可选 列表标题，默认为 Recent
cardView可选 列表启用卡片视图，默认为 false
where用于筛选文章的变量，例如 Type
value需要与 where 中定义的参数匹配的值，以进行文章查询，例如对于 where == Type，可以找到文章 sample
where 和 value 值用于简码中进行以下格式的查询 where .Site.RegularPages $where $value 。检查 Hugo 文档 以了解有关可用参数的更多信息。

例 1:

{{< list limit=2 >}}

最近的文章

例 2:

{{< list title="Samples" cardView=true limit=6 where="Type" value="sample" >}}

Samples




文字书写方向
#

ltr 和 rtl 允许您混排内容。许多从左往右书写语言的用户希望在文章中包含部分从右往左的书写内容。使用此简码可以让您做到这一点，并利用 % 作为简码中最外层的标识符 Hugo Shortcodes，其中任何 markdown 内容都会正常渲染。

例如：

- 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 文件。这对于包含来自其他仓库或网站的内容非常有用，而无需复制和粘贴内容。

参数功能
url必填 外部托管 Markdown 文件的 URL。

例如：

{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

Hi there 👋
#

🧠 Principal PM @ Elastic · Creator of Watchfire and Blowfish · Ex-Docker · Ex-founder · Mentor & advisor

Twitter badge
LinkedIn

prev.

Nuno’s GitHub stats



Mermaid
#

mermaid 允许您使用文本绘制可视化的图表。底层使用 Mermaid，并支持各种图表、图表和其他输出格式。

只需在 mermaid 简码中编写您的 Mermaid 语法，然后让插件完成其余的工作。

有关语法和支持的图表类型的详细信息，请参阅官方 Mermaid 文档。

例如：

{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

您可以在图表和流程图示例 页面上看到一些其他 Mermaid 示例。




统计数据
#

使用 stats 和 stat 可以在响应式网格中展示简洁、醒目的指标数据。网格在大屏幕上默认为三列,使用 columns="4" 可设置为四列。

{{< stats >}}
{{< stat value="40+" label="Shortcodes" >}}Compose pages without bespoke templates.{{< /stat >}}
{{< stat value="100%" label="Portable" >}}Keep your content in Markdown.{{< /stat >}}
{{< stat value="0" label="Required plugins" >}}Start with Hugo and Blowfish.{{< /stat >}}
{{< /stats >}}

40+

Shortcodes

Compose pages without bespoke templates.

100%

Portable

Keep your content in Markdown.

0

Required plugins

Start with Hugo and Blowfish.




步骤
#

使用 steps 和 step 来展示入门引导、流程、路线图和教程。

{{< steps >}}
{{< step number="1" title="Configure the theme" >}}Choose a colour scheme and homepage layout.{{< /step >}}
{{< step number="2" title="Write your content" >}}Use standard Markdown and shortcodes.{{< /step >}}
{{< /steps >}}
  1. 1

    Configure the theme

    Choose a colour scheme and homepage layout.
  2. 2

    Write your content

    Use standard Markdown and shortcodes.




色板
#

swatches 输出一组最多三种不同的颜色来展示颜色元素的调色板。该简码采用每种颜色的 HEX 码并为每种颜色创建预览。

例

{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

输出




Tabs
#

tabs 简码常用于呈现某个步骤的不同变体。例如，可用于展示在不同平台上安装 VS Code 的方式。

参数描述
group可选。 用于同步切换标签页的组名。具有相同组名的所有标签页将一起切换。
default可选。 默认激活的标签页的标签。如果未设置，默认激活第一个标签页。
label必填。 显示在标签按钮上的文本标签。
icon可选。 在标签前显示的图标名称。

示例 1：基本用法

{{< tabs >}}

    {{< tab label="Windows" >}}
    使用 Chocolatey 安装:

    ```pwsh
    choco install vscode.install
    ```

    或使用 WinGet 安装

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{< /tab >}}

    {{< tab label="macOS" >}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{< /tab >}}

    {{< tab label="Linux" >}}
    参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
    {{< /tab >}}

{{< /tabs >}}

输出

使用 Chocolatey 安装:

choco install vscode.install

或使用 WinGet 安装

winget install -e --id Microsoft.VisualStudioCode
brew install --cask visual-studio-code
参见文档。

示例 2：使用 Group、Default 和 Icon

{{< tabs group="lang" default="Python" >}}
    {{< tab label="JavaScript" icon="code" >}}
    ```javascript
    console.log("Hello");
    ```
    {{< /tab >}}

    {{< tab label="Python" icon="sun" >}}
    ```python
    print("Hello")
    ```
    {{< /tab >}}

    {{< tab label="Go" icon="moon" >}}
    ```go
    fmt.Println("Hello")
    ```
    {{< /tab >}}
{{< /tabs >}}

{{< tabs group="lang" default="Python" >}}
    {{< tab label="JavaScript" icon="code" >}}
    ```javascript
    const add = (a, b) => a + b;
    ```
    {{< /tab >}}

    {{< tab label="Python" icon="sun" >}}
    ```python
    def add(a, b): return a + b
    ```
    {{< /tab >}}

    {{< tab label="Go" icon="moon" >}}
    ```go
    func add(a, b int) int { return a + b }
    ```
    {{< /tab >}}
{{< /tabs >}}

Output

console.log("Hello");
print("Hello")
fmt.Println("Hello")
const add = (a, b) => a + b;
def add(a, b): return a + b
func add(a, b int) int { return a + b }

在这个示例中，两个标签组都使用了相同的 group="lang" 参数，因此点击任意一个标签时，两个标签组都会同步切换。default="Python" 参数用于指定 Python 为初始激活的标签，而 icon="code" 会在每个标签标题前添加一个图标。




时间线
#

timeline 创建了一个可视化时间线，用于展示专业经验、项目成就等。 timeline 简码依赖于 timelineItem 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。

参数功能
md将内容渲染为 Markdown (true/false)
icon要在时间线中使用的图标
header每个条目的标题
badge放置在右上角徽章内的文本
subheader每个条目的副标题

例如：

{{< timeline >}}

{{< timelineItem icon="github" header="header" badge="badge test" subheader="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. 
{{< /timelineItem >}}


{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" >}}
With html code
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
With other shortcodes
{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
{{< /timelineItem >}}

{{< timelineItem icon="code" header="Another Awesome Header">}}
{{< github repo="nunocoracao/blowfish" >}}
{{< /timelineItem >}}

{{< /timeline >}}

  1. 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.

  2. Another Awesome Header

    date - present

    Awesome Subheader

    With html code
    • Coffee
    • Tea
    • Milk

  3. Shortcodes

    AWESOME

    With other shortcodes

  4. Another Awesome Header

    GitHub Repository Thumbnail
    nunocoracao/blowfish

    Personal Website & Blog Theme for Hugo

    HTML
    2866
    742




TypeIt
#

TypeIt 是用于创建打字机效果的最通用的 JavaScript 工具。通过简单的配置，它允许您键入单个或多个断行、删除和相互替换的字符串，甚至可以处理包含复杂 HTML 的字符串。

Blowfish 使用简码实现 TypeIt 功能的子集。在 typeit 简码中编写文本，并使用以下参数来配置您想要的行为。

参数功能
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:

{{< typeit >}}
Lorem ipsum dolor sit amet 
{{< /typeit >}}

例2:

{{< typeit 
  tag=h1
  lifeLike=true
>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{< /typeit >}}

例3:

{{< typeit 
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{< /typeit >}}




Video
#

Blowfish 提供 video 简码，用于在内容中嵌入本地或外部视频。该简码会渲染一个 <figure> 容器，包含自适应的视频播放器和可选说明。

video 简码支持以下参数：

参数说明
src必填。 视频 URL 或本地路径。本地查找顺序：页面资源 → assets/ → static/。
poster可选的封面图 URL 或本地路径。未提供时，会尝试在页面 bundle 中寻找同名图片。
caption可选的 Markdown 说明文字，显示在视频下方。
autoplaytrue/false。为 true 时自动播放。默认：false。
looptrue/false。为 true 时循环播放。默认：false。
mutedtrue/false。为 true 时静音。默认：false。
controlstrue/false。为 true 时显示浏览器默认播放控制条。默认：true。
playsinlinetrue/false。为 true 时在移动端内联播放。默认：true。
preloadmetadata（仅加载信息）、none（节省带宽）或 auto（预加载更多）。默认：metadata。
start可选的开始时间（秒）。
end可选的结束时间（秒）。
ratio为播放器预留的宽高比。支持 16/9、4/3、1/1 或自定义 W/H。默认：16/9。
fit视频在比例中的适配方式：contain（不裁切）、cover（裁切填满）、fill（拉伸）。默认：contain。

如果浏览器无法播放视频，播放器会显示一段简短的英文提示并提供下载链接。

示例：

{{< video
    src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
    caption="**公有领域演示** — CC0 视频与封面。"
    loop=true
    muted=true
>}}
公有领域演示 — CC0 视频与封面。




Youtube 嵌入播放器
#

使用 lite-youtube-embed 库嵌入 YouTube 视频的简码。该库是 YouTube 嵌入播放器的轻量级替代品，其设计速度更快、更高效。

参数功能
id[String] 要嵌入的 YouTube 视频 ID。
label[String] 视频的标签

例1:

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
部署教程 - 这篇文章属于一个选集。
§ 1: 欢迎来到 Blowfish
§ 2: 安装和配置
§ 3: 入门指南
§ 4: 配置
§ 5: 主页布局
§ 6: 缩略图
§ 7: Front Matter(文件头信息)
§ 8: 本文
§ 9: 局部模板(Partials)
§ 10: 多创作者模式
§ 11: 系列
§ 12: 内容示例
§ 13: 进阶自定义
§ 14: 托管和部署
§ 15: Firebase: 阅读量 & 点赞量

相关文章