DEMO

提示：若无法播放以下内嵌视频，请注意系统代理的使用是否正确。

YouTube

插入视频：https://www.youtube.com/watch?v=vmkRMvhCW5c

1

\{\{< youtube vmkRMvhCW5c >}}

本地视频

插入视频：./minor-Shiru-Chen.mp4

1

\{\{< video src="./minor-Shiru-Chen.mp4" >}}

哔哩哔哩

插入视频：https://www.bilibili.com/video/BV1vs41197Fh?

1

\{\{< bilibili BV1vs41197Fh >}}

腾讯视频

插入视频：https://v.qq.com/x/page/y00408t8246.html

1

\{\{< tencent y00408t8246 >}}

西瓜视频

搜狐视频

优酷视频

Shortcodes

WHAT Shortcode

What a Shortcode is

shortcode 短码调用，您的博客文章中被“特殊标注”的内容将被 Hugo 识别转义。

通常，我们将 shortcode 技术用于“内联搜索”的应用场景，换句话说， shortcode 允许您在博客正文的任意位置嵌入可直接播放的媒体资源。

也许您曾留意到，Hugo文档中经常出现类似的应用案例。

WHY Shortcode

您可以通过 shortcode 在文章的合适位置插入媒体资源用以增加信息浓度，提高内容的可读性。

HOW Shortcode

How it works?

How to use the build-in shortcode of Hugo？

Use Shortcode

1. 在您的 Markdown 文章中使用如下格式的短码调用, 其内容将被 Hugo 识别为shortcode

1

\{\{< yourShortcodeName [params] >}}

2. 在您的站点根目录下新建./layouts/shortcodes/yourShortcodeName.html，编写这个文件

   此时，您在此.html中编辑的语法内容将被 Markdown 容器接受并被 Hugo kernel 渲染输出体现在您的调试网页上。

   若您暂时不知道该写点什么，不必担心，Stack 默认提供了几种可靠的短码调用策略。它们默认存储在./themes/hugo-theme-stack/layouts/shortcodes中，根据 Hugo 模板调用的优先顺序，当您的根目录下的 ./layourts/shortcodes/并不存在有效同名项目时，Stack 提供的默认策略将生效。

注意：一般情况下，\{\{< >}} 标识符（此处加了反斜杠防止转义）中的 yourShortcodeName 需要与您所指定的位于./layouts/shortcodes/或./themes/hugo-theme-stack/layouts/shortcodes下的.html文件名一致。

例如指定 ./layouts/shortcodes/youtube.html，那么合适的调用格式是 \{\{< youtube >}}，后面的[params]则根据具体的shortcode接口内容而定。

How to use the custom shortcode of Stack

例如实现业内插入 Youtube 来源视频，假设如下 Markdown 内容为您的一篇博客正文，若您正处于 hugo server 本地调试模式，可直接复制挪用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

> 这是写在你的 Markdown 正文中的内容哟~

## Example 1

- 插入视频：`https://www.youtube.com/watch?v=MpYy6wwqxoo`
- 接受参数视频 ID,可能网址很长,但只需要复制**键值对** `v=` 后面的内容，如：

\{\{< youtube MpYy6wwqxoo >}}

## Example 2

- 插入视频：`https://www.youtube.com/watch?v=XRGquU0ZJok&list=PLvOO0btloRnsiqM72G4Uid0UWljikENlU&index=6`
- 这是一个分 p 的视频列表，链接中写明了这个`List ID` ,以及这个"视频"在列表中的位置序号 `index` 
但此处我们一次性只能插入一个视频，所以依然是只需要复制**键值对** `v=` 后面的内容，如：

\{\{< youtube XRGquU0ZJok >}}

Shortcode API

上文简要介绍了如何在 Markdown 正文中利用 shortcode 内嵌 Youtube 视频资源，除此之外，Hugo 内置了许多的shortcode 模板文件。

以下是本主题提供的其他短码调用模板，其标准引用方法如下文所示。

注意: 所有 Examples 标注的内容都是写在你要提交（post）的 blog-Markdown 中的。

目前，本主题支持如下类型的媒体资源内嵌方案：

• 哔哩哔哩
• 腾讯视频
• 本地视频
• YouTube

Bilibili

在博文中插入哔哩哔哩媒体资源。

Shortcode Format

1
2

\{\{< bilibili AV号或BV号 >}}
\{\{< bilibili AV号或BV号 分P号 >}}

Examples

插入资源： https://www.bilibili.com/video/BV1Sf4y1n75U?p=1

在 bilibili 的规则中，同一 List 下的分 P 视频的 BV 号都是一样的，通过 params: p 来区分不同的视频

1
2
3

\{\{< bilibili BV1Sf4y1n75U 1 >}}

\{\{< bilibili BV1Sf4y1n75U 2 >}}

插入资源：https://www.bilibili.com/video/BV1Yv41147QK

1
2

<!-- just video src -->
\{\{< bilibili BV1Yv41147QK >}}

Tencent

在博文中插入腾讯视频媒体资源。

Shortcode Format

Examples

插入资源：https://v.qq.com/x/page/b31563j0jqw.html

1
2

<!-- just video src -->
\{\{< tencent  b31563j0jqw >}}

Video

在博文中插入本地(.mp4)视频文件。

Shortcode Format

Examples

插入资源：与本篇博文放置在同一目录下的视频文件./video.mp4

1
2
3
4
5

<!-- just video src -->
\{\{< video "./video.mp4">}}

<!-- Other option -->
\{\{< video src="./video.mp4" autoplay="true" poster="./video-poster.png" >}}

Youtube

在博文中插入 YouTube 媒体资源。

Shortcode Format

Examples

插入资源：https://www.youtube.com/watch?v=jflq6vNcZyA

1
2
3
4
5

<!-- just video src -->
\{\{< youtube jflq6vNcZyA >}}

<!-- Other option -->
\{\{< youtube id="jflq6vNcZyA" autoplay="false" >}}

Conclusion

Reference

• Shortcodes | Hugo (gohugo.io)

• Shortcodes | Hugo 主题 Stack (jimmycai.com)