Hugo 短代码（Shortcode）是一种特殊的标签，可以在 Markdown 中插入复杂功能而无需编写 HTML。极简主题提供了多个自定义短代码，并支持 Hugo 内置短代码。

主题自定义短代码

1. bilibili - 哔哩哔哩视频

插入 B 站视频，告别冗长的 iframe 代码。

基本用法

1

{{< bilibili bvid="BV1E24y117L4" >}}

效果：

完整参数

1

{{< bilibili bvid="BV号" page="分P" autoplay="是否自动播放" >}}
参数 类型 必填 默认值 说明
bvid string ✅ - 视频BV号
page int ❌ 1 分P序号
autoplay int ❌ 0 是否自动播放（0=否，1=是）

多分P示例

1

{{< bilibili bvid="BV1E24y117L4" page="2" >}}

自动播放示例

1

{{< bilibili bvid="BV1E24y117L4" autoplay="1" >}}

2. collapse - 折叠内容

创建可折叠展开的内容区块，适合放置长段代码或补充说明。

基本用法

1
2
3
4
5
6

{{< collapse summary="点击展开查看详情" >}}
这里是被折叠的内容，支持 **Markdown** 格式。

- 列表项 1
- 列表项 2
{{< /collapse >}}

效果：

点击展开查看详情

这里是被折叠的内容，支持 Markdown 格式。

  • 列表项 1
  • 列表项 2

参数说明

参数 类型 必填 默认值 说明
summary string ❌ “展开内容” 折叠区标题文本

3. figure - 图片展示

增强的图片展示，支持标题、链接和来源说明。

基本用法

1
2
3
4
5

{{< figure
  src="/img/immmo-avatar-512x512px.png"
  alt="示例图片"
  caption="这是图片说明"
>}}

效果：

示例图片

这是一张示例图片 来源：示例网站

完整参数

1
2
3
4
5
6
7
8
9

{{< figure
  src="图片路径"
  alt="替代文本"
  caption="图片说明"
  link="点击跳转链接"
  attr="来源说明"
  attrlink="来源链接"
  target="打开方式"
>}}
参数 类型 必填 默认值 说明
src string ✅ - 图片路径
alt string ❌ "" 替代文本（无障碍）
caption string ❌ "" 图片下方说明文字
link string ❌ "" 点击图片跳转的链接
attr string ❌ "" 图片来源说明
attrlink string ❌ "" 来源链接
target string ❌ “_blank” 链接打开方式

4. inTextImg - 内联图片

在文本行内插入小图标或装饰图片。

基本用法

1

这是一段文本，中间插入图标 {{< inTextImg url="/img/favicon-immmo-logo.svg" height="20" >}} 然后继续文本。

效果：

这是一段文本，中间插入图标 图标 然后继续文本内容。

参数说明

参数 类型 必填 默认值 说明
url string ✅ - 图片路径
height string ❌ “auto” 图片高度（像素或CSS值）
alt string ❌ "" 替代文本

5. rawhtml - 原始 HTML

直接插入 HTML 代码，不被 Markdown 解析器处理。

基本用法

1
2
3
4
5

{{< rawhtml >}}
<div style="background: #f0f0f0; padding: 15px; border-radius: 5px; border-left: 4px solid #2196F3;">
  <p>这是自定义 <strong>HTML</strong> 区块</p>
</div>
{{< /rawhtml >}}

效果：

这是自定义 HTML 区块

使用场景

  • 插入自定义表单
  • 添加特殊样式的内容区块
  • 嵌入第三方小部件

6. vertical - 古文竖排

将中文古文内容以传统竖排方式展示，从右向左阅读。

基本用法

1
2
3
4
5
6
7
8
9

{{< vertical md="true" >}}
**《静夜思》**
*李白*

床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
{{< /vertical >}}

效果：

《静夜思》 李白

床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。

参数说明

参数 类型 必填 默认值 说明
md bool ❌ false 是否解析 Markdown 格式

完整示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{{< vertical md="true" >}}
**《水调歌头·明月几时有》**
*苏轼*

*丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。*

明月几时有，把酒问青天。

不知天上宫阙，今夕是何年。

我欲乘风归去，又恐琼楼玉宇，高处不胜寒。

起舞弄清影，何似在人间。

转朱阁，低绮户，照无眠。

不应有恨，何事长向别时圆？

人有悲欢离合，月有阴晴圆缺，此事古难全。

但愿人长久，千里共婵娟。
{{< /vertical >}}

Hugo 内置短代码

highlight - 代码高亮

支持语法高亮的代码块，带行号和行高亮。

基本用法

1
2
3
4
5
6
7
8
9

{{< highlight go >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
{{< /highlight >}}

带行号和行高亮

1
2
3
4
5
6
7
8
9

{{< highlight go "linenos=table,hl_lines=1 3,linenostart=1" >}}
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
{{< /highlight >}}

效果：

1
2
3
4
5
6
7

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

参数说明

  • linenos=table - 以表格形式显示行号
  • hl_lines="1 3" - 高亮第 1 和第 3 行
  • linenostart=1 - 行号起始值

短代码使用技巧

嵌套使用

部分短代码支持嵌套：

1
2
3
4
5
6

{{< collapse summary="查看代码示例" >}}
{{< highlight python >}}
def hello():
    print("Hello, World!")
{{< /highlight >}}
{{< /collapse >}}

转义短代码

如果需要在文档中展示短代码语法而不执行，使用注释符号：

1
2

{{< shortcode >}}  <!-- 会被当作文本显示 -->
{{< shortcode >}}  <!-- 如果不转义会被执行 -->

与 Markdown 混用

短代码可以与 Markdown 格式混合使用：

1
2
3
4
5

这是普通段落。

{{< figure src="/img/photo.jpg" caption="照片说明" >}}

继续普通段落，支持 **加粗** 和 *斜体*。

短代码速查表

短代码 功能 必填参数 适用场景
bilibili B站视频 bvid 嵌入视频教程
collapse 折叠内容 - 长代码、补充说明
figure 图片展示 src 图片展示带说明
inTextImg 内联图片 url 行内小图标
rawhtml 原始HTML - 自定义HTML
vertical 竖排文字 - 古诗词展示
highlight 代码高亮 语言 代码展示

相关文档

通过灵活运用短代码，可以大幅增强文章的表现力和互动性！