配置HTML片段
直接在markdown文章中插入HTML代码以自定义页面元素,往往会导致无法识别。Hugo对此的解决方案是短代码(shortcodes
)。
我们平时使用这类静态网站构建工具时,编辑的文档是markdown
格式的,但是最后渲染是html
格式。虽然markdown
便于书写和预览,可我们向网页中添加元素也不如纯html
方便了。
而短代码,就是为了解决这个问题而生的。
当你在markdown
中插入一段短代码,hugo构建时会自动搜寻对应文件夹下的模板,将关键字改写之后自动插入生成的网页中。
只需要提前配置好模板,几乎可以方便的插入任何元素。此外,许多主题实际已经内置了许多模板,只要调用即可。
模板
在 md
文件中嵌入 ShortCodes
时,程序会先查找你的项目的根目录下的 /layouts/shortcodes
文件夹下的模板文件,再查找 theme
对应主题目录下的 /layouts/shortcodes
文件夹。
推荐先看一下主题里面有什么,像我用的stack
主题内置了B站、腾讯、油管、视频四个短代码。我想要插入的时候直接调用即可。
如果主题里面没有你想要的,也可以自己新建。
例如我使用的video
短代码,则体现为在shortcodes
目录下的一个video.html
文件,内容为:
{{- $src := .Get "src" | default (.Get 0) -}}
<div class="video-wrapper">
<video
controls
src="{{- $src -}}"
{{ with .Get "poster" }}poster="{{- . -}}"{{ end }}
{{ with .Get "autoplay" }}autoplay{{ end }}
>
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="{{- $src -}}">link to the video</a> instead.
</p>
</video>
</div>
调用
在markdown
文件里调用短代码也非常方便。只需给定几个参量。例如调用一个视频,来源是同一目录下的video.mp4
,设置成自动播放,海报为video-poster.png
。当然,个人还是推荐视频单独上传,不走服务器流量,也是节省空间。直接将src
改成对应视频链接即可。
附录
参考文献
- Hugo 通过 ShortCodes 添加视频 | Kays Blog ⑅︎◡̈︎* (gitee.io)
- Hugo的shortcode(支持视频等)和主题修改Li.027 - 知乎 (zhihu.com)
版权信息
本文原载于kermsite.com,复制请保留原文出处。