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 视频引用语法
在书房中看电视的语法规则。
支持两个参数
- 视频ID 或 视频地址
- 合集视频中的 第N集， 默认值为 1。
支持两种语法
- 具名语法， 根据参数名传递。
src: 视频ID 或 地址page: 分集
named-grammar
建议使用 具名语法， 这样在 markdown 中跳转更方便。
- 匿名语法， 根据参数位置传递。
- 参数1: 视频ID 或 地址
- 参数2: 分集
unnamed-grammar
仅仅是为了保留语法与兼容性考虑。
代码实现
- 在 主题 代码中， 添加
layouts/shortcodes/<name>.html。这里的 name 就是以后Markdown中的引用名字。例如，bilibili.html - 复制代码
<!-- 语法规则
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>这里面使用了几个内置函数
- hugo 解析字符串 URL: https://gohugo.io/functions/urls.parse/
- 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/
加载中,请稍侯......
网友评论