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" />