This page looks best with JavaScript enabled

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

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

效果

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

写在之前

本篇将讲述如何在你的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
danmaku 是否开启弹幕,1: 开启(默认), 0: 关闭

Outlook

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

参考文献:

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


  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