HUGO 中文文档

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
gohugoio Star
  • 关于
    • 本节内容
    • 简介
    • 特性
    • 隐私
    • 安全
    • 许可证
  • 安装
    • 本节内容
    • macOS
    • Linux
    • Windows
    • BSD
  • 快速上手
    • 本节内容
    • 快速入门
    • 基本用法
    • 目录结构
    • 配置
    • 配置标记
    • 术语表
    • 配置构建
    • 外部学习资源
  • 快速参考
    • 本节内容
    • 表情符号
    • 函数
    • 方法
    • 页面集合
  • 内容管理
    • 本节内容
    • 组织
    • 页面包
    • 内容格式
    • Front matter (前置 matter)
    • 构建选项
    • 页面资源
    • 图片处理
    • 短代码
    • 相关内容
    • 章节
    • 内容类型
    • 原型
    • 分类法
    • 摘要
    • 链接和交叉引用
    • URL 管理
    • 菜单
    • 评论
    • 多语言
    • Markdown 属性
    • 语法高亮
    • 图表
    • 数学公式
    • 数据源
    • 内容适配器
  • 模板
    • 本节内容
    • 简介
    • 模板类型
    • 查找顺序
    • 基模板
    • 首页模板
    • 单个模板
    • 章节模板
    • 分类模板
    • 术语模板
    • 局部模板
    • 内容视图模板
    • 短代码模板
    • 站点地图模板
    • RSS 模板
    • 404 模板
    • robots.txt 模板
    • 菜单
    • 分页
    • 内嵌模板
    • 自定义输出格式
  • 函数
    • 本节内容
    • css
    • fmt
    • go 模板
    • hugo
    • js
    • lang
    • openapi3
    • os
    • urls
    • 全局
    • 加密
    • 反射
    • 变形
    • 变换
    • 哈希
    • 图像
    • 图表函数
    • 字符串
    • 安全函数
    • 局部模板函数
    • 数学
    • 数据
    • 时间
    • 模板
    • 比较
    • 类型转换
    • 编码
    • 调试
    • 资源
    • 路径
    • 集合
  • 方法
    • 本节内容
    • Duration
    • Menu
    • Page
    • Pager
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
    • 菜单项
    • 页面
  • 渲染钩子
    • 本节内容
    • 简介
    • 块引用
    • 代码块
    • 标题
    • Images
    • 链接
    • Passthrough
    • 表格
  • Hugo 模块
    • 本节内容
    • 配置 Hugo 模块
    • 使用 Hugo 模块
    • 主题组件
  • Hugo 管道
    • 本节内容
    • 简介
    • 将 Sass 编译为 CSS
    • PostCSS
    • PostProcess
    • JavaScript 构建
    • 资源压缩
    • 连接资产
    • 指纹和 SRI 哈希
    • 从字符串创建资源
    • 从模板创建资源
  • 命令行界面
  • 故障排除
    • 本节内容
    • Audit
    • 日志记录
    • 检查
    • 弃用
    • 性能
    • FAQs
  • 开发者工具
    • 本节内容
    • 编辑器插件
    • 前端
    • Search
    • 迁移
    • 其他项目
  • 托管和部署
    • 本节内容
    • Hugo 部署
    • 使用 Rclone 部署
    • 使用 Rsync 部署
    • 在 21YunBox 上托管
    • 在 AWS Amplify 上托管
    • 在 Cloudflare Pages 上托管
    • 在 Firebase 上托管
    • 在 GitLab Pages 上托管
    • 在 Netlify 上托管
    • 在 Render 上托管
    • 托管在 Azure 静态 Web 应用上
    • 托管在 GitHub Pages 上
    • 托管在 KeyCDN 上
  • 贡献
    • 本节内容
    • 开发
    • 文档
    • 主题
  • 维护
方法 资源方法

过滤器

应用于图像,将一个或多个图像过滤器应用于给定的图像资源。

Syntax

RESOURCE.Filter FILTER...

Returns

images.ImageResource

将一个或多个 图像过滤器 应用于给定的图像。

要应用单个过滤器:

{{ with resources.Get "images/original.jpg" }}
  {{ with .Filter images.Grayscale }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

要应用两个或多个过滤器,从左到右执行:

{{ $filters := slice
  images.Grayscale
  (images.GaussianBlur 8)
}}
{{ with resources.Get "images/original.jpg" }}
  {{ with .Filter $filters }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

您也可以使用 images.Filter 函数应用图像过滤器。

使用此方法结合 全局 、 页面 或 远程 资源。

示例

{{ with resources.Get "images/original.jpg" }}
  {{ with .Filter images.Grayscale }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

Original

Zion National Park

Processed

Zion National Park

图像过滤器

将这些过滤器中的任何一个与 Filter 方法一起使用。

images.AutoOrient
返回一个图像过滤器,根据图像的 EXIF 方向标记需要旋转和翻转图像。
images.Brightness
返回一个更改图像亮度的图像过滤器。
images.ColorBalance
返回一个更改图像颜色平衡的图像过滤器。
images.Colorize
返回一个图像过滤器,该过滤器会生成图像的彩色版本。
images.Contrast
返回一个更改图像对比度的图像过滤器。
images.Dither
返回一个对图像进行抖动的图像过滤器。
images.Gamma
返回一个对图像执行伽马校正的图像滤镜。
images.GaussianBlur
返回一个图像过滤器,该过滤器将高斯模糊应用于图像。
images.Grayscale
返回一个图像过滤器,该过滤器会生成图像的灰度版本。
images.Hue
返回一个旋转图像色相的图像过滤器。
images.Invert
返回一个反转图像颜色的图像过滤器。
images.Opacity
返回一个更改图像不透明度的图像过滤器。
images.Overlay
返回一个图像过滤器,该过滤器将源图像叠加在给定坐标处,相对于左上角。
images.Padding
返回一个图像过滤器,该过滤器调整图像画布大小而不会调整图像大小。
images.Pixelate
返回一个图像过滤器,该过滤器会对图像应用像素化效果。
images.Process
返回一个图像过滤器,使用给定的规范处理给定的图像。
images.Saturation
返回一个更改图像饱和度的图像过滤器。
images.Sepia
返回一个图像过滤器,该过滤器会生成图像的棕褐色版本。
images.Sigmoid
返回一个图像过滤器,该过滤器使用 S 形函数更改图像的对比度。
images.Text
返回一个图像过滤器,用于向图像添加文本。
images.UnsharpMask
返回一个锐化图像的图像过滤器。

See also

  • images.Filter

On this page

  • 示例
  • 图像过滤器

In this section

  • EXIF
  • RelPermalink
  • 内容
  • 参数
  • 发布
  • 名称
  • 填充
  • 处理
  • 媒体类型
  • 宽度
  • 数据
  • 标题
  • 永久链接
  • 裁剪
  • 调整大小
  • 资源类型
  • 过滤器
  • 适应
  • 错误处理
  • 颜色
  • 高度
Last updated: January 10, 2025: 添加 gtm 谷歌代码管理 (6220bf5)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • @GoHugoIO
  • @spf13
  • @bepsays
 

Hugo Sponsors

Your Company?
 

The Hugo logos are copyright © Steve Francia 2013–2025.

The Hugo Gopher is based on an original work by Renée French.

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
  • 关于
  • 安装
  • 快速上手
  • 快速参考
  • 内容管理
  • 模板
  • 函数
  • 方法
  • 渲染钩子
  • Hugo 模块
  • Hugo 管道
  • 命令行界面
  • 故障排除
  • 开发者工具
  • 托管和部署
  • 贡献
  • 维护