提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  系统

当前栏目

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

网站 使用 优化 支持 视频 播放 电视 装上
2023-06-13 09:17:20 时间

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

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

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

hugo 短代码(shortcodes) 模版

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

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

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

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. 匿名模式
        <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/

参考资料

[1]

利用hugo的短代码功能插入b站视频并且自适应: https://www.bilibili.com/read/cv15198621

[2]

hugo - 短代码: https://gohugo.io/content-management/shortcodes/

[3]

hugo - 自定义段代码模版: https://gohugo.io/templates/shortcode-templates/

相关文章