跳转至

配置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改成对应视频链接即可。

附录

参考文献

  1. Hugo 通过 ShortCodes 添加视频 | Kays Blog ⑅︎◡̈︎* (gitee.io)
  2. Hugo的shortcode(支持视频等)和主题修改Li.027 - 知乎 (zhihu.com)

版权信息

本文原载于kermsite.com,复制请保留原文出处。

评论