在markdown文件中可以使用video标签,来完成视频的内嵌,但是hugo无法将该标签渲染成为正常的h5的video标签
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, 注释中也写出了用法.测试后是可以正常使用的,不过宽高需要自己调整
