Hugo 网站优化(8): 书房装上了小电视， 使用 hugo shortcodes 支持 bilibili 视频播放

原文链接: https://tangx.in/posts/2023/01/04/hugo-bilibili-support/

在学习的时候希望资料和笔记内容都能在一起。 这样 查阅、回顾 起来就更方便了。

hugo 短代码(shortcodes) 模版

在搜索的时候， 找到 利用hugo的短代码功能插入b站视频并且自适应 了这篇文章， 实现了嵌入 Bilibili 的播放器。

进一步查询 hugo - 短代码 和 hugo - 自定义段代码模版 ， 并参考原文。

终于实现了， 在书房看电视的方案。

Bilibili 视频引用语法

在书房中看电视的语法规则。

支持两个参数

  1. 视频ID 或 视频地址
  2. 合集视频中的 第N集， 默认值为 1。

支持两种语法

  1. 具名语法， 根据参数名传递。
    • src: 视频ID 或 地址
    • page: 分集

named-grammar

建议使用 具名语法， 这样在 markdown 中跳转更方便。

  1. 匿名语法， 根据参数位置传递。
    • 参数1: 视频ID 或 地址
    • 参数2: 分集

unnamed-grammar

仅仅是为了保留语法与兼容性考虑。

代码实现

  1. 在 主题 代码中， 添加 layouts/shortcodes/<name>.html 。 这里的 name 就是以后 Markdown 中的引用名字。 例如， bilibili.html

  2. 复制代码

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!-- 语法规则
    1. 匿名模式
        <bilibili BV1Wg411t7EE 233>
    2. 具名模式
        <bilibili 
            src="https://www.bilibili.com/video/BV1RK41117eY/" 
            page="332"
        >
-->

<!-- 获取第一个参数 作为视频地址 -->
{{- $dest := ( .Get 0) -}}

<!-- 如果是具名模式， 获取 src -->
{{ if .IsNamedParams }}
    {{ $dest = (.Get "src") }}
{{ end }}

<!-- 判断是否为 全路径， 是则获取视频ID -->
{{ if (hasPrefix $dest "http" )}}
    <!-- https://www.bilibili.com/video/BV1RK41117eY/ -->
    {{ $dest = (strings.TrimPrefix "http" $dest ) }}

    <!-- 解析 URL -->
    {{ $url := urls.Parse $dest }}

    <!-- /video/BV1RK41117eY/ -->
    {{ $dest = $url.Path }}

    <!-- BV1RK41117eY -->
    {{ $dest = (path.BaseName $dest) }}
{{ end }}


<!-- 获取专辑中的视频 ID -->
{{- $page := (.Get 1) -}}

{{ if .IsNamedParams }}
    {{ $page = (.Get "page") }}
{{ end }}

<!-- 默认值为 1 -->
{{ if (not $page) }}
    {{ $page = 1 }}
{{ end }}


<!-- 嵌入 bilibili 播放框 -->
<div style="margin: 10px 0 20px 0;">
  <!-- <h3>视频ID: {{ $dest }} - {{ $page }} </h3> -->
  <div style="margin: 5px 0;">

    <span>本视频一切权利归 <strong>bilibili</strong> 及 <strong>原作者所有</strong></span>
    <span>如果觉得好， 请点击跳转到 <strong>bilibili</strong>给予支持</span>
    <a href="https://www.bilibili.com/video/{{ $dest }}/">{{ $dest }}</a>
  </div>

  <div style="position:relative; padding-bottom:75%; width:100%; height:0">
    <iframe src="//player.bilibili.com/player.html?bvid={{ $dest }}&page={{ $page }}"       
        scrolling="no" border="0"
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        style="position:absolute; height: 100%; width: 100%;">
    </iframe>
  </div>
</div>

这里面使用了几个内置函数

  1. hugo 解析字符串 URL: https://gohugo.io/functions/urls.parse/
  2. hugo 获取 BaseName: https://gohugo.io/functions/path.basename/

测试视频: 跟着王老师作牛肉饼

本视频一切权利归 bilibili 及 原作者所有 如果觉得好， 请点击跳转到 bilibili给予支持 BV1B44y1h7wh

还是很安逸了