使用 Hugo v0.62 的渲染钩子(Render hooks)

Dec 24, 2019 • 预计阅读时间 1 分钟

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> 标签截断,导致前后多出空白的段落。

Hugo

给 MathJax 加上 Github 风格语法高亮

iOS 格式化浮点数时去掉末尾的 0

comments powered by Disqus