在 Eleventy 中执行小型客户端 JavaScript 的最佳方式是什么？

Question

问题

我想向我的 Eleventy 网站添加一点客户端 JavaScript。我似乎无法document.使用 Eleventy 进行访问，这意味着我无法访问元素并监听它们的事件。不起作用的示例：

const formElement = document.querySelector("form")

我从 Eleventy 收到的错误消息：

ReferenceError: document is not defined

问题

我如何使用 Eleventy 来监听文档元素更改并进行页面更改？

例子：

formElement.addEventListener("change", function () {
    // Update nearby paragraph element based on form value
});

我的真实场景：我希望有一个段落元素显示哪个form具有input type="radio"值checked。

到目前为止的方法

我在 /data 中有一个名为fruits.json的文件：

{
  "items": [
    {
      "name": "Apple"
    },
    {
      "name": "Banana"
    },
    {
      "name": "Strawberry"
    },
    {
      "name": "Mango"
    },
    {
      "name": "Peach"
    },
    {
      "name": "Watermelon"
    },
    {
      "name": "Blueberry"
    }
  ]
}

/_includes/layouts 中基于我的 base.html 文件的HTML 文件：

{% extends "layouts/base.html" %}

{% block content %}

<form>
 {% for item in fruits.items %}
 {# Create a radio button for each, with the first one checked by default #}
 <input type="radio" name="screen" id="{{ item.name | slug }}" value="{{ item.name | slug }}" {% if loop.index === 1 %} checked {% endif %}>
    <label for="{{ item.name | slug }}">{{ item.name }}</label>
 {% endfor %}

{% set selectedFruit = helpers.getSelectedFruit() %}
<p>Currently selected item from above is: {{ selectedFruit }}</p>
</form>

{% endblock %}

请注意，调用的变量selectedFruit被分配给辅助函数：

{% set selectedScreen = helpers.getSelectedScreen() %}

该getSelectedScreen()函数如下所示：

getSelectedScreen() {
    const formEl = document.querySelector("form")
    console.log(formEl)
}

除了无法使用 之外.document，我觉得这种方法在其他方面可能与 Eleventy、静态站点生成器“格格不入”：

• 该脚本在文档中被调用
• 该脚本是一次性的且脱离其上下文

我想知道我是否一开始就遇到了错误，或者我是否只需要做一些事情来允许.document访问。

Answer 1

这里存在一些误解 \xe2\x80\x94 JavaScript 代码最重要的区别是它是在构建时执行还是在运行时客户端执行。

\n

Eleventy 核心以及您的.eleventy.js配置文件都是用 JavaScript 编写的，该文件在构建步骤期间（即生成静态站点时）执行一次。这种情况发生在 NodeJS 环境中，而不是在浏览器中，这就是为什么没有document变量和 DOM 的原因。

\n

如果您想动态更改网站上的某些内容以响应用户交互，则需要编写一个单独的 JavaScript 文件，并将其复制到静态网站的输出目录。然后，您可以将其包含在静态网站的 HTML 模板中，以便在部署网站后正常页面访问期间将其包含在内。

\n

首先，修改模板以仅生成 JavaScript 函数的占位符元素，以便稍后添加文本：

\n

{% extends "layouts/base.html" %}\n\n{% block content %}\n\n<form id="fruits-form">\n {% for item in fruits.items %}\n {# Create a radio button for each, with the first one checked by default #}\n <input type="radio" name="screen" id="{{ item.name | slug }}" value="{{ item.name | slug }}" {% if loop.index === 1 %} checked {% endif %}>\n    <label for="{{ item.name | slug }}">{{ item.name }}</label>\n {% endfor %}\n\n  <p id="selected-fruits-output"></p>\n</form>\n\n{% endblock %}\n

\n

然后，创建一个对表单上的更改事件做出反应的 JavaScript 文件：

\n

{% extends "layouts/base.html" %}\n\n{% block content %}\n\n<form id="fruits-form">\n {% for item in fruits.items %}\n {# Create a radio button for each, with the first one checked by default #}\n <input type="radio" name="screen" id="{{ item.name | slug }}" value="{{ item.name | slug }}" {% if loop.index === 1 %} checked {% endif %}>\n    <label for="{{ item.name | slug }}">{{ item.name }}</label>\n {% endfor %}\n\n  <p id="selected-fruits-output"></p>\n</form>\n\n{% endblock %}\n

\n

现在您需要确保使用Passthrough file copy将此 javascript 文件复制到输出目录：

\n

// fruit-form.js\nconst fruitForm = document.getElementById(\'fruits-form\');\nconst formOutput = document.getElementById(\'selected-fruits-output\');\nfruitForm.addEventListener(\'change\', e => {\n    // update the formOutput with the list of selected fruits\n});\n

\n

最后，确保在 HTML 模板中包含 script 元素（确保路径是上面指定的输出的绝对路径）：

\n

{# layouts/base.html #}\n<script src="/path/to/fruit-form.js" defer></script>\n

\n

现在它应该按预期工作。一般来说，请确保了解构建时 JavaScript 和运行时 JavaScript 之间的区别，以便您可以决定哪种方法在不同情况下最有效。

\n