Hugo 篇二：为 LoveIt 主题添加更多视频分享 shortcodes

2020-04-02 约 1195 字预计阅读 3 分钟

Hugo LoveIt 主题虽然支持了 bilibili 视频的插入，再加上 hugo 自带的 youtube 和 vimeo 视频，但是也还是有点少。没有国内视频三大巨头（优酷现在掉队有点严重，可能名不副实了）似乎有些遗憾。又加上最近 B 站去 av 化，正好看到 LoveIt 项目的 issue#208 中有人提到这一点，我就试着看看能不能改改，并加点东西进去。

前言

以某位咕咕咕 up 主的最新视频为例，旧 av 时代插入 B 站视频是下面这个样子的

1
2
3
4
5
6


视频地址：https://www.bilibili.com/video/av882566744

插入方式：
{{< bilibili 882566744 >}}
或者
{{< bilibili av=882566744 >}}

而新 bv 时代 B 站视频默认只显示 bv 号了，用老方法插入会失败。当然目前你可以用浏览器扩展或者其他方法获取到 av 号来插入，但是总有一天会迎来全面 bv 的时代。那么就需要我们手动来改造了。

BV 大改造

看了下 LoveIt 主题的结构，发现 bilibili shortcodes 的引入和三个文件有关：

1
2
3


themes/LoveIt/layouts/shortcodes/bilibili.html
themes/LoveIt/assets/css/_partial/_single/_bilibili.scss
themes/LoveIt/assets/css/_page/_single.scss

分享代码

首先来看 bilibili.html：

1
2
3
4
5
6
7


<div class="bilibili">
    {{- if .IsNamedParams -}}
        <iframe src="//player.bilibili.com/player.html?aid={{ .Get `av` }}&page={{ .Get `p` | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    {{- else -}}
        <iframe src="//player.bilibili.com/player.html?aid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    {{- end -}}
</div>

不难发现，其实就是对官方 iframe 分享链接改造。

1

player.bilibili.com/player.html?aid=[av号]&page=[分p号]

那么拿到 bv 时代的官方分享链接就可以了。

/images/hugo/hugo-loveit-with-more-video-share-shortcodes-supported/bilibili-share-iframe-code.webp

获取的原始分享链接是下面这个样子的：

1

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

看起来目前官方还是 av 和 bv 并行的，为了不破坏原来的博文 av 时代视频的效果，我们新建一个 bilibilibv.html 文件：

1
2
3
4


<div class="bilibilibv">
  <iframe src="//player.bilibili.com/player.html?bvid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no"
    border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

为了方便也不要搞 av 时代的两种使用方法了，直接上最简单的一种方式。

修改样式

到此为止，其实我们的 bv 时代 shortcodes 已经可以用了，但是没有修改样式，不管从外观还是排版来看都是很丑的。

回到开头提到的三个文件之二，新建一个 _bilibilibv.scss 的文件，就是改个类名，复制了 av 时代的样式：

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


.bilibilibv {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;

  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

引入样式

刚刚新建的样式文件还需要用到开头的三个文件之三来引入，修改 _single.scss 如下：

1
2
3
4
5
6


@import "../_partial/_single/code";
@import "../_partial/_single/instagram";
@import "../_partial/_single/admonition";
@import "../_partial/_single/echarts";
@import "../_partial/_single/bilibili";
@import "../_partial/_single/bilibilibv";

在引入样式的地方，新增一行 @import "../_partial/_single/bilibilibv";，到此大功告成。

使用方法：

1

{{< bilibilibv BV1YK4y1C7CU >}}

小技巧

其他视频网站的引入也是如此，先获取到官方的 iframe 分享链接，然后改造三个文件即可。

后记

在寻找各视频网站官方分享链接的过程中，意外发现了 TGideas 这个团队的内容，作为一个小白感觉就像在沙漠中找到了一片绿洲。

如果需要更多视频网站 shortcodes 的成品的话，可以去我 fork 的项目地址，切换到 develop 分支查看。目前支持 爱奇艺，腾讯视频，优酷，搜狐视频，Acfun。

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


爱奇艺和搜狐不能直接用播放页面地址的视频 id，使用页面的分享按钮获取完整 iframe 地址
爱奇艺是 tvid 部分，搜狐是 bid 部分。

用法示例：

{{< iqiyi 3060730600 >}}

{{< qqvideo r0029muuhfj >}}

{{< youku XMzk1NjM1MjAw >}}

{{< sohu 90742150 >}}

{{< acfun ac14349183 >}}

0202年还在使用 flash 技术的视频网站，祝你们新年快乐。

目录

Hugo 篇二：为 LoveIt 主题添加更多视频分享 shortcodes

前言

BV 大改造

分享代码

修改样式

引入样式

后记