在 gohugo 中如何嵌入视频

gohugo 提供了 shortcodes 机制，可以在 markdown 内容文件来插入 html模板 或间接引用 hugo 模板。正是通过这种方式，来实现在 gohugo 中插入视频，内置有 vimeo、youtube 的例子。这些视频分享站在国外并不能正常访问，国内用户如果想通过 gohugo 建立带有视频分享的内容页面怎么办？可以选择 西瓜视频、bilibili 等国内主流视频网站做视频源，并把视频链接插入到内容中。

gohugo 中实现视频插入 #

让我们来看看 gohugo 中是如何来支持 vimeo、youtube 的？

vimeo，内置模板在 hugo 源代码库中，tpl/tplimpl/embedded/templates/shortcodes/vimeo.html。

<div {{ if .Get "class" }}class="{{ .Get "class" }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
  <iframe src="https://player.vimeo.com/video/{{ .Get "id" }}{{- if $pc.EnableDNT -}}?dnt=1{{- end -}}" {{ if not (.Get "class") }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}{{ if .Get "title"}}title="{{ .Get "title" }}"{{ else }}title="vimeo video"{{ end }} webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

youtube，模板位于 hugo 源码库 tpl/tplimpl/embedded/templates/shortcodes/youtube.html。

{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
{{- if not $pc.Disable -}}
{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
{{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) -}}
{{- $title := .Get "title" | default "YouTube Video" }}
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
  <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
</div>
{{ end -}}

把上面的两段模板代码简化之后，核心模板如下：

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="视频地址url" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"></iframe>
</div>

上面的 56.25%，就是 9:16，或者 720:1280

好眼熟，跟今日有悟的文章《[ 优雅的实现 iframe 高宽度自适应 ](/skill/web/how-to-make-the-iframe-responsive/》中提到的方法非常接近。

是的，如果没有上谷歌搜索找方法而是看了 hugo 中的实现，我会直接套用。

插入西瓜视频或 bilibili 的视频 #

西瓜视频的 html 模板

{{ $id := .Get "id" }}
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="https://www.ixigua.com/iframe/{{ $id }}?autoplay=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" referrerpolicy="unsafe-url" allowfullscreen></iframe>
</div>

从西瓜视频的标准路径（https://www.ixigua.com/这串长长的数字就是视频 ID）获取视频 id。

bilibili的 html 模板

{{ $id := .Get "id" }}
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="//player.bilibili.com/player.html?&bvid={{ $id }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

从bilibili视频的标准路径（https://www.bilibili.com/video/这串长长的字符串就是视频 ID）获取视频 id。

插入方法 #

上面已经分析了嵌入视频需要的 html模板，那么将 html 插入 markdown 内容中有两种方法：

使用 shortcodes
直接在 markdown 中添加 html 片段

下面以插入西瓜视频为例。

shortcodes 方式 #

在 themes/名称/layouts/shortcodes 或 layouts/shortcodes 目录中添加一个 html 模板，比如 xigua.html，粘贴上面的html模板并保存。在 markdown 内容文件中使用代码 <xigua id="视频 ID"> 插入。非常简单。

使用 html 片段 #

在 markdown 文件中粘贴上面的 html 模板，把其中的 {{ $id }} 改为实际的视频 id。 gohugo 使用的 markdown 解析器 goldmark 默认不解析 html，需要在站点配置文件中配置 unsafe = true，这样 markdown 中的 html 片段才能被当成 html 合并渲染出来。

需要配置的内容大致如下：

# config.toml
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true