如何在hugo生成的网页中插入嵌入式视频

Last updated on 2022年8月31日 3 min read

缘起

hugo从0.60版本起，将之前的markdown解析器从blackfriday改为goldmark。从网上的介绍文章来看，似乎goldmark的可扩展性更好。而对于我来讲，最大的一个问题是，goldmark不支持在markdown中直接写html。造成最大的问题就是没有办法直接在markdown中插入内嵌html的视频了。

解决办法一：继续让markdown中可以插入html

网上看到的操作方法有两种，一种是通过修改配置文件，将解析器依旧设置回blackfriday.

另一种方法是打开goldmark中的unsafe模式，使goldmark支持raw html.

由于我认为既然hugo已经放弃了这种方式，那么还是顺应吧，所以我并没有使用这些方式

解决方法二：使用shortcode方式

在Hugo的官方文档中；https://gohugo.io/content-management/shortcodes/#what-a-shortcode-is 说到了，为了保持markdown的简洁性，shortcode这种方式是特别适合来实现页面内嵌视频的html实现的。

个人理解，shortcode就是将一段复杂的代码预先定义，然后在markdown中引用，在解析时自动根据预先定义的代码进行扩展。

shorcode的定义

shortcode定义的代码有两个地方可以存储，Hugo模板的查找顺序是

/layouts/shortcodes/<SHORTCODE>.html /themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html

个人认为，肯定是不存在在主题文件中更合理些。也就是存在第一个位置就可以了。

假设我要插入的是bilibil的内嵌视频，那么我定义一个bilibili的shortcode，在上面的目录中新建一个 bilibili.html 内容：

<div style="position:relative; padding-bottom:75%; width:100%; height:0">

<iframe
	src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&as_wide=1&high_quality=1"
	scrolling="no"
	border="0"
	frameborder="no"
	framespacing="0"
	allowfullscreen="true"
	style="position:absolute; height: 100%; width: 100%;"
>
</iframe>
</div>

内容是网上借鉴了其它网友的贡献，原理是点击B站视频中的分享按钮后，可以得到html嵌入代码，上面shortcode就是根据这段嵌入代码修改出来的，因此其它视频网站也可以参照修改。

其中的一些参数从字面上大概也能理解，比如 &high_quality=1 表示默认高质量视频， allowfullscreen="true" 允许全屏。

shortcode使用

有了上述的定义后，就可以直接在markdown中使用了，如：

={{< bilibili BV号 >}}= 或 ={{< bilibili BV号 选集号 >}}=

就可以直接使用了。示例：

Bonus 在org-mode配合ox-hugo模式下的使用

只有使用 Emacs org mode配合 ox-hugo 才需要看下面的内容。

org-mode中是不支持 {{< >}} 这种内容的

https://ox-hugo.scripter.co/doc/shortcodes/

先说简单的方法：

#+hugo: {{< bilibili BV1m4411c7ia >}}

还有一种复杂的方法：不推荐，在这里主要是为了记录一下

  1. 如果使用这种模式的话，在定义必须要在shortcode里第2行，也就是div下一行加一个 {{ .Inner }}
  2. 需要在文件头上定义shortcode的关键字， +hugo_paired_shortcodes: bilibili
  3. 使用
#+attr_shortcode: BVcode

#+begin_bilibili

#+end_bilibili

注意：一定要保持那个空行。 这样导出的结果是

{{< bilibili BVcode>}}

{{< /bilibili >}}
hugo
海上一民工

Related