更改 Hugo 的内置图形短代码以向图像添加延迟加载

Question

在我的 Hugo 生成的网站中，我使用了内置的简码 figure。示例：

{{< figure src="myImage.svg" width="100%" alt="Some description" >}}

这会呈现以下内容 HTML：

<figure>
    <img src="myImage.svg"
         alt="Some description" width="100%"/> 
</figure>

但现在我正在尝试更新我的 Hugo 网站，使图形短代码将 loading=lazy 属性添加到 img 标签：

<figure>
    <img 
         loading="lazy"
         src="myImage.svg"
         alt="Some description" width="100%"/> 
</figure>

如何使用（新）loading 属性实现让图像延迟加载的目标？

Answer 1

您可以创建一个名为 layouts\shortcodes\figure.html 的文件，并将 Hugo's figure shortcode source code 的内容复制到该文件中。这是当前的源代码：

<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    {{- if .Get "link" -}}
        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end -}}
    <img src="{{ .Get "src" }}"
         {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
         {{- end -}}
         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    /><!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
        <figcaption>
            {{ with (.Get "title") -}}
                <h4>{{ . }}</h4>
            {{- end -}}
            {{- if or (.Get "caption") (.Get "attr") -}}<p>
                {{- .Get "caption" | markdownify -}}
                {{- with .Get "attrlink" }}
                    <a href="{{ . }}">
                {{- end -}}
                {{- .Get "attr" | markdownify -}}
                {{- if .Get "attrlink" }}</a>{{ end }}</p>
            {{- end }}
        </figcaption>
    {{- end }}
</figure>

之后，您可以对本地 figure.html 进行必要的更改。例如：

...
    <img src="{{ .Get "src" }}" loading="lazy" decoding="async"
...

Hugo 比 built-in 版本更喜欢您本地定义的短代码，这意味着这会覆盖 built-in 行为。

Answer 2

渲染图像挂钩是一个 safe/better 赌注，然后您可以在 md 文件中保持标准降价。

因此，在 layouts/_default/_markup 中（根据您需要的任何查找顺序，这将是一个全局设置）

render-image.html

<figure>
    <img 
         loading="lazy"
         src=".Destination"
         alt=".Text" width="100%" title=".Title"/> 
</figure>

在你的降价文件中：

![]() <- typical markdown image link

文档：https://gohugo.io/templates/render-hooks/

更改 Hugo 的内置图形短代码以向图像添加延迟加载

Changing Hugo's built-in figure shortcode to add lazy loading to images

html

hugo

hugo-shortcode