Featured image of post 『 Hugo 』Shortcode

『 Hugo 』Shortcode

在 Hugo 中添加内嵌视频

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] >}}
  1. 在您的站点根目录下新建./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 中的。

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


Bilibili

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

Shortcode Format

NameValueDescription
vidAV号 / BV号 [分P号]必填参数。(Type: String) 视频资源ID。
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

NameValueDescription
vid视频id必填参数。(Type: String) 视频资源ID。

Examples

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

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

Video

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

Shortcode Format

NameValueDescription
srcrelative paths必填参数。(Type: String) 视频文件(相对)路径。
autoplaytrue / false可选参数。(Type: String) 自动播放。
posterrelative paths可选参数。(Type: String) 视频封面(相对)路径。

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

NameValueDescription
idvideo id必填参数。(Type: String) 视频ID。
autoplaytrue / false可选参数。(Type: String) 进入页面后自动播放。

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

You will to enjoy grander sight / By climing to a greater height.
Built with Hugo
Theme Stack designed by Jimmy