在 Hugo 博客中嵌入 B 站视频

自己摸索的一点代码,感谢开源和摸索的各位前辈大佬

参数

顺序 参数 含义
1 id 视频 BV 号,如:BV1aM4y1R77W
2 sec 精准空降秒数,如:50125
3 auto 默认不自动播放:false0, 自动播放:true1
4 muted 默认不静音:false0 , 静音:true1
5 danmaku 默认加载弹幕:true1, 禁用弹幕:false0

语法举例

  1. 按位置传参
    1
    2
    
    < bili BV1DV4y157RD >
    < bili BV1bY411b7k9 244 true true true >
  2. 按参数名传参
    1
    2
    3
    4
    5
    
    < bili id=BV1Yv4y1o7dw auto=true >
    折行写也行
    < bili id=BV1fY4y1F7GL 
      sec=61 auto=false 
      muted=false danmaku=true >

代码

创建 /layout/shortcodes/bili.html,文件名字即 shortcode 调用时的名字。

输入以下内容:

 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
<!-- 语法规则举例说明
  1. 按位置传参
    < bili BV1DV4y157RD >
    < bili BV1bY411b7k9 244 true true true >
  2. 按参数名传参
    < bili id=BV1Yv4y1o7dw auto=true >
    折行写也行
    < bili id=BV1fY4y1F7GL 
      sec=61 auto=false 
      muted=false danmaku=true >
-->

<!-- 接收参数 -->
{{ $id := (.Get "id") | default (.Get 0) }}
{{ $sec := (.Get "sec") | default (.Get 1) }}
{{ $auto := (.Get "auto") | default (.Get 2) }}
{{ $muted := (.Get "muted") | default (.Get 3) }}

<!-- 不能用 default,因为传入 false 或 0 后会被忽略 -->
{{ $danmaku := (.Get 4) }}
{{ if .IsNamedParams }}
  {{ $danmaku = (.Get "danmaku") }}
{{ end }}

<!-- BV 号 -->
{{ $params := slice "bvid" $id }}

<!-- 给定精准空降秒数 -->
{{ if gt $sec 0 }}
  {{ $params = $params | append "t" $sec }}
{{ end }}

<!-- 禁止自动播放,除非传入 true 或 1 -->
{{ if ne $auto true 1 }}
  {{ $params = $params | append "autoplay" "false" }}
{{ end }}

<!-- 传入 true 或 1 时静音 -->
{{ if $muted | in (slice true 1) }}
  {{ $params = $params | append "muted" "true" }}
{{ end }}

<!-- 传入 false 或 0 时不加载弹幕 -->
{{ if $danmaku | in (slice false 0) }}
  {{ $params = $params | append "danmaku" "false" }}
{{ end }}

<!-- 嵌入 bilibili 播放框,百分比参数可自定义 -->
<div style="margin: 10px 0 20px 0;">
  <div style="position:relative; padding-bottom:75%; width:100%; height:0">
    <iframe src="//player.bilibili.com/player.html?{{ (querify $params) | safeURL }}"
      scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
      style="position:absolute; height: 100%; width: 100%;">
    </iframe>
  </div>
</div>

注意

鉴于当前 B 站以 BV 视频号取代旧视频号形式,我估计本代码不兼容远古视频。

若想兼容,链接的 bvid 部分,需把参数名中 b 改成 a。(防止本博客带有敏感信息,我不打出来了)。

代码优化思路:根据传入的视频 id 开头是 B 还是 A 来单独处理。也可提取视频 id 开头字母存入变量,直接作为参数传入链接进行拼接。

参考

Licensed under CC BY-NC-SA 4.0
当你有机会做出选择时,不要让自己后悔
使用 Hugo 构建
主题 StackJimmy 设计