@11ty/eleventy-img 中文文档教程
eleventy-img
需要 Node 12+
低级实用程序来为矢量和光栅图像执行构建时图像转换. 输出多种尺寸,保存多种格式,在本地缓存远程图像。 使用 sharp 图像处理器。
您保持对 HTML 的完全控制——此插件不生成任何标记。 与 或
或 CSS
background-image
或其他一起使用! 非常适合将 width
和 height
添加到您的图像中! 不需要或依赖 URL 或本地文件中的文件扩展名(如 .png
或 .jpg
),这些文件扩展名可能会丢失或不准确。
The full eleventy-img
documentation is on 11ty.dev.
- This is a plugin for the Eleventy static site generator.
- Find more Eleventy plugins.
- Please star Eleventy on GitHub, follow @eleven_ty on Twitter, and support 11ty on Open Collective
Installation
npm install --save-dev @11ty/eleventy-img
完整的 eleventy-img
文档位于 11ty.dev。
Tests
npm run test
- We use the ava JavaScript test runner (Assertions documentation)
- ℹ️ To keep tests fast, thou shalt try to avoid writing files in tests.
Community Roadmap
- Top Feature Requests (Add your own votes using the reaction)
- Top Bugs ???? (Add your own votes using the reaction)
- Newest Bugs ????
eleventy-img
Requires Node 12+
Low level utility to perform build-time image transformations for both vector and raster images. Output multiple sizes, save multiple formats, cache remote images locally. Uses the sharp image processor.
You maintain full control of your HTML—this plugin does not generate any markup. Use with <picture>
or <img>
or CSS background-image
, or others! Works great to add width
and height
to your images! Does not require or rely on file extensions (like .png
or .jpg
) in URLs or local files, which may be missing or inaccurate.
The full eleventy-img
documentation is on 11ty.dev.
- This is a plugin for the Eleventy static site generator.
- Find more Eleventy plugins.
- Please star Eleventy on GitHub, follow @eleven_ty on Twitter, and support 11ty on Open Collective
Installation
npm install --save-dev @11ty/eleventy-img
The full eleventy-img
documentation is on 11ty.dev.
Tests
npm run test
- We use the ava JavaScript test runner (Assertions documentation)
- ℹ️ To keep tests fast, thou shalt try to avoid writing files in tests.
Community Roadmap
- Top Feature Requests (Add your own votes using the ???? reaction)
- Top Bugs ???? (Add your own votes using the ???? reaction)
- Newest Bugs ????