NSFW | 实现在Hugo博客中利用Shortcode嵌入视频

为什么会有这篇文章

实际上，我正在尝试将喜欢的内容直接呈现在博客上，没错这里指的就是我的藏书阁。然而作为小白，虽然我有能力像markdown一样使用html语法写完一篇文章，但在hugo博客里嵌入视频这种事…如果直接在.md文件里用html标签，第一有安全隐患，第二完全没有效果。不仅是<video>标签，还是<iframe>标签，我试过的代码在本地预览通通不行，反而在码字软件Typora里跑得很畅快…（摊手。

但我还是想把喜欢的视频嵌入到博客中，而不是单纯甩个链接，故有此文。

先放出我的参考代码

参见Mogeko的利用 Hugo Shortcodes 插入 B 站视频。我将css代码放到html文件，全部代码如下：

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


{{ $videoID := index .Params 0 }}
{{ $pageNum := index .Params 1 | default 1}}

{{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
{{ else }}
<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
{{ end }}

<style>
// 嵌入 BiliBili 视频
#bilibili {
  width: 100%;
  height: 550px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #bilibili {
    width: 100%;
    height: 250px;
  }
}
</style>

此代码中嵌入视频的窗口大小根据屏幕大小动态调整这一功能真的好用，我都是借（照）鉴（抄）的这个，感恩。

利用 Hugo Shortcodes 插入pornhub视频

在layouts/shortcode文件夹中创建文件pornhub.html，添加代码：

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


<div><iframe id="pornhub-player" src="https://www.pornhub.com/embed/{{ index .Params 0 }}" scrolling="no"  frameborder="no" allowfullscreen="true" > </iframe></div>


<style>
    // 嵌入pornhub视频
    #pornhub-player {
        width: 100%;
        height: 550px;
    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        #pornhub-player {
            width: 100%;
            height: 250px;
        }
    }
</style>

由于视频播放源是黄黑P站，而这里是Techblog，我就不放预览了。想看NSFW视频嵌入效果的话请看这里。可以看出他工作得很好！另外，这也是我人生的第一个代码。

用法：找到你喜欢的porn，复制链接中embed/后的内容，例如ph5eca50fd553e5，然后在markdown中输入

1

{{< pornhub ph5eca50fd553e5 >}}

利用 Hugo Shortcodes 插入个人版onedrive中的视频

参考：Embedding Videos from OneDrive into your Blog。我借鉴了此文中使用video标签而放弃iframe标签的做法。

首先复制onedrive提供的内嵌代码，比如文中的例子：

1

<iframe src="https://onedrive.live.com/embed?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM" width="320" height="185" frameborder="0" scrolling="no" allowfullscreen></iframe>

然后将src的值改为"https://onedrive.live.com/download?cid=A82DFC6ED9776AF4&resid=A82DFC6ED9776AF4%212082&authkey=AMCIqSB8zNNJvxM"，即替换掉embed将其变更为download。

值得一提的是，onedrive仅为个人版提供了内嵌代码功能，而企业版教育版等等都没有这个功能。为了将喜欢的r18视频嵌入博客中，我将视频从教育版onedrive中下载并上传至个人版（我好闲。

观察src链接后半段的组成部分，分为cid，resid和authkey，其中resid的值中间插入了一个%。我试着将redis看成一个整体，但失败了，总是提示有编码错误。因为我是小白，不太了解其中原理，于是干脆将resid部分定义为两个变量：左半段resid1和右半段resid2。

在layouts/shortcode文件夹中创建文件onedrive.html，添加代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{{ $cid := index .Params 0 }}
{{ $resid1 := index .Params 1 }}
{{ $resid2 := index .Params 2 }}
{{ $authkey := index .Params 3 }}
<div><video id="onedrive-player" src="https://onedrive.live.com/download?cid={{ $cid }}&resid={{ $resid1 }}%{{ $resid2 }}&authkey={{ $authkey }}" type="video/mp4" scrolling="no" frameborder="0" allowfullscreen="true"> </video></div>


    <style>
        // 嵌入onedrive视频
        #onedrive-player {
            width: 100%;
            height: 550px;
        }

        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
            #onedrive-player {
                width: 100%;
                height: 250px;
            }
        }
    </style>

用法：还是用参考文章的例子，在markdown中输入

1

{{< onedrive A82DFC6ED9776AF4 A82DFC6ED9776AF4 212082 AMCIqSB8zNNJvxM >}}

缺点是移动端只能长按下载不能在线播放，电脑可以右键播放暂停静音下载。