累计布局偏移 Cumulative Layout Shift（CLS）是一项 Web 指标。
布局偏移如图所示，元素突然变化的高度影响了用户交互体验：
一般给图片一个高度就可以了，但最好是能自动化，而不是手写。
看到了这篇博文 累计布局偏移修复方案改进 —— 自动生成图片宽高，不过他是从腾讯云对象存储获取的图片宽高，而我都将图片存储在了 Hugo 配置目录的 static/img/ 文件夹。
我平时在 Markdown 里都是直接写的 path：
参考 How to prevent CLS in Hugo，利用 Hugo 的 Render Hooks 功能重新渲染图片相关代码，获取图片的宽高，在 <img> 标签里加上 width 和 height 属性。
不知道为什么照他的办法，在配置中加入了 mounts 相关属性，仍然不起作用，不太会前端和 Hugo，摸索着改了改。
创建 layouts/_default/_markup/render-image.html 文件：
<p>
{{ if hasPrefix .Destination "/img" }}
{{ $img := os.ReadFile (path.Join "/static" .Destination) | resources.FromString .Destination }}
{{ if ne $img.MediaType.SubType "svg" }}
<img loading="lazy"
src="{{ .Destination | safeURL }}"
alt="{{ .Text }}"
width="{{ $img.Width }}"
height="{{ $img.Height }}"
style="max-width: 100%; height: auto;"
/>
{{ end }}
{{ if or (not $img) (eq $img.MediaType.SubType "svg") }}
<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
{{ end }}
{{ else }}
<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
{{ end }}
</p>
在他的基础上手动加上了 /static 地址前缀，不然这个 os.ReadFile 方法一直报错；
加上了 style="max-width: 100%; height: auto;"，保持宽度超过父容器的图片的比例；
套了个 if else，只处理图片地址为 /img 开头的本地图片，并可以显示网络图片，但是网络图片仍然会产生偏移。
我用的是 Hugo PaperMod 主题，主页的封面图也存在这个问题，得修改 cover.html，看不太懂，我看上面那位博主是修改的这里，确实起作用。
修改最外层的 {{- else }} 里的内容（Hugo PaperMod 6.0 版本），和之前的一样，就是替换一下 src 和 alt 的属性值：
{{- else }}{{/* For absolute urls and external links, no img processing here */}}
{{- if $addLink }}<a href="{{ (.Params.cover.image) | absURL }}" target="_blank"
rel="noopener noreferrer">{{ end -}}
<!-- <img loading="lazy" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}"> -->
<!-- 修改，将上面那行改成下面这些： -->
{{ if hasPrefix .Params.cover.image "/img" }}
{{ $img := os.ReadFile (path.Join "/static" .Params.cover.image) | resources.FromString .Params.cover.image }}
{{ if ne $img.MediaType.SubType "svg" }}
<img loading="lazy"
src="{{ .Params.cover.image | safeURL }}"
alt="{{ $alt }}"
width="{{ $img.Width }}"
height="{{ $img.Height }}"
style="max-width: 100%; height: auto;"
/>
{{ end }}
{{ if or (not $img) (eq $img.MediaType.SubType "svg") }}
<img loading="lazy" src="{{ .Params.cover.image | safeURL }}" alt="{{ $alt }}" />
{{ end }}
{{ else }}
<img loading="lazy" src="{{ .Params.cover.image | safeURL }}" alt="{{ $alt }}" />
{{ end }}
{{- end }}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。