首页
学习
活动
专区
工具
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为我们提供了一个良好的流程,与现有技术协同工作,同时引导我们遵循良好的实践。

14110

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

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

91320
  • 自动化当道,破密、爬虫各凭本事(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 个工作周的

    52330

    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 架构概念相对较新,但由于其性能优势,可能会加快速度。

    24210

    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

    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

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

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

    82620

    使用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.5K10

    你的博客用不着什么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你帮我处理一下。

    64730

    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)也可以是一个绝对路径。

    64010

    7.6k star,推荐一个更加智能的文档转换开源工具

    这个项目的目标是简化文档处理过程,使其更易于人工智能的使用。...Zerox 提供了一个简单的方法,将各种格式的文档(如 PDF、DOCX、图像等)转换为 Markdown 格式,适用于 Node 和 Python 环境。...易于使用:Zerox 提供了简单的 API,用户可以轻松地将其集成到现有的工作流程中。无论是 Node 还是 Python 环境,Zerox 都能无缝运行。...可扩展性:Zerox 设计为可扩展的框架,能够处理大规模数据集和高并发任务,适用于各种应用场景。...丰富的配置选项:Zerox 提供了丰富的配置选项,用户可以根据需求自定义 OCR 处理过程,包括页面方向校正、错误处理模式、并发处理数量等。

    13710

    Java版本的基于计算机视觉的跃动小子保卫主公自动通关计划之图片分割篇

    Java版本的基于计算机视觉的跃动小子保卫主公自动通关计划之图片分割篇 对于图像分割,尤其是在游戏或其他视觉应用中,准确地将屏幕内容切割成若干个小区域是常见的需求。...第一个点的x坐标为(cw+bw)*0 第二个点的x坐标为(cw+bw)*1 第三个点的x坐标为(cw+bw)*2 …以此类推,y坐标同理 图片分割代码 @SneakyThrows public void...我们可以使用工具(如微信截图工具)获取每个小格子确切的x和y坐标,然后直接利用这些坐标分割图片。...= "src/main/resources/img/xxl/subImage"; ImageSplitter.split(bufferedImage, xs, ys, width, height, outputDir...手动测量式分割则更灵活,特别适合图像中某些区域并不完全规整的情况,确保最终分割结果符合预期。

    6600

    使用Java进行WAR包反解析的详解

    学习与借鉴:通过解析公开的WAR包,开发者可以学习已有项目的架构与实现方式。源码解析在进行WAR包反解析之前,我们需要了解如何在Java中解压和处理WAR包。...通过ZipInputStream解压WAR包,并将其内容输出到指定目录中。...解析WAR包中的配置文件WAR包中的WEB-INF目录包含关键的配置文件,如web.xml,这是Java Web应用的核心配置文件之一。我们可以通过Java读取并解析该文件。...对加密内容无效:如果WAR包中的文件经过加密或混淆,反解析工具可能无法正确解析。核心类方法介绍WarUnzipper:负责解压WAR包,将其内容解压到指定的目录中。...解析与安全审计开发一个安全审计工具,检查WAR包中是否存在潜在的安全风险,如硬编码的敏感信息、过时的库或不安全的配置。

    11711

    在 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(列出系统上现有和已删除的用户

    64010

    猫头虎分享:Python库 Pytorch 中 CIFAR-10 数据集简介、下载方法(自动)、基本使用教程

    如何在 PyTorch 中下载 CIFAR-10 数据集? 在 PyTorch 中,torchvision.datasets 提供了一个便捷的方式来加载 CIFAR-10。...步骤 1:安装必要的库 确保安装了以下 Python 库: pip install torch torchvision ️ 步骤 2:加载数据集 以下代码会自动下载 CIFAR-10,并将其存储在指定路径中...`root` 为数据存储路径,若不设置,将默认存储在项目目录下的 `data` 文件夹。 ️...transform, mirror='https://download.pytorch.org/whl/torch_stable.html' ) 或提前手动下载数据集,并将其解压到 root 指定路径中...镜像设置 解决内存问题 调整批量大小或切片加载 batch_size 随着深度学习的飞速发展,像 CIFAR-10 这样的经典数据集可能逐渐被更复杂的真实场景数据替代(如 ImageNet)。

    27710
    领券