网站添加图片之后，性能指标评分下降，因为图片加载时间长。之前想着做image resize，由于cloudflare的image resize需要收费，所以一直没有做。今天发现hugo内置了image resize的功能，本文是相应记录。

Hugo resize

搜索hugo resize，找到对应功能resize，配置相应代码。

实施方案

找到layouts/_default/_markup/render-image.htm，修改为如下代码，要点是resources.Get和Resize。里面包含我们之前添加的hugo fancybox代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{{if .Page.Site.Params.usefancyapp }}
  <div class="post-img-view">

    {{ $src := .Destination }}

    {{ with resources.Get .Destination }}
      <a data-fancybox="gallery" href="{{ .RelPermalink | safeURL }}" >
      {{ with .Resize "684x webp q85 lanczos" }}
        <img loading="lazy" src="https://img.houzikeji.com{{ .RelPermalink | safeURL }}" width="{{ .Width }}" height="{{ .Height }}" {{ with .Title}} title="{{ . }}"{{ end }} />
      {{ end }}
      </a>
    {{ end }}
    
  </div>
{{ end }}

FAQ

Q:添加了代码，为什么获取不到图片？

A:使用resources.Get,你的图片需要放到assets目录下面。

Q:为什么在Cloudflare Pages上面不行？

A:可能是cloudflare pages上面的hugo版本低了，可以添加环境变量HUGO_VERSION指定更高版本的hugo。