Skip to main content

Hugo组件 给图片加上水印

写 hugo 的时候遇到了一些动态网页才有的功能,比如说图片加水印一类的,于是就写了一个加水印的组件。

这个组件可以给 assets 目录的图片加上水印。

Shortcode

将以下代码保存至 layouts/shortcodes/image.html,没有目录就直接创建,hugo 会自己找到。

<!-- 带水印的 image shortcode -->
<!-- 参数 img | src | inner,图片相对 assets/ 的路径 -->
{{ $imgAssetsPath := ( or ( or (.Get "img") (.Get "src") ) (.Inner) ) }}
<!-- 参数 watermark,水印相对 assets/ 的路径,默认为 /config.yaml/params/watermarkPath,所以可以不填 -->
{{ $watermarkAssetsPath := ( or ( or (.Get "watermark") (.Page.Site.Params.watermarkPath) ) "" ) }}
<!-- 参数 origin,为 true 时显示原图 -->
{{ $origin := ( or (.Get "origin") "false" ) }}
<!-- 参数 margin,水印相对原图右下的间距,默认64px -->
{{ $margin := ( or (.Get "margin") 64 ) }}
<!-- 参数 watermarkRatio,水印相对于原图的宽度比例,高度自动调整,默认30% -->
{{ $watermarkRatio := ( or (.Get "watermarkRatio") .3 ) }}

<!-- 开始处理 -->

<!-- 读取原图 -->
{{ $img := resources.Get $imgAssetsPath }}
<!-- 是否输出原图 -->
{{ if (eq $watermarkAssetsPath "") }}
{{ $origin = "true" }}
{{ end }}
<!-- output 为处理后的图片URL -->
{{ $output := "" }}

{{ if (eq $origin "true") }}
{{ $output = $img.Permalink }}
{{ else }}
<!-- 开始处理水印 -->
<!-- 载入水印资源 -->
{{ $watermark := resources.Get $watermarkAssetsPath }}
<!-- 计算水印实际宽度,并调整水印大小 -->
{{ $actualWaterMarkWidth := (mul $img.Width $watermarkRatio) }}
{{ $watermark = $watermark.Resize ( $actualWaterMarkWidth | printf "%.0fx" ) }}
<!-- 水印处理 -->
{{ $filteredResource := $img.Filter ( images.Overlay $watermark  (sub (sub $img.Width $watermark.Width) $margin) (sub (sub $img.Height $watermark.Height) $margin) ) }}
{{ $output = $filteredResource.Permalink }}
{{ end }}


<!-- 除 img src 外,其他都搬自 figure -->
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
  {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
      <img src="{{ $output }}" />
  {{ if .Get "link" }}</a>{{ end }}
  {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
  <figcaption>{{ if isset .Params "title" }}
      <h4>{{ .Get "title" }}</h4>{{ end }}
      {{ if or (.Get "caption") (.Get "attr") }}<p>
      {{ .Get "caption" }}
      {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
          {{ .Get "attr" }}
      {{ if .Get "attrlink" }}</a> {{ end }}
      </p> {{ end }}
  </figcaption>
  {{ end }}
</figure>

使用方法

如果会看模板的话,应该能通过注释理解到了。

参数描述

参数 M 描述 默认值
src img, src 两者必选其一 原图路径,相对 assets/ -
img img, src 两者必选其一 原图路径,相对 assets/ -
watermark 可选 水印路径,相对 assets/ 取配置文件 params.watermark
origin 可选 是否仅显示原图 false
margin 可选 水印相对原图右下的间距 64
watermarkRatio 可选 水印相对原图的宽度缩放比例,高度自动调整 0.3

示例

水印: assets/watermark.png

原图: assets/imgs/source-image.png

方法1:

< image src="assets/imgs/source-image.png" watermark="assets/watermark.png" />

方法2:

< image img="assets/imgs/source-image.png" watermark="assets/watermark.png" />