This page looks best with JavaScript enabled

使用Shortcodes在Hugo博客中优雅的嵌入B站视频

 ·  ☕ 4 min read  ·  🔮 Yu · 👀... views

效果

默认720P 关闭弹幕 适应屏幕大小

写在之前

本篇将讲述如何在你的Hugo博客中嵌入B站视频。

在我的一篇博客中1，我已经介绍了如何在Hugo博客中嵌入B站视频，当时我们是更改了Hugo主题的main.scss文件，在其中加入了以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
  }
  
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

然后复制出B站给我们的嵌入代码中的链接，最后在md文件要嵌入的位置加入以下HTML代码：

1
2
3

<div align=center class="aspect-ratio">
<iframe src="https://player.bilibili.com/player.html?aid=9953207&cid=32633421&page=1c" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

是不是感觉有一点Low和ugly？是的，我也是这么想的，我们更改了主题的文件，可能会影响每次更新主题时的git pull，并且还得每次都得在md里面写一堆HTML代码

缘起

看到了zzo主题的示例网站2，看到人家里面居然拥有窗口自适应的Youtube嵌入视频，赶紧打开zzo主题下的examplesite对应的md文件瞅一眼，发现人家只写了

1

{{< youtube ZJthWmvUzzc >}}

Shortcodes

原来，人家是使用了Shortcodes3，Shortcodes类似于一种标记，Hugo会在生成网站时使用对应的HTML模板替换该位置的Shortcodes代码，然后再生成真正的网站。

Shortcodes也是Hugo官方深感插入类似视频的东西时，在md文件中写HTML的蛋疼之处。

那么，这个HTML模板文件在哪呢？此文件应该已经被Hugo内置，我们找不到它。但是在themes\zzo\layouts\shortcodes文件夹下，还有很多主题作者为我们准备的shortcodes模板。官网4上给出了Youtube对应的模板，让我们看看这个Youtube对应的模板是什么样子的。

输入：

1

{{< youtube 09jf3ow9jfw >}}

HTML模板：

1
2
3
4

<div class="embed video-player">
<iframe class="youtube-player" type="text/html" width="640" height="385" src="https://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
</iframe>
</div>

输出：

1
2
3
4
5
6
7

<div class="embed video-player">
    <iframe class="youtube-player" type="text/html"
        width="640" height="385"
        src="https://www.youtube.com/embed/09jf3ow9jfw"
        allowfullscreen frameborder="0">
    </iframe>
</div>

可以看到/layouts/shortcodes/youtube.html中的{{ index .Params 0 }}即为我们在md文件写Shortcodes时传入的参数，其将与https://www.youtube.com/embed/共同组成一个完整的视频链接地址。

使用Shortcodes嵌入B站视频

那么我们要做的的就简单了。只需要把我们之前的CSS和HTML代码做出模板，在md文件中直接写Shortcodes，Shortcodes里面写个AV号当参数传递进去就好了！

5

Hugo模板的查找顺序

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

生成网站时，本地的Shortcodes文件夹优先级更高，也就是我们只需要在放入root_of_my_site/layouts/shortcodes/下放入模板文件就好了，不必在破坏主题文件布局。

注意你写的Shortcodes前面的名字必须要和模板文件名一致，举例：
your shourcodes:{{< name some_parm >}}
you html:name.html

输入：

1

{{< bilibili 9953207 >}}

HTML模板：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<style>
.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    }
      
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }
</style>
      

<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid={{ index .Params 0 }}&&page=1&as_wide=1&high_quality=1&danmaku=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
    </iframe>
</div>

PS

aid为视频的av号，但是每个av号下不一定只有1p，所以B站用cid来管理视频的真正id，那么也可以说如果视频只有1p，那么cid就无用了，我测试直接整个删掉也是可以的。

比如说：
https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0

key 说明
aid B站AV号
cid 应该是客户端id, clientId 的缩写(推测的, 不一定准确)，经过测试, 这个字段不填也没关系
page 第几个视频, 起始下标为 1 (默认值也是为1)，即我们通常说的几P
as_wide 是否宽屏 1: 宽屏, 0: 小屏
high_quality 是否高清。 1: 高清, 0: 最低视频质量(默认)。如视频有 360p 720p 1080p 三种, 默认是最低 360p, 目前外链最高是480P
danmaku 是否开启弹幕，1: 开启(默认), 0: 关闭

Outlook

有时Bilibili给我们的嵌入链接不太一样，但是好像还能用？如果求稳，可以直接传入链接给我们的Shortcodes！

更新

  • 2020年11月3日 high_quality=1最高也只能默认开启480P画质，其他需要手动选择
  • 2021年5月29日 上面说的又变成720P了

有参考：

点击链接末尾的回车符可以跳转回引用处~

  1. Hugo使用Tips – Yu’s Blog 访问日期 2020年3月24日
    https://blog.iyu.icu/posts/hugos_tips/#%E5%B5%8C%E5%85%A5b%E7%AB%99%E8%A7%86%E9%A2%91 ↩︎

  2. Rich Content – Hugo Zzo Theme 访问日期 2020年3月24日
    https://themes.gohugo.io//theme/hugo-theme-zzo/en/posts/rich-content/ ↩︎

  3. Shortcodes | Hugo 访问日期 2020年3月24日
    https://gohugo.io/content-management/shortcodes/ ↩︎

  4. Create Your Own Shortcodes | Hugo 访问日期 2020年3月24日
    https://gohugo.io/templates/shortcode-templates/#single-positional-example-youtube ↩︎

  5. Create Your Own Shortcodes | Hugo 访问日期 2020年3月24日
    https://gohugo.io/templates/shortcode-templates/ ↩︎

  6. 关于博客园内嵌入bilibili视频 - 王陸 - 博客园 访问日期 2020年3月26日
    https://www.cnblogs.com/wkfvawl/p/12268980.html ↩︎

Yu
WRITTEN BY
Yu
🎓 College Students 📐Physics 💾 Programmer

See Also