11ty-dither 中文文档教程
尚未准备好生产
@11ty-dither
使用 dither-me-this 在构建时抖动图像 11ty。
11ty-dither 获取源图像,并输出多种尺寸和格式的抖动图像。 它将您的 元素替换为响应式
元素。
@11ty-dither 和 dither-me-this 是开源项目。 你可以通过 github 贡献。
Setup
npm install @11ty-dither
const { ditherAllImages } = require('@11ty-dither')
module.exports = (eleventyConfig) => {
const ditherOptions = {
/* Options for dither-me-this work here */
inputDirectory: './src',
outputDirectory: './_site',
imageFolder: '/images',
palette: ["#000", "#FFF"]
}
eleventyConfig.addPlugin(ditherAllImages, ditherOptions)
}
Not Ready for Production
@11ty-dither
Dither images at build time for 11ty using dither-me-this.
11ty-dither takes a source image, and outputs dithered images in multiple sizes and formats. It replaces your <img>
element with a responsive <picture>
element.
@11ty-dither and dither-me-this are open source projects. You can contribute via github.
Setup
npm install @11ty-dither
const { ditherAllImages } = require('@11ty-dither')
module.exports = (eleventyConfig) => {
const ditherOptions = {
/* Options for dither-me-this work here */
inputDirectory: './src',
outputDirectory: './_site',
imageFolder: '/images',
palette: ["#000", "#FFF"]
}
eleventyConfig.addPlugin(ditherAllImages, ditherOptions)
}