自定义短标签
Hugo无法渲染video标签
在markdown文件中可以使用video标签,来完成视频的内嵌,但是hugo无法将该标签渲染成为正常的h5的video标签
使用shortcode 嵌入视频
hugo提供了短标签的形式,可以自定义标签内容,even主题自带了几个短标签,其中有 网易云音乐的短标签,使用效果如下:
\{\{< music id="32507039" auto="1" >\}\} # / 为了转义,不然会渲染定义文件, 在主题文件夹下 even/layout/shortcodes/ 该目录下存放的都是短标签,文件名即为标签名
看一下music 标签怎么实现的
{{/*
## Music 163
### Params:
- `id`
required param
you can extract from music url
url format "http://music.163.com/#/song?id=3950552"
- Fiddle `auto`
optional param
default value 0
you can overwrite it with 1
### Examples:
- Simple
### \为转义
\{\{< music "3950552" >\}\}
\{\{< music "3950552" "1" >\}\}
- Named Params
\{\{< music id="3950552" >\}\}
\{\{< music id="3950552" auto="1" >\}\}
*/}}
{{- /* DEFAULTS */ -}}
{{ $auto := "0" }}
{{- if .IsNamedParams -}}
<iframe style="max-width: 100%"
class="music163"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="330"
height="86"
src="//music.163.com/outchain/player?type=2&id={{ .Get "id" }}&auto={{ or (.Get "auto") $auto }}&height=66">
</iframe>
{{- else -}}
<iframe style="max-width: 100%"
class="music163"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="330"
height="86"
src="//music.163.com/outchain/player?type=2&id={{ .Get 0 }}&auto={{ if isset .Params 1 }}{{ .Get 1 }}{{ else }}{{ $auto }}{{ end }}&height=66">
</iframe>
{{- end -}}自定义标签
自己写几个简单的短标签,可以有 b站,h5视频,音频,YouTube,YouTube好像官方支持.
这里以h5 的视频标签为例
- 新建
video.html - 编辑内容
{{/*
## Video mp4 AVC
### Params:
- `src`
required param
you can extract from video url
url format "https://cdn.jsdelivr.net/gh/ayuayue/cdn/img/picgo-typora-1.mp4"
### Examples:
- Simple
\{\{< video src="picgo-typora-1.mp4" >\}\}
*/}}
<iframe src="{{ .Get "src" }}"
scrolling="no" height="485px" width="930px" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>- 使用 ,参数只需要一个
src, 注释中也写出了用法.测试后是可以正常使用的,不过宽高需要自己调整
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
