有时，文章中需要添加视频作为演示内容，而 hugo 默认不支持展示视频。虽然可以使用工具将其转换为 GIF 或者WEBP，但会增加文件大小或者降低画质。好在 hugo 可以使用 shortcodes 来支持视频

添加模板

在主题目录或项目目录下的 layouts/shortcodes 创建 video.html 文件，向文件中添加下面代码

{{- $src := .Get "src" | default (.Get 0) -}}
<div class="video-wrapper">
    <video src="{{- $src -}}" autoplay="true" loop="true" muted="true" playsinline="true" loading="lazy" controls="true">
        <p>
            Your browser doesn't support HTML5 video. Here is a
            <a href="{{- $src -}}">link to the video</a> instead.
        </p>
    </video>
</div>

完整语法较为复杂，这里简单介绍如何获取参数。主要分成两种情况：

  1. 有属性名时，使用属性名读取： .Get "src" ；
  2. 没有属性名时，通过索引获取：.Get 0。

这样文章才能既支持有属性名 src，又支持没有属性名两种写法。

嵌入文章

在文章中使用下面代码嵌入视频

{{< video "/input.mov" >}}
或者
{{< video src="/input.mov" >}}

类似于 html 语言中的标签语法，取决语模板文件中的代码如何编写

  1. 固定格式：{{}}，代表在当前位置嵌入 shortcode
  2. 标签名：<video>，其中 video 为模板名
  3. 参数：可以添加属性名，也可以不添加 "/input.mov"、src="/input.mov"

如果需要在文章中直接显示源码，可以在标签中添加 /**/。完整写法：

{{</* video src="/input.mov" */>}}
// 显示注释
{{</*/* video src="/input.mov" */*/>}}

参考

  1. shortcodes template