在画廊图片上叠加Logo

{{ $image := (.Page.Resources.ByType "image") }} {{ with $image }} {{ range . }} {{ $resized := .Fill "150x115 q20" }} {{ end }} {{ end }}

步骤1:显示Logo

为了被Hugo处理,图片必须是页面资源或全局资源。画廊图片本来就是页面资源,但将要叠加在所有画廊图片上的Logo并不属于单个页面。因此,它必须是全局资源。最简单的方法是将其放入assets文件夹。一旦它在那里,就可以通过以下方式应用到所有画廊图片:

  • 使用resources.Get加载Logo
  • 应用过滤器,将画廊图片与Logo叠加
  • 在画廊中显示更改后的图片,而不是原始图片

以下是带有更改的提交。完整的更改后的短代码现在看起来像这样:

{{ $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 }}
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485