十一相插图

将夏普的全部能力带入您静态网站的"十一一"插件,优化资产,提高网站性能. 带给你的 代码链来啊!

此插件是现已放弃的续作 十一号插孔 以 卢韦斯。 。 。 .

[TIP] 可以找到覆盖此 README 中全部信息的教程视频 在YouTube上的发言

目录

• 特征
• 安装
• 配置
• 使用量
  • 实例
• VSCode 片断
• 如何运作
• 特别 谢谢

特征

1. 完整的 Sharp 集成, 允许您十一进制计划中的裁剪、 调整大小、 压缩、 操纵和更改文件类型
2. 高效率的缓存机制,防止在建筑物内部和建筑物之间,无论是在当地还是在部署到Netlife时,再生相同的图像
3. 同步处理 - 即使使用非同步特性( 如 Nunjucks macros)

安装

1. 安装插件 :

npm install @codestitchofficial/eleventy-plugin-sharp-images

2. 配置 11:

// 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 的缓存插件 :

npm install netlify-plugin-cache

4. 添加缓存配置到 netlify.toml 在您的仓库根中 :

[[plugins]]
package = "netlify-plugin-cache"

  [plugins.inputs]
  paths = [
    "public/assets/images", # Processed images - adjust to match your outputDir
    ".cache" # Remote Assets
  ]

配置

插件接受以下配置选项:

• urlPath: 您已建站点中生成的图像 URL的前缀
• outputDir: 处理后图像应保存的目录
• cacheStrategy: 缓存策略用于("自动","内容",或"数据"). 默认为"自动"
• autoRotate:一些图像在其EXIF取向和图像的渲染方式之间有错配. 当启用此配置选项时( 默认值为 true),仅在需要时自动应用 EXIF 定向校正(即当取向 QQ 1)

使用量

该插件通过使用 {% getUrl %} 短码、 提供图像 URL 和链条过滤器 夏普的变换选择数字 :

<picture>
    <source srcset="{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) | avif %}" media="(max-width: 600px)" type="image/avif"> <source srcset="{% getUrl
    "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) | webp %}" media="(max-width: 600px)" type="image/webp"> <source srcset="{% getUrl "/assets/images/image.jpg" |
    resize({ height: 400, width: 400 }) | jpeg %}" media="(min-width: 601px)" type="image/jpeg"> <img src="{% getUrl "/assets/images/image.jpg" | resize({ height: 400, width: 400
    }) | jpeg %}" alt="Description of the image">
</picture>

在这个例子中,我们设置了响应图像 HTML 有3个 <source> 要素。 每个源都会从 /assets/images/image.jpg,使用 resize 在将图像输出为AVIF、WebP或JPEG格式之前,将图像切入特定维度.

处理后图像被缓存以防止不必要的再生.

每一个尖锐的变换都可以作为滤波器,选项作为对象传递. 例如,在调整大小时调整图像位置:

{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50, position: "top" }) | avif %}

请确保每个变换选项都有与其键相关的值. 如果做不到这一点,则在建造场地时将出现错误:

错误

{% getUrl "/assets/images/image.jpg" | resize({ height: , width: 50 }) | avif %}

对

{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) | avif %}

实例

1. 将图像大小调整为设置维度 :

{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) %}

2. 将图像大小调整为设置维度并转换为AVIF,质量值为75:

{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50 }) | avif({ quality: 75 }) %}

3. 将图像大小调整到设置尺寸, 裁剪到感兴趣的区域, 并转换到 AVIF :

{% getUrl "/assets/images/image.jpg" | resize({ height: 50, width: 50, position: "attention" }) | avif %}

4. 旋转一幅90度并转换为灰度的图像 :

{% getUrl "/assets/images/image.jpg" | rotate(90) | grayscale %}

VSCode 片断

对于 VSCode 用户,我们创建了一个片段,可以在使用插件时帮助精简您的工作流程 :

    "eleventy-plugin-sharp-images Snippit": {
        "prefix": "respimg",
        "body": [
            "<picture class=\"${1}\">",
            "   <!--Mobile Image-->",
            "   <source media=\"(max-width: 600px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${3}, height: ${4} }) | avif %}\" type=\"image/avif\">",
            "   <source media=\"(max-width: 600px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${3}, height: ${4} }) | webp %}\" type=\"image/webp\">",
            "   <source media=\"(max-width: 600px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${3}, height: ${4} }) | jpeg %}\" type=\"image/jpeg\">",
            "   <!--Tablet Image-->",
            "   <source media=\"(max-width: 1024px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${5}, height: ${6} }) | avif %}\" type=\"image/avif\">",
            "   <source media=\"(max-width: 1024px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${5}, height: ${6} }) | webp %}\" type=\"image/webp\">",
            "   <source media=\"(max-width: 1024px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${5}, height: ${6} }) | jpeg %}\" type=\"image/jpeg\">",
            "   <!--Desktop Image-->",
            "   <source media=\"(min-width: 1024px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${7}, height: ${8} }) | avif %}\" type=\"image/avif\">",
            "   <source media=\"(min-width: 1024px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${7}, height: ${8} }) | webp %}\" type=\"image/webp\">",
            "   <source media=\"(min-width: 1024px)\" srcset=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${7}, height: ${8} }) | jpeg %}\" type=\"image/jpeg\">",
            "   <img src=\"{% getUrl \"${2:/assets/images/placeholder.jpg}\" | resize({ width: ${7}, height: ${8} }) | jpeg %}\" alt=\"${9}\" width=\"${10}\" height=\"${11}\" loading=\"${12:lazy}\" decoding=\"async\" ${13:aria-hidden=\"true\"}>",
            "</picture>"
        ],
        "description": "eleventy-plugin-sharp-images Snippit"
    }

简而言之, 把这个放入您在 VSCode 中 HTML 语言的片段文件 。 有关安装和使用片段的更多信息,请访问 YouTube 教程视频。 。 。 .

如何运作

为了支持不允许Aync特性的环境(就像在Nunjucks Macro中处理一个图像一样),短码不会直接生成图像. 相反,它用JSON配置对象创建了注释. 在"十一一"建筑的结尾,"变形"使用正则克ex来查找这些评论的所有实例并处理图像.

配置被散列,文件被更名为包含此散列. 如果图像路径或其变换发生改变,散列/文件名会改变,缓存无效. 这与网化-插剂-卡切合作,防止活体环境中的建筑之间发生后处理.

特别 谢谢

• 卢韦斯 用于建造原作 十一号插孔
• 多行注释 他们的文章 使用 11T 变换在 Nunjucks 宏中实现同步内容
• 雷蒙德・卡姆登 他的向导 使用带有 11T 的 Netlify 缓存插件