在@11ty/eleventy img中,可以通过在配置文件(.eleventy.js)中指定outputDir来为处理过的镜像指定输出目录。
首先,打开你的配置文件(.eleventy.js),确保已经导入了@11ty/eleventy img插件,并且进行了相应的配置。在插件配置中,可以通过传递一个对象来指定输出目录。
下面是一个示例配置文件的代码:
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("images");
eleventyConfig.addNunjucksAsyncShortcode("myImage", async function(src, alt, sizes = "100vw") {
if (src && alt) {
let metadata = await Image(src, {
widths: [300, 600, 1200],
formats: ["avif", "jpeg"],
outputDir: "_site/images" // 指定输出目录
});
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
return Image.generateHTML(metadata, imageAttributes);
}
return "";
});
};
在上述配置中,我们使用addNunjucksAsyncShortcode方法创建了一个名为myImage的自定义shortcode,并指定了输出目录为"_site/images"。该shortcode使用@11ty/eleventy-img来处理图片,并根据传递的参数生成响应的HTML标签。
通过将处理后的镜像输出到指定的outputDir,我们可以将镜像文件集中保存在一个特定的目录中,方便管理和部署。
请注意,以上示例仅为演示目的,实际的配置可能会根据项目需求有所不同。具体的使用方式和配置细节,请参考@11ty/eleventy-img的官方文档:https://www.11ty.dev/docs/plugins/image/。
领取专属 10元无门槛券
手把手带您无忧上云