HUGO
Menu
GitHub 87548 stars Mastodon

图像处理

处理、转换和分析图像。

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

渲染

一旦你将图像捕获为资源,使用 PermalinkRelPermalinkWidthHeight 方法在模板中渲染它。

示例 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 }}

在图像转换期间元数据不会保留。对 原始 图像资源使用 ExifMeta 方法从 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


Last updated: January 1, 0001
Improve this page