{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
{{ range . }}
{{ $resized := .Fill "150x115 q20" }}
{{ end }}
{{ end }}
为了被Hugo处理,图片必须是页面资源或全局资源。画廊图片本来就是页面资源,但将要叠加在所有画廊图片上的Logo并不属于单个页面。因此,它必须是全局资源。最简单的方法是将其放入assets文件夹。一旦它在那里,就可以通过以下方式应用到所有画廊图片:
以下是带有更改的提交。完整的更改后的短代码现在看起来像这样:
{{ $logo := resources.Get "img/overlay-logo.png" }}
{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
{{ range . }}
{{ $resized := .Fill "150x115 q20" }}
{{ $withlogo := .Filter (images.Overlay $logo 10 10)}}
{{ end }}
{{ end }}
坐标是从左上角开始的,所以images.Overlay $logo 10 10意味着从顶部10像素,从左侧10像素。但希望将Logo放在右下角,所以需要根据画廊图片和Logo的大小计算正确的像素值。计算本身并不困难。Hugo中的所有图片都有宽度和高度的属性,所以可以访问$logo.Width和$logo.Height(对于Logo)以及.Width和.Height(对于当前画廊图片)。
例如,Logo左上角的正确x值(使其右下角距离右侧和底部10像素)是.Width - $logo.Width - 10。以下是一些花哨的ASCII艺术来可视化:
┌───────────────────────────────────────────────┐
│ │
│ │
│ │
│ │
│ ┌─────────────┐ │
│ │ LOGO │ │
│ └─────────────┘ │
│
<----------
x
-----------
>
<-$logo.Width-
>
<-10-
>
│ │
└───────────────────────────────────────────────┘
<--------------------
.Width
-------------------
>
同样对于高度:.Height - $logo.Height - 10。但花了很长时间才弄对语法。问题是对来说不常见的Hugo模板函数的语法。习惯于{{ name parameter1 parameter2 }}格式并找到正确的数学函数是一回事,但嵌套这两个调用并使用所有正确的括号让头疼。但实际上,只需要将这个:
{{ $withlogo := .Filter (images.Overlay $logo 10 10)}}
...改成这个:
{{ $x := sub .Width (add $logo.Width 10) }}
{{ $y := sub .Height (add $logo.Height 10) }}
{{ $withlogo := .Filter (images.Overlay $logo $x $y)}}
{{ $logo := resources.Get "img/overlay-logo.png" }}
{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
{{ range . }}
{{ $resized := .Fill "150x115 q20" }}
{{ $x := sub .Width (add $logo.Width 10) }}
{{ $y := sub .Height (add $logo.Height 10) }}
{{ $withlogo := .Filter (images.Overlay $logo $x $y)}}
{{ end }}
{{ end }}