添加 CSS、JavaScript、字体

Step 1 复制 CSSWeb 字体JavaScript 文件

这是最简单的方法，非常适合初学者和/或小型项目。它很棒，因为不需要打包工具或任何外部依赖。

这会复制在您的 HTMLCSS 中引用的各个 CSSJavaScriptWeb 字体 文件。

1. 在您的根项目文件夹中创建一个 bundle.cssbundle.js 文件，并向该文件添加一些 CSSJavaScript 代码。

2. 使用直通文件复制将文件复制到构建输出文件夹（您也可以在这里使用 glob）：

   eleventy.config.js
   ESM CommonJS

   export default function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("bundle.css");
   };

   export default function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("font.woff2");
   };

   export default function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("bundle.js");
   };

   module.exports = function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("bundle.css");
   };

   module.exports = function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("font.woff");
   };

   module.exports = function(eleventyConfig) {
     eleventyConfig.addPassthroughCopy("bundle.js");
   };

3. 使用以下方法在您的 CSS 中引用 Web 字体文件：

   @font-face {
   	font-family: My Font Name;
   	src: url('/font.woff2') format('woff2');
   	font-display: swap;
   }

4. 使用以下方法在您的 HTML 中引用 CSS 文件：

   <link rel="stylesheet" href="/bundle.css">

5. 使用以下方法在您的 HTML 中引用 JavaScript 文件：

   <script src="/bundle.js"></script>

• 快速提示：
• #001—内联压缩 CSS
• #002—内联压缩 JavaScript

<style>
{% include "header.css" %}
{% include "footer.css" %}
{% include "./node_modules/my-ficticious-package-name/package.css" %}
</style>

<script>
{% include "header.js" %}
{% include "footer.js" %}
{% include "./node_modules/my-ficticious-package-name/package.js" %}
</script>

Step 2 使用 Eleventy 模板

您可以使用 Eleventy 模板生成您的捆绑文件，并从模板中使用 <link rel="stylesheet" href="/bundle.css"><script src="/bundle.js"></script> 引用它：

---
permalink: bundle.css
---
{% include "header.css" %}
{% include "footer.css" %}
{% include "./node_modules/my-ficticious-package-name/package.css" %}

---
permalink: bundle.js
---
{% include "header.js" %}
{% include "footer.js" %}
{% include "./node_modules/my-ficticious-package-name/package.js" %}

展开查看使用此方法的社区资源。

在下面的文章中，Max 展示了如何使用 styles.11ty.js 模板文件生成一次性的 Sass 编译样式表：

Eleventy 中的资源管道 (2021)