Hugo通过Markdown渲染钩子给图片标签添加宽高属性

在使用Markdown插入图片时，标记是这样的：

![图片描述](图片URL)

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" }}