图像处理
Hugo 提供在构建过程中转换和分析图像的方法。结果会被缓存以确保后续构建保持快速。
资源
要处理图像,你必须将文件捕获为页面资源、全局资源或远程资源。
页面
page resource(页面资源)?page bundle(页面捆绑包)内的文件
content/
└── posts/
└── post-1/ <-- 页面 bundle
├── index.md
└── sunset.jpg <-- 页面资源要将图像捕获为页面资源:
{{ $image := .Resources.Get "sunset.jpg" }}全局
global resource(全局资源)是 assets 目录内或挂载?assets 目录的任何目录中的文件
assets/
└── images/
└── sunset.jpg <-- 全局资源要将图像捕获为全局资源:
{{ $image := resources.Get "images/sunset.jpg" }}远程
remote resource(远程资源)是通过 HTTP ?HTTPS 可访问的远程服务器上的文件
要将图像捕获为远程资源:
{{ $image := resources.GetRemote "https://www.hugodoc.com/img/hugo-logo.png" }}渲染
一旦你将图像捕获为资源,使用 Permalink、RelPermalink、Width 和 Height 方法在模板中渲染它。
示例 1:如果找不到资源则抛出错误。
{{ $image := .Resources.GetMatch "sunset.jpg" }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">示例 2:如果找不到资源则跳过图像渲染。
{{ $image := .Resources.GetMatch "sunset.jpg" }}
{{ with $image }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}示例 3:如果找不到资源则跳过图像渲染的更简洁方法。
{{ with .Resources.GetMatch "sunset.jpg" }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}示例 4:如果访问远程资源有问题则跳过渲染。
{{ $url := "https://www.hugodoc.com/img/hugo-logo.png" }}
{{ with try (resources.GetRemote $url) }}
{{ with .Err }}
{{ errorf "%s" . }}
{{ else with .Value }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ else }}
{{ errorf "Unable to get remote resource %q" $url }}
{{ end }}
{{ end }}处理
要转换图像,对图像资源应用处理方法。Hugo 按需生成处理后的图像,缓存结果,并返回新的资源对象。
{{ with .Resources.Get "sunset.jpg" }}
{{ with .Resize "400x" }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}
{{ end }}在图像转换期间元数据不会保留。对 原始 图像资源使用 Exif 或 Meta 方法从 JPEG、PNG、TIFF 和 WebP 图像中提取元数据。
每种方法服务于特定的转换或元数据需求:
| Method | Description |
|---|---|
Colors |
使用简单直方图方法返回最主导颜色的切片。 |
Crop |
返回根据给定处理规范裁剪的新图像资源。 |
Exif |
适用于 JPEG、PNG、TIFF 和 WebP 图像,返回包含 Exif 元数据的对象。 |
Fill |
返回根据给定处理规范裁剪和调整大小的新图像资源。 |
Filter |
对一个或多个图像滤镜应用于给定图像资源。 |
Fit |
返回根据给定处理规范缩小的新图像资源。 |
Meta |
适用于 JPEG、PNG、TIFF 和 WebP 图像,返回包含 Exif、IPTC 和 XMP 元数据的对象。 |
Process |
返回根据给定处理规范处理的新图像资源。 |
Resize |
返回根据给定处理规范调整大小的新图像资源。 |
从上面的表中选择方法以获取语法和使用示例。
性能
缓存
Hugo 按需处理图像并返回新的资源对象。为确保后续构建保持快速,Hugo 将结果缓存在站点配置的 [file cache] 部分指定的目录中。
如果你使用 Netlify 托管站点,在站点配置中包含以下内容以在构建之间持久化图像缓存:
[caches]
[caches.images]
dir = ':cacheDir/images'垃圾回收
如果你更改图像处理方法,或重命名/删除图像,缓存最终将包含未使用的文件。要删除它们并回收磁盘空间,运行 Hugo 的垃圾回收:
hugo --gc资源使用
处理图像所需的时间和内存随图像的尺寸增加而增加。例如,4032x2268 图像比 1920x1080 图像需要更多的内存和处理时间。
如果你的源图像比你打算发布的最大尺寸大得多,考虑在构建之前缩小它们以优化性能。
配置
请参阅 configure imaging。