在 Eleventy 中使用 Bento 组件

本指南说明如何使用 Bento 组件通过 Eleventy 构建网站。如果您只对解决方案感兴趣，请直接跳到 Bento 组件快捷方式部分。

简介

在使用 Bento 组件之前，您需要在页面的 head 中加载 Bento 运行时脚本 + 组件脚本及其样式（通常在您的布局文件中）。然后，您可以在模板或部分中使用这些组件

<head>
  <script src="https://cdn.ampproject.org/bento.js"></script>
  <script
    async
    src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
  ></script>
  <link
    rel="stylesheet"
    href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
  />
</head>
<body>
  <bento-fit-text>Hello World.</bento-fit-text>
</body>

但是，这种方法有一个缺点：如果您并非在所有页面上使用相同的 Bento 组件，则必须确保仅在真正需要时导入组件脚本和样式，以避免用户下载他们实际上不需要的 JS。

在本指南中，我们将介绍一种方法，该方法使得仅在真正需要时导入 Bento 组件变得非常容易。

使用 `eleventy-plugin-head`

我们将使用 eleventy-plugin-head 插件，它允许我们从模板中的任何位置向 head 添加元素。此插件的优点在于，它有助于避免重复导入（例如，当同一组件在同一页面上多次使用时）

首先，我们需要通过 NPM 安装该插件

npm install eleventy-plugin-head --save-development`

然后将其添加到项目根目录中的 Eleventy 配置文件 .eleventy.js 中

const pluginHead = require('eleventy-plugin-head ');

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

现在，我们可以使用 head 快捷方式在需要时导入 Bento 组件。key 确保仅将具有相同键的元素添加到 head 一次。

{% head 'bento-fit-text', '
<script src="https://cdn.ampproject.org/bento.js"></script>
<script
  async
  src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
/>' %} <bento-fit-text>Hello World.</bento-fit-text>

注意：我们在此处使用了 Nunjucks 模板，但这适用于所有 Eleventy 支持的模板语言。

这种方法解决了避免重复导入的问题，但仍然要求我们在使用组件时导入组件脚本和样式。这可能意味着大量复制粘贴。我们可以通过为导入 Bento 组件创建自定义简码来避免这种情况。

Bento 组件快捷方式

Eleventy 简码支持在模板中重复使用功能。我们将为导入 Bento 组件创建一个这样的简码。我们再次使用 eleventy-plugin-head 插件，但这次我们必须使用 API pluginHead.head.add('path', 'key', 'value') 将元素添加到 head 中，因为简码在其他简码中不起作用。

我们使用简码在 head 中注册所需的 Bento 运行时和组件脚本。Bento 组件的名称通过参数传递。我们还必须传递当前文档的输入路径，以便插件能够跟踪哪个页面需要哪些 Bento 组件

const pluginHead = require('eleventy-plugin-head');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(pluginHead);

  eleventyConfig.addShortcode("importBento", function (componentName) {
    pluginHead.head.add(
      this.page.inputPath,
      "bento-runtime",
      `<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>`
    );
    pluginHead.head.add(
      this.page.inputPath,
      "bento-" + componentName,
      `<script type="module" src="https://cdn.ampproject.org/v0/bento-${componentName}-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-${componentName}-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-${componentName}-1.0.css" crossorigin="anonymous">`
    );
    return "";
};

现在，我们可以在模板中的任何位置使用 importBento 后跟组件名称从 Bento 组件导入

{% importBento 'fit-text' %} <bento-fit-text>Hello World</bento-fit-text>

这甚至可以在 markdown 文件中使用

# Bento carousel

Checkout the carousel:

{% importBento 'base-carousel' %}
<bento-base-carousel style="aspect-ratio: 4/3;" >
<img src="https://picsum.photos/id/237/640/480" alt="example image 1">
<img src="https://picsum.photos/id/238/640/480" alt="example image 2">
<img src="https://picsum.photos/id/239/640/480" alt="example image 2">
</bento-base-carousel>

就是这样。在 Eleventy 中使用 Bento 组件的简单方法。

总结

Bento 组件是使用客户端功能丰富 Eleventy 站点的绝佳方式。通过创建一个 Bento 特定的简码，我们可以确保仅在需要时导入 Bento 脚本和样式。您可以在 Github 上找到一个完整的工作示例。

在 Eleventy 中使用 Bento 组件

简介

使用 eleventy-plugin-head

Bento 组件快捷方式

总结

使用 `eleventy-plugin-head`