Hugo实现插入Bilibili的视频

前言

hugo博客想要插入视频，肯定是和图片一样的模式，先把视频上传到第三方视频网站（youtube、bilibili），然后通过嵌入代码的形式实现在博客内展示。

bilibili官网就提供了【嵌入代码】，但实测不是简单的直接复制粘贴就可以。

找到了两个方案，我实测以后，通过hugo的shortcodes功能实现的方式比较好，一劳永逸，而且也不用改安全设置。

我推荐方案一。

方案一：shortcodes

shortcodes方案原理类似创建代码模板，然后页面直接调用模板来实现视频嵌入。

在博客的根目录的layouts目录下新建shortcodes目录，然后新建文件bilibili.html。实际路径是/layouts/shortcodes/bilibili.html。

在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}}"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
        style="position:absolute; height: 100%; width: 100%;">
    </iframe>
</div> 

然后在博客的markdown文件的内容中插入视频：

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

到此，就实现在markdown/静态页面中嵌入视频代码了。

方案二：直接插入html代码

bilibili的每个视频下方的分享方式里都提供了嵌入代码，直接复制粘贴到markdown页面。

复制出来的代码如下：

<iframe 
    src="//player.bilibili.com/player.html?aid=530985056&bvid=BV1Gu411L7iR&cid=1197648479&page=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
</iframe>

但这段代码默认不会渲染成html，需要修改hugo的安全设置。

编辑config.toml（新的hugo版本配置文件应该是hugo.toml），添加如下内容。

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

现在就可以看到视频嵌入成功了。但是b站默认的视频嵌入代码可能展示的样式不太好看，可以参考方案一中的代码自行调整。

参考文章

1. youtube/vimeo/bilibili/西瓜的视频嵌入方式：【在 gohugo 中如何嵌入视频 】
2. bilibili的视频嵌入方式：【利用hugo的短代码功能插入b站视频并且自适应】