hugo 增加 bilibili 视频播放功能

直接在markdown文章中插入HTML代码以自定义页面元素，往往会导致无法识别。Hugo对此的解决方案是短代码（shortcodes）。

我们平时使用这类静态网站构建工具时，编辑的文档是markdown格式的，但是最后渲染是html格式。虽然markdown便于书写和预览，可我们向网页中添加元素也不如纯html方便了。

而短代码，就是为了解决这个问题而生的。

当你在markdown中插入一段短代码，hugo构建时会自动搜寻对应文件夹下的模板，将关键字改写之后自动插入生成的网页中。

只需要提前配置好模板，几乎可以方便的插入任何元素。此外，许多主题实际已经内置了许多模板，只要调用即可。

模板

在 md 文件中嵌入 ShortCodes 时，程序会先查找你的项目的根目录下的 /layouts/shortcodes 文件夹下的模板文件，再查找 theme 对应主题目录下的 /layouts/shortcodes 文件夹。

推荐先看一下主题里面有什么，比如stack主题内置了B站、腾讯、油管、视频四个短代码。我想要插入的时候直接调用即可。

如果主题里面没有你想要的，也可以自己新建。

例如bilibili短代码，体现为在/layouts/shortcodes目录下的一个bilibili.html文件，内容为:

{{ $vid := (.Get 0) }}
{{ $videopage := default 1 (.Get 1) }}
{{ $basicQuery := querify "page" $videopage "high_quality" 1 "as_wide" 1 }}
{{ $videoQuery := "" }}

{{ if strings.HasPrefix (lower $vid) "av" }}
    {{ $videoQuery = querify "aid" (strings.TrimPrefix "av" (lower $vid)) }}
{{ else if strings.HasPrefix (lower $vid) "bv" }}
    {{ $videoQuery = querify "bvid" $vid }}
{{ else }}
    <p>Bilibili 视频av号或BV号错误！请检查视频av号或BV号是否正确</p>
    <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
{{ end }}

<div class="video-wrapper">
    <iframe src="https://player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
            scrolling="no"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
    >
    </iframe>
</div>

调用

在markdown文件里调用短代码也非常方便。只需给定几个参量。例如调用bilibili:

这里的 bv 号就是 b 站链接中的代码https://www.bilibili.com/video/BV1dJ4m1p7Vh/

模板#

调用#

模板

调用