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" }}
阿里云