Webp转换及水印
完全按照这个操作,写的非常清晰。有一点改动的是,我有图片Exif不是空,但里面的Orientation是nil,另外将水印调整到了右下角。
不打包进publish文件夹
我按这个配置一直不生效。最后发现是stack模板加载图片helper/image会引用RelPermalink,导到打进了publish目录。

修改点
hugo.toml
1
2
3
4
5
6
7
| # https://discourse.gohugo.io/t/set-page-build-options-publishresources-in-the-site-or-theme-configuration/55942/5
# https://gohugo.io/content-management/build-options/
[[cascade]]
[cascade.target]
path = "/**"
[cascade.build]
publishResources = false
|
render-image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| {{/* {{- $image := partial "helper/image" (dict "Resources" .Page.Resources "Image" .Destination) -}} */}}
{{- $alt := .PlainText | safeHTML -}}
{{/* 将helper/image中的访问图片的代码copy过,防止访问RelPermalink,原图又会打包进去 */}}
{{ $url := urls.Parse .Destination }}
{{ $resource := "" }}
{{ if not (in (slice "https" "http") $url.Scheme) }}
{{ $resource = .Page.Resources.Get (printf "%s" (.Destination | safeURL)) }}
{{ else }}
{{ with try (resources.GetRemote $url) }}
{{ with .Err }}
{{ errorf "%s" . }}
{{ else with .Value }}
{{ $resource = . }}
{{ else }}
{{ errorf "Unable to get remote resource %q" $url }}
{{ end }}
{{ end }}
{{ end }}
{{/* 获取当前页面匹配.Destination的资源图像 */}}
{{ $hugoImage := $resource }}
{{/* 从资源中获取logo图像,透明背景图片效果最好 */}}
{{/* 该图像需要放置在根目录的assets/images目录下 */}}
{{ $logo := (resources.Get "img/watermark.png") }}
{{/* 检查图像的媒体类型是否不是gif或svg */}}
{{ if not (in (slice "gif" "svg") $hugoImage.MediaType.SubType) }}
{{/* 保留原始图像的引用 */}}
{{ $rawImage := $hugoImage }}
{{/* 计算图像高度的80%,并确保最小值为250 */}}
{{ $size := math.Round (mul $hugoImage.Height 0.80) }}
{{ $size := cond (ge $size 250) $size 250.0 }}
{{/* 调整logo的透明度为50% */}}
{{ $logo := $logo.Filter (images.Opacity 0.5) }}
{{/* 调整logo的大小,高度为计算出的$size,保持纵横比,圆角半径为30 */}}
{{/* $logo := $logo.Resize (printf "%.0fx png r30" $size) */}}
{{/* 如果原始图像有EXIF信息 */}}
{{ with $rawImage.Exif }}
{{/* 根据图像的方向调整图像的大小和旋转 */}}
{{ if or (eq .Tags.Orientation 1) (eq .Tags.Orientation nil) }}
{{ $hugoImage = $hugoImage.Resize (print $hugoImage.Width "x" $hugoImage.Height " webp") }}
{{ else if eq .Tags.Orientation 3 }}
{{ $hugoImage = $hugoImage.Resize (print $hugoImage.Width "x" $hugoImage.Height " webp r180") }}
{{ else if eq .Tags.Orientation 6 }}
{{ $hugoImage = $hugoImage.Resize (print $hugoImage.Height "x" $hugoImage.Width " webp r270") }}
{{ else if eq .Tags.Orientation 8 }}
{{ $hugoImage = $hugoImage.Resize (print $hugoImage.Height "x" $hugoImage.Width " webp r90") }}
{{ end }}
{{ else }}
{{/* 如果没有EXIF信息,则只调整大小,不旋转 */}}
{{ $hugoImage = $hugoImage.Resize (print $hugoImage.Width "x" $hugoImage.Height " webp") }}
{{ end }}
{{/* 在图像上添加logo水印,位置在图像的右下,fm可以通过unwatermarked关闭水印 */}}
{{ if and (ge $hugoImage.Width 500) (ne .Page.Params.unwatermarked true) }}
{{ $hugoImage = $hugoImage.Filter (images.Overlay $logo (sub $hugoImage.Width $logo.Width) (sub $hugoImage.Height $logo.Height)) }}
{{ end }}
{{ end }}
{{ $image := $hugoImage }}
{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := and $image.Height $image.Width -}}
<img src="{{ $image.RelPermalink }}"
{{ with $image.Width }}width="{{ . }}"{{ end }}
{{ with $image.Height }}height="{{ . }}"{{ end }}
loading="lazy"
{{ with $alt }}
alt="{{ . }}"
{{ end }}
{{ if $galleryImage }}
class="gallery-image"
data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
{{ end }}
>
|
清理exif
转换过程中会hugo会删除掉exif,不过为了隐私,最好还是自已先删掉
exiftool -r -all= ./