# @codestitchofficial/eleventy-plugin-sharp-images 中文文档 规范地址：https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/ 版本：2\.2\.0 npm 元数据更新时间：2025-08-02T12:17:56.821Z 中文译文更新时间：2026-11-10T08:05:24.633Z 软件包许可：ISC 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40codestitchofficial/eleventy-plugin-sharp-images 原文对照：https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/?lang=original 项目主页：https://github.com/CodeStitchOfficial/eleventy-plugin-sharp-images#readme 源码仓库：https://github.com/CodeStitchOfficial/eleventy-plugin-sharp-images ## 关键信息（来自 npm 元数据） - 包体积（解压后）：15.2 MB，94 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - Node.js 要求：\>=14\.0\.0 - 运行依赖：4 个 - 首次发布：2024-08-14T13:47:20.259Z - 最新版本发布：2025-08-02T12:17:56.602Z - 近 30 天下载量：3143（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：19（近 12 个月 0 个） ## 中文简介 使用 Sharp 处理图像的十一进取插件 ## 安装 ```sh npm install @codestitchofficial/eleventy-plugin-sharp-images ``` 也可以使用：`pnpm add @codestitchofficial/eleventy-plugin-sharp-images`、`yarn add @codestitchofficial/eleventy-plugin-sharp-images`、`bun add @codestitchofficial/eleventy-plugin-sharp-images` ## README # 十一相插图 将夏普的全部能力带入您静态网站的"十一一"插件,优化资产,提高网站性能. 带给你的 [代码链](https://codestitch.app/)来啊! 此插件是现已放弃的续作 [十一号插孔](https://github.com/luwes/eleventy-plugin-sharp) 以 [卢韦斯](https://github.com/luwes/)。 。 。 . > \[TIP\] 可以找到覆盖此 README 中全部信息的教程视频 [在YouTube上的发言](https://www.youtube.com/watch?v=scYFC1LRfPg) ## 目录 - [特征](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-features) - [安装](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-installation) - [配置](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-configuration) - [使用量](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-usage) - [实例](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-examples) - [VSCode 片断](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-vscode-snippet) - [如何运作](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-how-it-works) - [特别 谢谢](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-special-thanks) [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-features) ## 特征 1. 完整的 Sharp 集成, 允许您十一进制计划中的裁剪、 调整大小、 压缩、 操纵和更改文件类型 2. 高效率的缓存机制,防止在建筑物内部和建筑物之间,无论是在当地还是在部署到Netlife时,再生相同的图像 3. 同步处理 - 即使使用非同步特性( 如 Nunjucks macros) [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-installation) ## 安装 1. 安装插件 : ```bash npm install @codestitchofficial/eleventy-plugin-sharp-images ``` 2. 配置 11: ```javascript // eleventy.js const eleventyPluginSharpImages = require("@codestitchofficial/eleventy-plugin-sharp-images"); module.exports = function (eleventyConfig) { // other plugins eleventyConfig.addPlugin(eleventyPluginSharpImages, { urlPath: "/assets/images", outputDir: "public/assets/images", autoRotate: true, // Automatically fix EXIF orientation issues }); }; ``` > \[大 此插件依赖于特定的 HTML 注释来处理图像 。 如果这些注释在此插件运行前通过微调去除或更改,则会出错. 要防止这种情况, 请确保添加 HTML 密接插件 _之后_ 此插件在您的"十一"配置文件中 。 这确保在任何微分化发生之前进行图像处理. > \[叹息\] `eleventy.js` 只接受一个 `module.exports`。确定您粘贴上面的插件片段 **内部** 当前 `module.exports`。 。 。 . 3. 对于缓存( 仅使用 ) , 安装 Netlify 的缓存插件 : ```bash npm install netlify-plugin-cache ``` 4. 添加缓存配置到 `netlify.toml` 在您的仓库根中 : ```toml [[plugins]] package = "netlify-plugin-cache" [plugins.inputs] paths = [ "public/assets/images", # Processed images - adjust to match your outputDir ".cache" # Remote Assets ] ``` [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-configuration) ## 配置 插件接受以下配置选项: - `urlPath`: 您已建站点中生成的图像 URL的前缀 - `outputDir`: 处理后图像应保存的目录 - `cacheStrategy`: 缓存策略用于("自动","内容",或"数据"). 默认为"自动" - `autoRotate`:一些图像在其EXIF取向和图像的渲染方式之间有错配. 当启用此配置选项时( 默认值为 `true`),仅在需要时自动应用 EXIF 定向校正(即当取向 QQ 1) [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-usage) ## 使用量 该插件通过使用 `{% getUrl %}` 短码、 提供图像 URL 和链条过滤器 [夏普的变换选择](https://sharp.pixelplumbing.com/api-output)数字 : ```html Description of the image ``` 在这个例子中,我们设置了响应图像 HTML 有3个 `` 要素。 每个源都会从 `/assets/images/image.jpg`,使用 `resize` 在将图像输出为AVIF、WebP或JPEG格式之前,将图像切入特定维度. 处理后图像被缓存以防止不必要的再生. 每一个尖锐的变换都可以作为滤波器,选项作为对象传递. 例如,在调整大小时调整图像位置: ```nunjucks {% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50, position: "top" }) | avif %} ``` 请确保每个变换选项都有与其键相关的值. 如果做不到这一点,则在建造场地时将出现错误: **错误** ```nunjucks {% getUrl "/assets/images/image.jpg" | resize({ height: , width: 50 }) | avif %} ``` **对** ```nunjucks {% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) | avif %} ``` [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-examples) ### 实例 1. 将图像大小调整为设置维度 : ```nunjucks {% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) %} ``` 2. 将图像大小调整为设置维度并转换为AVIF,质量值为75: ```nunjucks {% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) | avif({ quality: 75 }) %} ``` 3. 将图像大小调整到设置尺寸, 裁剪到感兴趣的区域, 并转换到 AVIF : ```nunjucks {% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50, position: "attention" }) | avif %} ``` 4. 旋转一幅90度并转换为灰度的图像 : ```nunjucks {% getUrl "/assets/images/image.jpg" | rotate(90) | grayscale %} ``` [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-vscode-snippet) ## VSCode 片断 对于 VSCode 用户,我们创建了一个片段,可以在使用插件时帮助精简您的工作流程 : ``` "eleventy-plugin-sharp-images Snippit": { "prefix": "respimg", "body": [ "", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " \"${9}\"", "" ], "description": "eleventy-plugin-sharp-images Snippit" } ``` 简而言之, 把这个放入您在 VSCode 中 HTML 语言的片段文件 。 有关安装和使用片段的更多信息,请访问 [YouTube 教程视频](https://youtu.be/scYFC1LRfPg?si=pMuDRu3FbiCNq8Ac&t=1532)。 。 。 . [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-how-it-works) ## 如何运作 为了支持不允许Aync特性的环境(就像在Nunjucks Macro中处理一个图像一样),短码不会直接生成图像. 相反,它用JSON配置对象创建了注释. 在"十一一"建筑的结尾,"变形"使用正则克ex来查找这些评论的所有实例并处理图像. 配置被散列,文件被更名为包含此散列. 如果图像路径或其变换发生改变,散列/文件名会改变,缓存无效. 这与网化-插剂-卡切合作,防止活体环境中的建筑之间发生后处理. [](https://npmcn.com/package/%40codestitchofficial/eleventy-plugin-sharp-images/#readme-special-thanks) ## 特别 谢谢 - [卢韦斯](https://github.com/luwes/) 用于建造原作 [十一号插孔](https://github.com/luwes/eleventy-plugin-sharp) - [多行注释](https://multiline.co/) 他们的文章 [使用 11T 变换在 Nunjucks 宏中实现同步内容](https://multiline.co/mment/2022/08/eleventy-transforms-nunjucks-macros/) - [雷蒙德・卡姆登](https://www.raymondcamden.com/) 他的向导 [使用带有 11T 的 Netlify 缓存插件](https://www.raymondcamden.com/2022/06/26/testing-the-netlify-cache-plugin-with-eleventy) ## 常见问题 ### @codestitchofficial/eleventy-plugin-sharp-images 是什么？ 使用 Sharp 处理图像的十一进取插件 ### 如何安装 @codestitchofficial/eleventy-plugin-sharp-images？ 在项目目录运行 npm install @codestitchofficial/eleventy-plugin-sharp-images，或使用 pnpm add / yarn add / bun add。 ### @codestitchofficial/eleventy-plugin-sharp-images 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/codestitchofficial\_\_eleventy-plugin-sharp-images 是否存在。 ### @codestitchofficial/eleventy-plugin-sharp-images 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @codestitchofficial/eleventy-plugin-sharp-images 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=14\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @codestitchofficial/eleventy-plugin-sharp-images 可以商用吗？ @codestitchofficial/eleventy-plugin-sharp-images 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @codestitchofficial/eleventy-plugin-sharp-images 的下载量有多少？ 根据 npm 官方下载统计，@codestitchofficial/eleventy-plugin-sharp-images 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,143 次，日均约 105 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @codestitchofficial/eleventy-plugin-sharp-images 还在维护吗？ 最新版本 2\.2\.0 发布于 2025/08/02（1\.3 年前）；至今共发布 19 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/08/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。