短代码演示 · Pocket Hugo

这篇页面汇总了几个很适合内容型 Hugo 主题使用的实用短代码。它们都尽量保持简单、容易复制，适合随笔、笔记和文档类页面。

Fold

当某一段内容不想一开始就占太多纵向空间时，可以使用 fold。

{{< fold "Why this shortcode exists" >}}
This hidden block is rendered inside a native `<details>` element.
{{< /fold >}}

Why this shortcode exists

这个隐藏区块会被渲染成原生的 <details> 元素，因此不依赖 JavaScript，也很适合长文阅读场景。

Note

note 适合用来放提示、警告或旁注。

{{< note type="info" title="Content-first" >}}
Pocket Hugo Theme keeps callouts readable without making them look like app UI.
{{< /note >}}

Content-first

Pocket Hugo Theme 会让这类提示块保持清晰易读，而不会看起来像一套应用界面组件。

Tip

这类短代码很适合教程、更新记录和写作指南。

Experimental

如果你要新增自定义短代码，尽量保持它们足够小、足够容易理解。读者不应该先研究布局，才能开始阅读内容。

Badge

Badge 适合在段落中放置简短的状态标签。

{{< badge "Stable" >}}
{{< badge text="Optional" type="info" >}}
{{< badge text="Experimental" type="warn" >}}

Stable Optional Experimental

Button

当你想要比普通文本链接更醒目的行内跳转入口时，可以使用 button。

{{< button href="/guide/" label="Open the Guide" >}}
{{< button href="/links/" label="Browse Links" style="ghost" >}}

Open the Guide Browse Links

Video and audio

这些短代码可以让常见的媒体嵌入方式和主题整体风格保持一致。

{{< video src="/media/demo.mp4" title="Local video" >}}Caption{{< /video >}}
{{< audio src="/media/demo.mp3" title="Audio clip" >}}Caption{{< /audio >}}
{{< youtube id="rdwz7QiG0lk" >}}YouTube embed{{< /youtube >}}
{{< bilibili bvid="BV1xx411c7mu" >}}Bilibili embed{{< /bilibili >}}

一个普通的 HTML5 视频包装，沿用主题默认的圆角和留白。

HTML5 audio

一个风格统一的音频播放器，适合短音频、播客片段或语音笔记。

使用同样媒体外壳包裹的 YouTube 嵌入。

使用相同响应式容器的 Bilibili 嵌入。

Timeline

当你想表达一个过程、更新记录或时间序列时，可以使用 timeline。

{{< timeline >}}
{{< timeline-item date="2026-01" title="Planning" >}}Outline the scope.{{< /timeline-item >}}
{{< timeline-item date="2026-02" title="Build" >}}Ship the first version.{{< /timeline-item >}}
{{< /timeline >}}

2026-01

Planning

先勾勒功能的第一版范围，并让数据格式保持精简。

2026-02

Build

做出一个简单实现，更偏向长文内容而不是应用式界面。

2026-03

Polish

继续打磨文案、留白和多语言示例。

Columns

当两组内容需要并排比较时，可以使用 columns。

{{< columns >}}
{{< column >}}Left side{{< /column >}}
{{< column >}}Right side{{< /column >}}
{{< /columns >}}

Better for

简短对比
功能摘要
前后变化说明

Avoid for

很长的文章段落
过深的嵌套列表
必须线性阅读的内容

Gallery

当一篇文章里需要一个紧凑的图片网格，而你又不想手写多张 Markdown 图片块时，可以使用 gallery。

{{< gallery pattern="sample*.webp" columns="3" >}}

这个短代码会读取当前页面 bundle 中匹配的图片文件，把它们渲染成响应式相册网格，并在点击时复用主题内置灯箱。

Why this matters

这些短代码并不是为了把主题变成一个组件库。它们的目的只是给写作者提供一些可复用的小积木，让内容更容易表达，同时又不需要引入额外框架。

目录