在 hugo 博客中嵌入 B 站视频

感谢开源和摸索的各位前辈大佬

效果
#

参数
#

顺序	参数	含义
1	`id`	视频 BV 号，如：`BV1aM4y1R77W`
2	`sec`	精准空降秒数，如：`50`、`125`
3	`auto`	默认不自动播放：`false` 或 `0`，自动播放：`true` 或 `1`
4	`muted`	默认不静音：`false` 或 `0` ，静音：`true` 或 `1`
5	`danmaku`	默认加载弹幕：`true` 或 `1`，禁用弹幕：`false` 或 `0`

语法举例
#

按位置传参

< bili BV1DV4y157RD >
< bili BV1bY411b7k9 244 true true true >

按参数名传参

< bili id=BV1Yv4y1o7dw auto=true >
折行写也行
< bili id=BV1fY4y1F7GL 
  sec=61 auto=false 
  muted=false danmaku=true >

代码
#

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

输入以下内容：

<!-- 语法规则举例说明
  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>