我有一个使用十一、tailwindcss 和 nunjucks 的静态站点。这是我的第一次，总的来说真的很喜欢它，但我仍然觉得布局有点混乱。
我想创建一个可重用组件的页面，每个组件有两个部分。组件的示例显示，然后在其下方包含要复制和粘贴的组件代码的 div。
在我的/src/utils/目录中，我添加了一个简单的切换功能来添加和删除类'block'（tailwindcss）
我不明白如何在我的/src/site/components.njk文件代码中访问该功能以将功能添加到我的页面。
大量冗长的谷歌和鸭鸭去查询没有返回太多信息，所以任何和所有的帮助表示赞赏
由于您希望在客户端拥有该功能，因此您需要确保您的 JavaScript 包含在您的站点输出中。由于您的/src/目录仅存在于您的存储库中，因此在您的站点构建后，浏览器将无法使用它。使其可供浏览器访问的最简单方法是将 JavaScript 文件复制到输出目录，然后将其作为脚本包含在 HTML 输出中。确保 URL 与输出位置匹配。例如，如果您的源文件是/src/utils/component-toggle.js，您的输出目录是/dist/并且您将文件复制到/dist/utils/component-toggle.js，则脚本标记应如下所示：
<script src="/utils/component-toggle.js" defer></script>
请参阅传递文件副本以了解如何在构建步骤中复制静态文件。
确保您的 JavaScript 文件也可以在浏览器上下文中工作。例如，您不能使用CommonJS（module.exports和require()语法），因为它是一个 NodeJS 概念并且不存在于浏览器中。如果您使用 ES 模块语法（export default {}syntax），请确保您的站点支持的所有浏览器都支持它。
我最近写了一个关于这个主题的更长的答案，它解释了为什么你必须这样做，以及静态站点生成器的构建时和运行时 JavaScript 之间的区别，如果你想知道，你可以在这里阅读更多的。