使用 Hugo v0.62 的渲染钩子（Render hooks）

Hugo 发布了新版本 0.62.0，新增加了 Markdown 渲染钩子（Render Hooks）的功能。

渲染钩子是 Goldmark 引擎的新特性，利用渲染钩子可以替代 shortcode 来实现自定义风格。

目前新增加的钩子只有两个：链接（link）和图像（image）。

要使用钩子需要添加两个模版文件，路径是 layouts/_default/_markup/，可以放在你的博客目录也可以内置在主题里。

• render-link.html

  使用钩子实现：点击超链接打开新页面

  Markdown：

  [Text](Destination "Title")
  

  渲染钩子：

  {{ $url := .Destination | safeURL }}
  {{ $text := .Text | safeHTML }}
  <a href="{{ $url }}" {{ with .Title }}title="{{ . }}"{{ end }} {{ if strings.HasPrefix $url "http" }}target="_blank"{{ end }}>{{ $text }}</a>
  

• render-image.html

  使用钩子实现：支持点击查看图片，替代 figure 标签

  Markdown：

  ![Text](Destination "Title")
  

  渲染钩子：

  {{ $url := .Destination | safeURL }}
  <span class="image-container">
  <span class="link">
      <a target="_blank" rel="noopener noreferrer" href="{{ $url }}"><img class="img" src="{{ $url }}" alt{{ with .Text }}="{{ . }}"{{ end }} /></a>
  </span>
  {{ with .Title }}
      <span class="caption">
      <span class="title">{{ . | safeHTML }}</span>
      </span>
  {{ end }}
  </span>
  

  因为 Markdown 是把图像嵌套在 <p> 标签中，所以在钩子里不能使用 <figure> 或者 <div> 这些块级标签，会把父级的 <p> 标签截断，导致前后多出空白的段落。