4.性能待办

 1● 这篇 Hugo 文档主要讲了 Hugo 的图片处理功能，我给你总结一下核心内容：
 2
 3  主要内容概览
 4
 5  1. 图片资源的三种访问方式
 6
 7  - Page resource (页面资源) - page bundle 里的图片
 8  - Global resource (全局资源) - assets/ 目录下的图片
 9  - Remote resource (远程资源) - HTTP/HTTPS 远程图片
10
11  2. 核心图片处理方法
12
13  - Resize - 调整宽高（可能变形）
14  - Fit - 按比例缩小，保持宽高比
15  - Fill - 裁剪+缩放到指定尺寸
16  - Crop - 仅裁剪，不缩放
17  - Filter - 应用滤镜（高斯模糊、像素化等）
18  - Process - 通用处理方法（可替代上述所有方法）
19
20  3. 处理选项
21
22  - 尺寸：600x400
23  - 旋转：r90（逆时针90度）
24  - 格式转换：webp、jpg、png
25  - 质量：q75（1-100）
26  - 锚点：TopLeft、Center、Smart（智能裁剪）
27  - 背景色：#ffffff
28  - 重采样滤镜：Lanczos、Box 等
29
30  4. 其他功能
31
32  - EXIF 读取 - 提取照片元数据（拍摄时间、GPS、光圈等）
33  - Colors - 提取图片主色调
34  - Smart cropping - 智能识别图片重点区域进行裁剪
35
36  5. 性能优化
37
38  - Hugo 会将处理后的图片缓存在 resources/ 目录
39  - 建议将此目录加入版本控制，避免 CI/CD 时重复处理
40  - 使用 hugo --gc 清理未使用的图片
41
42  典型用法示例
43
44  {{/* 调整宽度为600px，保持比例 */}}
45  {{ $image := $image.Resize "600x" }}
46
47  {{/* 裁剪+缩放到 600x400，智能裁剪 */}}
48  {{ $image := $image.Fill "600x400 Smart" }}
49
50  {{/* 转换为 WebP 格式，质量50 */}}
51  {{ $image := $image.Resize "600x webp q50" }}
52
53  {{/* 旋转90度 */}}
54  {{ $image := $image.Process "r90" }}

1https://img.xxdevops.cn/blog/article_cover/photo-1667372393119-3d4c48d07fc9.webp?w=1200&h=690&fit=crop&fm=webp&q=80