简码 · Jim Deng

部署教程 - 这篇文章属于一个选集。

§ 8: 本文

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

醒目框
#

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

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

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

排布画册
#

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

GitHub 卡片
#

github 允许您快速链接到 github Repo，同时显示和更新有关它的实时统计信息，例如它的 star 和 fork 数。

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

例1:

{{< github repo="nunocoracao/blowfish" >}}

nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML

2626

683

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 an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider.

5921

11858

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

2569

5.3047036e+07

示例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 Dataset Structure… See the full description on the dataset page: https://huggingface.co/datasets/stanfordnlp/imdb.

dataset

362

91031

图标
#

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

例如：

{{< icon "github" >}}

Output:

图标使用 Hugo Pipeline 填充，这使得它们非常灵活。 Blowfish 包含许多用于社交、链接和其他内置图标

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

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 >}}

欢迎来到 Blowfish

3 分钟· loading

新手文档

例 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。

例如：

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]

色板
#

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 >}}

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 & Blog Theme for Hugo

HTML

2626

683

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 说明文字，显示在视频下方。
`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`。

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

示例：

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

§ 8: 本文

§ 10: 多创作者模式

§ 11: 系列

简码

醒目框
#

排布画册
#

Gist
#

Gitea 卡片
#

GitHub 卡片
#

GitLab 卡片
#

Hugging Face 卡片
#

图标
#

KaTeX
#

重点突出
#

开篇语
#

列表
#

最近的文章

欢迎来到 Blowfish

Samples

文字书写方向
#

Markdown 导入
#

Mermaid
#

色板
#

Tabs
#

时间线
#

header

badge test

subheader

Another Awesome Header

date - present

Awesome Subheader

Shortcodes

AWESOME

Another Awesome Header

TypeIt
#

Video
#

Youtube 嵌入播放器
#

相关文章

醒目框 #

排布画册 #

Gist #

Gitea 卡片 #

GitHub 卡片 #

GitLab 卡片 #

Hugging Face 卡片 #

图标 #

KaTeX #

重点突出 #

开篇语 #

列表 #

最近的文章

Samples

文字书写方向 #

Markdown 导入 #

Mermaid #

色板 #

Tabs #

时间线 #

header

badge test

subheader

Another Awesome Header

date - present

Awesome Subheader

Shortcodes

AWESOME

Another Awesome Header

TypeIt #

Video #

Youtube 嵌入播放器 #

相关文章

醒目框
#

排布画册
#

Gist
#

Gitea 卡片
#

GitHub 卡片
#

GitLab 卡片
#

Hugging Face 卡片
#

图标
#

KaTeX
#

重点突出
#

开篇语
#

列表
#

文字书写方向
#

Markdown 导入
#

Mermaid
#

色板
#

Tabs
#

时间线
#

TypeIt
#

Video
#

Youtube 嵌入播放器
#