Hugo无法渲染video标签

在markdown文件中可以使用video标签,来完成视频的内嵌,但是hugo无法将该标签渲染成为正常的h5的video标签

使用shortcode 嵌入视频

hugo提供了短标签的形式,可以自定义标签内容,even主题自带了几个短标签,其中有 网易云音乐的短标签,使用效果如下:

1

\{\{< music id="32507039" auto="1" >\}\}  # / 为了转义,不然会渲染

定义文件, 在主题文件夹下 even/layout/shortcodes/ 该目录下存放的都是短标签,文件名即为标签名

看一下music 标签怎么实现的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

  {{/*
      ## 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 的视频标签为例

  1. 新建 video.html

  2. 编辑内容

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

      {{/*
      ## 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>

  3. 使用 ,参数只需要一个src, 注释中也写出了用法.测试后是可以正常使用的,不过宽高需要自己调整