<!--

大家好， 我是老麦

欢迎 关注公众号 Go与云原生 或 订阅网站 https://tangx.in/ 第一时间看后续精彩文章。

觉得好的话，请猛击文章右下角「点赞、关注、转发」 一键三连， 是对我的最大支持。

-->

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: 分集

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

1. 匿名语法， 根据参数位置传递。

   • 参数1: 视频ID 或 地址
   • 参数2: 分集

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

代码实现

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

<!-- 语法规则
    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">
    frameLabelStart--frameLabelEnd 
  </div>
</div>

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

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

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

还是很安逸了