转换图片

配置参数

extensions string[]

The list extensions this plugin applies to

Default:

[ ".jpg", ".jpeg", ".png", ".webp" ]

name string

The key name for the transformations definitions

Default:

"transformImages"

cache string boolean

The cache folder

Default:

true

functions record

Custom transform functions

描述

使用 transform_images 插件，通过 sharp 库来处理图片文件。有了这个插件，你可以调整大小、旋转图片，以及将任何图片转换为其他格式。

该插件读取分配给图片文件的数据（特别是 transformImages 键）来了解如何转换图片。

安装

在你的 _config.ts 文件中导入此插件即可使用它：

import lume from "lume/mod.ts";
import transformImages from "lume/plugins/transform_images.ts";

const site = lume();

site.use(transformImages(/* Options */));

export default site;

示例

在你的项目中创建一个 /img 文件夹来存储图片，并在该文件夹内创建一个 _data.yml 文件，内容如下：

transformImages:
  resize: [200, 200]
  format: webp

此文件将此数据分配给此文件夹及其子文件夹中的所有图片页面（有关 _data 文件的更多信息，请参阅 共享数据）。插件将读取数据，将所有图片调整为 200x200 大小，并将它们转换为 webp 格式。

要将图片转换为宽度为 200px 并保持纵横比，请仅使用一个值：

transformImages:
  resize: [200] # 设置宽度为 200px，自动计算高度
  format: webp

format 值可以是一个值数组，以便将相同的文件配置输出为不同的格式：

transformImages:
  resize: [200, 200]
  format: [webp, jpg]

多重输出

如果你需要创建同一图片文件的多个版本（例如，用于响应式设计），请使用转换数组。 确保包含 suffix 键，以便为输出文件生成不同的名称：

transformImages:
  - resize: [200, 200]
    suffix: -small
    format: [webp, jpg]
  - resize: [1000, 1000]
    format: webp
  - resize: [2000, 2000]
    suffix: -big
    format: webp

此代码为每个图片文件生成 4 个文件（请注意第一个转换具有 2 种格式）。例如，如果输入文件是 background.png，它将生成文件 background.webp、background.jpg、background-small.webp 和 background-big.webp。

匹配

matches 属性允许设置一个正则表达式，以便仅对与该模式匹配的文件执行转换。

在以下示例中，包含 -cover 的图像将被调整为 1000x1000，而包含 -icon 的图像将被调整为 100x100。

transformImages:
  - resize: [1000, 1000]
    matches: -cover

  - resize: [100, 100]
    matches: -icon

matches 值必须是 RegExp 或可用于创建 RegExp 实例的有效字符串。

自定义函数

默认情况下，以下函数可用：

• resize: 接受两个数字作为 width 和 height，以及可选的包含调整大小选项的对象。 有关更多信息，请参阅 sharp resize api。
• blur: 接受一个数字作为 sigma。
• rotate: 接受一个数字作为 degrees。

你可以在 _config 文件中添加更多自定义函数。例如：

import lume from "lume/mod.ts";
import transformImages from "lume/plugins/transform_images.ts";

const site = lume();

site.use(transformImages({
  functions: {
    resizeBlur(img, size) {
      img.resize(size, size);
      img.blur(10);
    },
  },
}));

export default site;

现在你可以在你的 _data 文件中使用这个函数：

transformImages:
  resizeBlur: 20
  format: webp

缓存

此插件将转换后的图片保存在 _cache 文件夹中，以提高构建速度。 如果你想禁用缓存，请将其选项设置为 false。

import lume from "lume/mod.ts";
import transformImages from "lume/plugins/transform_images.ts";

const site = lume();

site.use(transformImages({
  cache: false, // 禁用缓存
}));

export default site;

此选项允许自定义缓存文件夹。例如：cache: "_image-cache"。