Eleventy、Nunjucks、Tailwindcss、javascript 切换隐藏和显示内容的功能
Eleventy, Nunjucks, Tailwindcss, javascript toggle function to hide and display content
我有一个使用 eleventy、tailwindcss 和 nunjucks 的静态站点。这是我第一次，总体上很喜欢，但我仍然觉得布局有点混乱。
我想创建一个可重用组件的页面，每个组件有两个部分。组件的示例显示，然后在其下方 div 包含要复制和粘贴的组件代码。
在我的 /src/utils/ 目录中，我添加了一个简单的切换功能来添加和删除 class 'block' (tailwindcss)
我不明白如何在我的 /src/site/components.njk 文件代码中访问该功能以将功能添加到我的页面。
大量冗长的 google 和 duck duck go 查询没有返回太多信息，因此感谢所有帮助
由于您希望在客户端拥有该功能，因此您需要确保您的 JavaScript 包含在您的站点输出中。由于您的 /src/ 目录仅存在于您的存储库中，因此在您的站点构建后浏览器将无法访问它。使其可被浏览器访问的最简单方法是将 JavaScript 文件复制到输出目录，然后将其作为脚本包含在 HTML 输出中。确保 URL 匹配输出位置。例如，如果您的源文件是 /src/utils/component-toggle.js，您的输出目录是 /dist/ 并且您将文件复制到 /dist/utils/component-toggle.js，那么脚本标签应该如下所示：
<script src="/utils/component-toggle.js" defer></script>
请参阅 Passthrough file copy 了解如何在构建步骤中复制静态文件。
确保您的 JavaScript 文件在浏览器上下文中也能正常工作。例如，您不能使用 CommonJS (module.exports and require() syntax), since it's a NodeJS concept and doesn't exist in Browsers. If you use ES Module syntax (export default {} syntax), make sure it's supported in all browser your site supports.
我最近写了一个关于这个主题的更长的答案，它解释了为什么你必须这样做，以及构建时间和静态 运行-time JavaScript 之间的区别站点生成器，如果您想了解更多，可以。
我有一个使用 eleventy、tailwindcss 和 nunjucks 的静态站点。这是我第一次，总体上很喜欢，但我仍然觉得布局有点混乱。
我想创建一个可重用组件的页面，每个组件有两个部分。组件的示例显示，然后在其下方 div 包含要复制和粘贴的组件代码。
在我的 /src/utils/ 目录中，我添加了一个简单的切换功能来添加和删除 class 'block' (tailwindcss)
我不明白如何在我的 /src/site/components.njk 文件代码中访问该功能以将功能添加到我的页面。
大量冗长的 google 和 duck duck go 查询没有返回太多信息，因此感谢所有帮助
由于您希望在客户端拥有该功能，因此您需要确保您的 JavaScript 包含在您的站点输出中。由于您的 /src/ 目录仅存在于您的存储库中，因此在您的站点构建后浏览器将无法访问它。使其可被浏览器访问的最简单方法是将 JavaScript 文件复制到输出目录，然后将其作为脚本包含在 HTML 输出中。确保 URL 匹配输出位置。例如，如果您的源文件是 /src/utils/component-toggle.js，您的输出目录是 /dist/ 并且您将文件复制到 /dist/utils/component-toggle.js，那么脚本标签应该如下所示：
<script src="/utils/component-toggle.js" defer></script>
请参阅 Passthrough file copy 了解如何在构建步骤中复制静态文件。
确保您的 JavaScript 文件在浏览器上下文中也能正常工作。例如，您不能使用 CommonJS (module.exports and require() syntax), since it's a NodeJS concept and doesn't exist in Browsers. If you use ES Module syntax (export default {} syntax), make sure it's supported in all browser your site supports.
我最近写了一个关于这个主题的更长的答案，它解释了为什么你必须这样做，以及构建时间和静态 运行-time JavaScript 之间的区别站点生成器，如果您想了解更多，可以