11ty-tools 中文文档教程

Question

11ty-tools

此软件包为更简单的静态站点生成器 Eleventy 提供高级资产管道。

JavaScript（支持 ECMAScript）和 Sass/SCSS 资产将使用 webpack 进行编译，这是一个用于网络的静态模块打包器。 此插件还配置 11ty-image 以优化内部和外部图像。 此外，它使用 html-minifier 最小化了 Eleventy 的 HTML 输出。

Installation

使用此插件最简单的方法是使用我预配置的 11ty-template。 如果您想自己安装它，您应该这样做：

npm install 11ty-tools --save-dev

// .eleventy.js
const tools = require("11ty-tools");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(tools);
  //...
};

// webpack.config.js
module.exports = require("11ty-tools/lib/webpack-config");

Features

Asset processing

JavaScript/ECMAScript

任何放入 src/assets/js/*.js 中的有效 JavaScript 文件都将得到处理并放入资产清单中。 子目录中的文件将不 得到处理，除非它们是由与上述模式匹配的文件导入的。

Sass/SCSS

在 src/assets/style/bundle.js 中导入的任何有效 Sass 或 SCSS 文件都将得到处理并放入资产清单中。

Webfonts

Sass 或 SCSS 中引用的本地字体文件也将获得哈希输出名称。 确保使用 google-webfonts-helper（例如 src/assets/字体）。

How to use assets

有两种使用资产的方法。

您可以通过使用 {% asset 'name' %} 简码并为其提供资产名称（例如 interactive.js 或 mystyles.css). 相对路径将从 webpack-assets-manifest 插件。

但是，有时在 HTML 中直接内联资产很有用。 您可以使用 {% inlineasset 'name' %} 来做到这一点。 原始资产内容将从文件中读取并由简码返回。 确保将 或 script 标签放在短代码周围，因为它不会自动为您执行此操作。

Images

您可以使用 {% image 'path'[, 'alt'[, 'sizes']] %} 简码处理您的图像。 参数：

• path (required): The path to the image. Can be internal (e.g. img/cat.png) or external (e.g. https://somesite.io/image.jpeg). NOTE: internal images are automatically provided with the prefix src/site/img/. If you would like to include an image outside that folder, add a leading slash to the path. There is no global config option to disable or change the base path.
• alt (recommended): Alt text for screen readers. This will throw a console warning if not specified.
• sizes: see [sizes] on MDN HTML documentation.

YouTube

您可以将笨重的 YouTube iframe 替换为：{% yt 'oGhe8dtRIH0' %}。

位置参数：

1. videoId (required): the ID of your video. You can find it in the YouTube video URL after watch?v=.
2. title: title and alt for your video.
3. width: iframe width.
4. height: iframe height.
5. allow: [allow] attribute. Defaults to standard YouTube iframe requirements.

Contributing

包含在 CONTRIBUTING.md

非常欢迎任何类型的贡献！ 暂时，我不会在贡献指南上投入很多精力，因为这不是一个大项目。

License

包含在 LICENSE.md

版权所有 2021 Romein van Buren <romein@vburen.eu>

特此免费授予获得本软件和相关文档文件（“软件”）副本的任何人不受限制地处理本软件的权限，包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售软件的副本，并允许获得软件的人这样做，但须遵守以下条件：

上述版权声明和本许可声明应包含在所有副本中或软件的重要部分。

本软件“按原样”提供，不提供任何明示或暗示的保证，包括但不限于对适销性、特定用途的适用性和非侵权的保证。 在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为还是其他方面，由软件或软件的使用或其他交易引起、由软件引起或与之相关软件。