Hugo 食用之 Render Image
前言： 由于博客部署在Github Page上图片加载缓慢😮💨，改代码基于PaperMod主题的render-image.html进行修改，其他主题的渲染方式可能不一样，自行研究吧🧐。 支持将png、jpg、jpeg、bmp、tiff的图片格式转换至Webp（应该能减少一半的时间☝️），有但没完全有用的CDN前缀设置（因为ta只作用于非Webp，还需要保持路径一致），还有啥支持的？啊！我不道啊，以后需要再写吧！😋 食用： 在 Hugo 项目的 layouts/_default/_markup/ 目录下创建 render-image.html 文件，将代码复制到 render-image.html 文件中。 {{- $u := urls.Parse .Destination -}} {{- $src := $u.String -}} {{- $webpSrc := "" -}} {{- if not $u.IsAbs -}} {{- $path := strings.TrimPrefix "./" $u.Path }} {{- with or (.PageInner.Resources.Get $path) (resources.Get $path) -}} {{- $src = .RelPermalink -}} {{- $isConvertible := false -}} {{- if in (slice "png" "jpg" "jpeg" "bmp" "tiff") .MediaType.SubType -}} {{- $isConvertible = true -}} {{- $image := . -}} {{- with .Exif -}} {{- if eq .Tags.Orientation 3 }} {{- $image = $image.Resize (printf "%dx%d r180" $image.Width $image.Height) -}} {{- else if eq .Tags.Orientation 6 }} {{- $image = $image.Resize (printf "%dx%d r270" $image.Height $image.Width) -}} {{- else if eq .Tags.Orientation 8 }} {{- $image = $image.Resize (printf "%dx%d r90" $image.Height $image.Width) -}} {{- end -}} {{- end -}} {{- $webpSrc = ($image.Resize (printf "%dx%d webp q50" $image.Width $image.Height)).RelPermalink -}} {{- end -}} {{- with $u.RawQuery -}} {{- $src = printf "%s?%s" $src . -}} {{- if $isConvertible -}} {{- $webpSrc = printf "%s?%s" $webpSrc . -}} {{- end -}} {{- end -}} {{- with $u.Fragment -}} {{- $src = printf "%s#%s" $src . -}} {{- if $isConvertible -}} {{- $webpSrc = printf "%s#%s" $webpSrc . -}} {{- end -}} {{- end -}} {{- end -}} {{- end -}} {{- $cdnPrefix := .Page.Site.Params.cdnPrefix -}} {{- if $cdnPrefix -}} {{- $src = printf "%s%s" $cdnPrefix $src -}} {{- end -}} {{- $attributes := merge .Attributes (dict "alt" .Text "src" $src "title" (.Title | transform.HTMLEscape) "loading" "lazy") -}} <picture> {{- if $webpSrc -}} <source type="image/webp" srcset="{{ $webpSrc }}"> {{- end -}} <img {{- range $k, $v := $attributes -}} {{- if $v -}} {{- printf " %s=%q" $k $v | safeHTMLAttr -}} {{- end -}} {{- end -}}> </picture> {{- /**/ -}} 配置 CDN 前缀 在 Hugo 配置文件（如 params.toml）中添加 CDN 前缀配置，如果未配置 CDN 前缀，则使用本地路径： ...