首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在@11ty/eleventy img中为我处理过的镜像指定outputDir?

在@11ty/eleventy img中,可以通过在配置文件(.eleventy.js)中指定outputDir来为处理过的镜像指定输出目录。

首先,打开你的配置文件(.eleventy.js),确保已经导入了@11ty/eleventy img插件,并且进行了相应的配置。在插件配置中,可以通过传递一个对象来指定输出目录。

下面是一个示例配置文件的代码:

代码语言:txt
复制
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/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个现代静态网站生成器Eleventy

所以 Eleventy(通常简称为 11ty)是奇怪命名 JavaScript 工具包又一个。但作为静态站点生成器,它有什么优势呢?...(我将不涉及将站点公开,因为我在 Netlify 文章已经介绍过。) Eleventy 有一个我非常喜欢看到快速入门指南。它还直接使用 Markdown。...我们希望将内容保留在 Markdown ,并让 Eleventy 我们创建站点。Eleventy 使用两个有用概念来实现这一点。...这使我们能够在任何模板定义变量(或元数据),就像我们 Liquid 所做那样。...然而,要获得现代网站所有精彩组件,你需要深入了解,我将在以后文章详细介绍。目前要点是,Eleventy我们提供了一个良好流程,与现有技术协同工作,同时引导我们遵循良好实践。

12810

【学习图片】14.网站生成器、框架和内容管理系统

了解内容管理系统(CMS),WordPress和其他站点生成器如何使响应式图像使用更加容易。...这通常需要一个以上图像管理过程:一个开发层面的任务,用于建设和维护网站图像资产--背景、图标、标志等等;另一个任务是关于通过使用网站产生图像资产,编辑团队在帖子嵌入照片,或用户上传头像。...静态站点生成器 与任务运行器相比,静态网站生成器(Jekyll或Eleventy)处理图像方式有一些相似之处。...const Image = require("@11ty/eleventy-img"); module.exports = function(eleventyConfig) { async function...例如,要将所有生成图像默认压缩质量设置70,请使用以下方法。

90620
  • 自动化当道,破密、爬虫各凭本事(GitHub 热点速览 Vol.37)

    摘要:安全门外汉,如何在不知道密钥或密码情况下,破解哈希得到原文,Ciphey 会告诉你当中密码。说到 auto 智能爬虫会基于上一次爬虫经历进一步学习以获得类似信息。...在高速网络,最理想的人数是 6 到 8 人左右。 GitHub 地址→https://github.com/vasanthv/talk ?...本周 star 增长数:1800+ eleventy-high-performance-blog 是 Google 开源 11ty 静态博客收录高性能博客模版,如果你也是 11ty.dev 粉丝...GitHub 地址→https://github.com/google/eleventy-high-performance-blog ?...推荐阅读 GitHub 热点速览 Vol.36:当股票遇到机器学习,异常股无所遁形 GitHub 热点速览 Vol.35:Let's Go,Rust 大放异彩 以上 2020 年第 36 个工作周

    51930

    Islands Architecture 孤岛(岛屿)架构

    这些交互“岛屿”脚本可以独立地传递和激活,允许页面的其余部分只是静态HTML。加载和处理过 JavaScript 可能会影响性能。...Astro:Astro 是一个静态网站构建器,可以从其他框架( React、Preact、Svelte、Vue 等)构建 UI 组件生成轻量级静态 HTML 页面。...Eleventy + Preact:Markus Oberlehner 演示了 Eleventy 使用,Eleventy 是一种静态站点生成器,具有可以部分水合同构 Preact 组件。...将 Astro 与 Next.js 和 Nuxt.js 创建文档网站进行比较,发现 JavaScript 代码减少了 83%。其他用户也报告了 Astro 性能改进。...该架构不适合高度互动页面,社交媒体应用程序,这可能需要数千个岛屿。Islands 架构概念相对较新,但由于其性能优势,可能会加快速度。

    20810

    SpringCloud+Docker+Jenkins+GitLab+Maven实现自动化构建与部署实战

    路径和编译之后镜像文件存放到指定路径固定,不动态参数进行处理传值....# 保存编译之后镜像文件存放到指定路径 docker save $IMG_NAME -o $IMG_TAR_GZ_PATH/$IMG_NAME.tar.gz echo " .....docker save命令是保存编译tar.gz或tar压缩文件,语法: docker save 镜像名 -o 路径/镜像名.tar.gz 或 docker save 镜像名 -o 路径/镜像名...4.2.7 虚悬镜像 在docker编译不成功会或者是新版本覆盖旧版本归类虚悬镜像,生成这个个镜像既没有仓库名,也没有标签,均为 。...3、在学习过程也遇到很多困难和疑点,如有问题或误点,望各位老司机多多指出或者提出建议。本人会采纳各种好建议和正确方式不断完善现况,人在成长过程需要优质养料。

    9.4K40

    用 PhantomJS 让邮件报表图文并茂(一)

    在部门日常业务,每天都会产生各种各样数据。为了让抽象数据,更加调理方便人阅读,就需要将数据整理成表格、图表等形式,以更生动面貌展示在人们眼前。...将图表转换为图片 虽然邮件不支持脚本生成 canvas 图表,但却是支持图片展示。 那么只要能将图表截取图片添加回邮件内,就能在邮件客户端里看到了,这就是我们要做第一步。...所以将网页内 canvas 内容都提取出来,放到相同大小 img 标签内,替换掉原本文档流 canvas,这样在邮件客户端内就能看到图表内容了吧?...对于一些具有交互效果图表(鼠标 hover 时展示数值),由于变成了静态图,这些交互都会消失。 所以一些关键数据,需要改为默认显示,不需要通过交互触发,以便脚本截图时能截取到。...(保存在本地,路径:**.

    82020

    SpringCloud+Docker+Jenkins+GitLab+Maven实现自动化构建与部署实战

    路径和编译之后镜像文件存放到指定路径固定,不动态参数进行处理传值....# 保存编译之后镜像文件存放到指定路径 docker save $IMG_NAME -o $IMG_TAR_GZ_PATH/$IMG_NAME.tar.gz echo " .....docker save命令是保存编译tar.gz或tar压缩文件,语法: docker save 镜像名 -o 路径/镜像名.tar.gz 或 docker save 镜像名 -o 路径/镜像名...:版本号 # 推镜像到私服里面 docker push私服路径/镜像名:版本号 查看镜像 浏览器验证docker push推送上私服镜像 4.2.7 虚悬镜像 在docker编译不成功会或者是新版本覆盖旧版本归类虚悬镜像...3、在学习过程也遇到很多困难和疑点,如有问题或误点,望各位老司机多多指出或者提出建议。本人会采纳各种好建议和正确方式不断完善现况,人在成长过程需要优质养料。

    7.9K20

    使用Python将PDF转换成图片

    必须在Linux环境下,使用到环境和工具:CentOS7+Python3.6+pdf2image+poppler         首先要在系统安装poppler,这是一个用于呈现可移植文档格式...二、安装pdf2image     直接用下面的命令进行安装 pip install pdf2image 三、书写脚本     安装完成之后,将以下内容写python脚本,并将需要转换pdf文件更名为... in enumerate(images):             img.save('%s/page_%s.png' % (outputDir, index)) if __name__ == "__...main__":     main('source.pdf', 'pdfimage/')     上边代码这两个个函数详细使用方法如下: convert_from_path(pdf_path, dpi...; first_page :允许设置由pdftoppm处理第一个页面; last_page:允许设置最后一页由pdftoppm处理; fmt:允许指定输出格式。

    3.4K10

    博客用不着什么JavaScript框架

    那么如何在构建 Gatsby 网站时避免那些因为大量使用 JS 而带来固有问题呢?当然,我们应该尽量删掉那些 JavaScript。...Eleventy 你提供了十种可以任意搭配模板语言选项,包括 markdown、nunjucks 和 liquid;这意味着我可以从 Craft 复制并粘贴旧模板,更改文件扩展名,并做一些细微调整就能运行在...Eleventy 。...例如,在 Eleventy 没有一种优雅方法来生成响应式图像。...Eleventry 还有一些让我感到困惑事情:我有一阵子一直搞不懂它分页功能,认为它只是将帖子分页到指定大小一些组,之后才意识到它可以动态生成全新页面;我还发现自己在同一文件混用了模板语言:

    4.1K10

    scrapy框架爬虫_bootstrap是什么框架

    Scrapy吸引人地方在于它是一个框架,任何人都可以根据需求方便修改。 它也提供了多种类型爬虫基类,BaseSpider、sitemap爬虫等,最新版本又提供了web2.0爬虫支持。...Spider:老大要我处理xxx.com。 引擎:你把需要处理URL给我吧。 Spider:给你,第一个URL是xxxxxx.com。 引擎:Hi!...调度器:好,正在处理你等一下。 引擎:Hi!调度器,把你处理好request请求给我。 调度器:给你,这是我处理好request。 引擎:Hi!...Spider,这是下载好东西,并且已经按照老大下载中间件处理过了,你自己处理一下(这儿responses默认是交给def parse()这个函数处理) Spider:(处理完毕数据之后对于需要跟进...引擎,我这里有两个结果,这个是我需要跟进URL,还有这个是我获取到item数据。 引擎:Hi!管道,我这儿有个item你帮我处理一下!调度器!这是需要跟进URL你帮我处理一下。

    64030

    vue-cli 4 快速构建一个 Vue 项目

    ☞ 切换下载源   npm 默认仓库地址是在国外网站,速度较慢,可以切换到国内淘宝镜像。但是切换镜像是比较麻烦。...然后通过 nrm ls 命令查看 npm 仓库列表,带 * 就是当前选中镜像仓库,通过 nrm use taobao 来指定要使用镜像源,可以通过 nrm test npm 来测试速度。 ?...,其中包括没有了 cli2 config 目录,所以需要更改之前 cli2 config 相关配置文件,需要在 cli3 以后项目根目录下新建文件 vue.config.js 来写,注意不是...// 打包文件存放目录(默认''dist'',构建之前会被清除) outputDir: 'dist', //放置打包生成静态资源(s、css、img、fonts)(相对于 outputDir...)目录(默认'') assetsDir: '', //指定生成 index.html 输出路径(相对于 outputDir)也可以是一个绝对路径。

    63310

    在 Gitlab 构建 Docker 镜像

    常见镜像生成流程 生成执行文件(JAR/PHP/PY 等等) 将执行文件和 Dockerfile 等支持文件加入到镜像目录 构建指定 Tag 镜像 登录镜像库 推送镜像 相对于在单一服务器执行这些过程情况...如何在以 Pod 形式运行 Runner 构建镜像并完成推送。 跨 Runner 文件共享 Gitlab 提供了两种方式文件共享方式,用于在不同 Runner 之间传递文件。...Cache:用于在构建过程传递一些中间文件,无需长久保存,例如下载依赖文件。 Artifact:构建过程生成交付目标,需要保存一定时间,例如生成 JAR、测试报告等交付文件。.../*.jar 这个环节执行后,会在脚本执行之后,搜集指定目录文件,上传到 Gitlab 共享空间,并 Pipeline 页面生成下载链接,如下图所示: ?...: image tags: # 仅使用带有 img 标签 Runner - img script: # img 对 git 有依赖 - apk add git # 安装 img,可以直接生成自己镜像代替这个步骤

    2.3K40

    AutoMacTC:一款针对macOS环境自动化取证分类采集器

    工具介绍 AutoMacTC是一个针对macOS环境模块化自动取证分类收集框架,AutoMacTC旨在帮助研究人员轻松访问macOS环境各种取证信息以及数据文件,而且它还能够对这些取证文件及数据进行解析...除此之外,AutoMacTC输出可以为研究人员解决macOS环境事件响应提供有价值建议。值得一提是,AutoMacTC可以在活动系统或固定磁盘(加载卷)中直接运行。...工具要求 1、Python 2.7(macOS原生自带了Python 2.7环境,之后该工具将增加Python 3支持) 2、macOS目标系统,支持实时收集 3、macOS分析系统,进行已加载磁盘镜像取证分类采集...比如说,默认输入目录“/”,即当前卷宗根目录,默认输出目录“./”,默认输出文件名前缀“automactc-output”,默认输出文件格式“CSV”,默认CPU优先级将被设置“低”,所有的输出文件压缩格式...) -syslog(分析system.log文件) -systeminfo(基本系统标识,当前IP地址、序列号、主机名) -terminalstate(分析终端保存状态文件) -users(列出系统上现有和已删除用户

    63310

    【目标检测】Flask+Docker在服务器部署YOLOv5应用

    当然utils和models里面存在一定冗余,有的工具类是训练测试提供服务,这里仅需要做推理即可。本来想着再进一步精简,不过发现各函数之间相关性挺大,遂不去修改。...,将图片提交到后端,首先需要判断图片是否空,如果空,则返回空值,即报错界面;如果不是空值,则通过file.read()来读取图片字节串,原代码是通过PIL.Image来转成图片,为了和后面的推理过程兼容...COPY # 类似ADD,将我们文件拷贝到镜像 ENV # 构建时候设置环境变量 构建DockerFile内容如下: FROM python:3.7...注意最后面有个点,这代表着将所有内容打包成镜像。--tag指定镜像名称,注意前面必须是用户名,否则后面将不能够进行拉取。...于是,就得想办法把docker文件进行修改,将half操作进行移除。 还记得之前DockerFile中指定路径吗?

    4.3K21

    Linux初级运维常用命令面试问题

    (不要偷看后面的答案部分) 题目部分 1、如何查看当前Linux服务器运行级别? 2、如何查看Linux默认网关? 3、如何在linux上重建初始化内存盘镜像文件? 4、cpio命令是什么?...8、如何识别Linux系统中指定文件(/etc/fstab)关联包? 9、哪条命令用来查看bond0状态? 10、linux系统/proc文件系统有什么用?...除了默认网关信息,这两个命令还可以显示当前路由表。 3、如何在linux上重建初始化内存盘镜像文件?...在CentOS 5.X / RHEL 5.X,可以用mkinitrd命令来创建初始化内存盘文件,举例如下: # mkinitrd -f -v /boot/initrd-$(uname -r).img...-atime -90 14、在整个目录树下查找文件”core”,发现则无需提示直接删除它们。

    3.8K50
    领券