文档 on Hugo 主题 Stack

短代码

Mon, 26 Jan 2026 00:00:00 +0000

Stack 主题还提供了一些自定义短代码来增强你的内容。

引用 (Quote)

quote 短代码允许你显示带有作者、来源和 URL 的引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
― 一位名人, 他们写的书

用法

1
2
3

{{< quote author="作者名字" source="文章标题" url="https://example.com" >}}
这里是引用内容。
{{< /quote >}}

视频 (Video)

video 短代码允许你嵌入自托管或远程视频文件。

Your browser doesn't support HTML5 video. Here is a link to the video instead.

用法

`1`	`{{< video src="https://example.com/video.mp4" >}}`

Bilibili

嵌入来自 Bilibili 的视频。支持 av 和 bv 号。

用法

`1`	`{{< bilibili "BV1634y1t7xR" >}}`

YouTube

Hugo 内置的 YouTube 短代码。

用法

`1`	`{{< youtube ZJthWmvUzzc >}}`

腾讯视频 (Tencent Video)

嵌入来自腾讯视频的视频。

用法

`1`	`{{< tencent "u00306ng962" >}}`

GitLab Snippet

嵌入来自 GitLab 的代码片段。

用法

`1`	`{{< gitlab 2349278 >}}`

图表 (Diagrams)

Stack 出箱即用地支持 Mermaid 图表。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

用法

将你的 Mermaid 代码包裹在语言设置为 mermaid 的代码块中。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

相册

Mon, 26 Jan 2026 00:00:00 +0000

Stack 主题内置了对相册的支持。你只需要简单地将多张图片并排放置，就可以创建一个精美的相册。

示例相册

它是如何工作的

相册由 Photoswipe 和一个自定义的内部脚本驱动。它会根据图片的宽高比自动计算出最佳布局。

要创建一个相册，你只需要将多张图片放在同一行（或同一个段落）中。

语法

1
2
3

![图片 1](image1.jpg)  ![图片 2](image2.jpg) 

![图片 3](image3.jpg)  ![图片 4](image4.jpg)

注意: 图片之间应该有两个空格，以确保它们在 Markdown 中保持在同一行。

相册语法启发自 Typlog

Markdown 语法指南

Sun, 25 Jan 2026 00:00:00 +0000

这篇文章提供了可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，同时也展示了 Hugo 主题中基本 HTML 元素是否应用了 CSS 装饰。

标题 (Headings)

以下 HTML <h1>—<h6> 元素代表了六个级别的章节标题。<h1> 是最高级别，而 <h6> 是最低级别。

H3

H4

H5

H6

段落 (Paragraph)

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

引用 (Blockquotes)

引用元素代表从另一个来源引用的内容，可以选择带有引用说明（必须在 footer 或 cite 元素内），也可以选择带有行内更改（如注释和缩写）。

不带出处的引用

Tiam, ad mint andaepu dandae nostion secatur sequo quae. 注意：你可以在引用中使用 Markdown 语法。

带有出处的引用

不要通过共享内存来通信，而要通过通信来共享内存。
— Rob Pike¹

带提示的引用

📝 备注

突出显示用户在快速浏览时也应注意的信息。

💡 提示

可选信息，帮助用户更顺利地完成任务。

📌 重要

用户成功所必需的关键信息。

⚠️ 警告

由于潜在风险而需要用户立即关注的关键内容。

🚨 注意

某个操作可能带来的负面后果。

📝 自定义标题

如果你想使用自定义标题，可以在方括号后面添加标题文本，如上所示。

表格 (Tables)

表格虽然不是 Markdown 核心规范的一部分，但 Hugo 出箱即用地支持它们。

姓名	年龄
Bob	27
Alice	23

表格内的行内 Markdown

斜体	加粗	代码
italics	bold	`code`

A	B	C	D	E	F
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex.	Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus	Proin sit amet velit nec enim imperdiet vehicula.	Ut bibendum vestibulum quam, eu egestas turpis gravida nec	Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien

代码块 (Code Blocks)

使用反引号的代码块

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

使用四个空格缩进的代码块

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Diff 代码块

[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

单行代码块

`1`	`<p>A paragraph</p>`

列表类型 (List Types)

有序列表

第一项
第二项
第三项

无序列表

列表项
另一项
还有一项

嵌套列表

水果
- 苹果
- 橘子
- 香蕉
乳制品
- 牛奶
- 奶酪

其他元素 — abbr, sub, sup, kbd, mark

GIF 是一种位图图像格式。

H₂O

Xⁿ + Yⁿ = Zⁿ

按 CTRL + ALT + Delete 结束会话。

大多数蝾螈是夜行性的，捕食昆虫、蠕虫和其他小型生物。

以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的演讲。 ↩︎

数学公式

Sat, 24 Jan 2026 00:00:00 +0000

Stack 主题支持使用 KaTeX 渲染数学公式。

启用 KaTeX

按页面启用

要在特定文章中启用 KaTeX，请在文章的前置参数（frontmatter）中包含 math: true：

---
title: "我的数学文章"
math: true
---

全局启用

要为所有文章启用 KaTeX，请在网站配置（params.yaml 或 params.toml）中将 article.math 设置为 true：

1
2

article:
    math: true

示例

行内公式

你可以通过将表达式包裹在单个美元符号 $ 中来包含行内公式。

例如： $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $ 将渲染为 $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $

块级公式

对于较大的方程式，请使用双美元符号 $$ 创建数学块。

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

更复杂的公式

$$ f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz $$

注意： 有关受支持的 TeX 函数的完整列表，请参阅 KaTeX 文档。