Hugo 渲染原始 HTML

使用 Hugo 时有时候需要插入原始的 HTML 代码进行展示,但是 Hugo 会把这些 HTML 过滤掉,HTML 里面的结果是 <!-- raw HTML omitted -->,这并不是我想要的,查了一下有两种方式可以解决:

1. 使用 Hugo 的配置直接渲染 HTML

[markup.goldmark.renderer]
unsafe= true

但这样有个缺点,Markdown 里的所有 HTML 代码都会渲染掉,而往往我们需要指定部分代码。

2. 使用 shortcode

  1. 创建 shortcode 文件:layouts/shortcodes/html.html

    <!-- raw html -->
    {{.Inner}}
  2. 使用 shortcode

比如我这里引入了一段 Google Maps 的 HTML 代码。

{{< html >}}
<iframe src="https://www.google.com/maps/d/embed?mid=1er-AUqQBheAkbozaTvcFIUZLF-A&ehbc=2E312F" style="width:100%;height:25rem;border:none"></iframe>
{{< /html >}}

最终就会渲染成下面的地图(如果你能科学上网的话就可以看见)


Jun Xie

hugo技术

237 字

2022-05-24 14:15 +0000