Hugo通过Markdown渲染钩子给图片标签添加宽高属性
在使用Markdown插入图片时,标记是这样的:

Hugo渲染后得到的IMG标签是这样的:
<img src="图片URL" alt="图片描述">
看起来已经足够了,但如果能显示地给图片标签指定图片宽和高属性,可以减少浏览器的计算时间。
使用Hugo提供的Markdown Render Hooks可以实现对内容的过滤修改,图像Hooks的模板文件路径为:
_default/_markup/render-image.html
模板内容如下:
{{- $image := .Page.Resources.GetMatch (printf "%s" .Destination ) -}}
{{- with $image -}}
<img src="{{ $image.RelPermalink }}" alt="{{ $.Text }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
{{ end }}
相关变量说明:
-
.Destination返回的是图片URL,如果在撰写文章时插入的图片地址是相对地址,则IMG标签中的src值也是相对地址,在某些时候可能会是问题;
-
$image.RelPermalink将返回图片的绝对地址,这通常是我们需要的;
-
$.Text返回图像的描述文本;
-
$image.Width为图像的宽度;
-
$image.Height为图像的高度;
以上代码首先使用.Resources.GetMatch方法获取到图像资源,然后再返回理像化的IMG标签。
更多图像处理方法
将图像裁剪为600px宽:
{{ $image := $image.Resize "600x" }}
将图像裁剪为400px高:
{{ $image := $image.Resize "x400" }}
同时裁剪宽和高:
{{ $image := $image.Resize "600x400" }}
缩放图像为指定尺寸,同时保持原始图像宽高比例。由于指定尺寸的比例与原始图像比例可能不一致,得到的图像也不一定为指定尺寸:
{{ $image := $image.Fit "600x400" }}
裁剪图像并调整图像大小为指定尺寸。先将图像按照指定尺寸的比例进行缩放,以满足指定宽/高,然后将多余的部分裁剪掉。如果原始图像的宽或高比指定尺寸要小,那么可能导致图像清晰度下降:
{{ $image := $image.Fill "600x400" }}
裁剪图像为指定尺寸,不会对图像进行缩放调整:
{{ $image := $image.Crop "600x400" }}
获取图像主色:
{{ $colors := $image.Colors }}
旋转图像90度:
{{ $image = $image.Resize "600x r90" }}
转换图像格式:
{{ $image.Resize "600x webp" }}
图像压缩质量:
{{ $image.Resize "600x webp q75" }}