javascript - Eleventy、Nunjucks、Tailwindcss、javascript切换功能隐藏和显示内容
问题描述
我有一个使用十一、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 之间的区别,如果你想知道,你可以在这里阅读更多的。
推荐阅读
- java - SunCertPathBuilderException; JAVA_OPTS with keystore required?
- javascript - How to make first li value 0 and then increment by 2 using css counter?
- json - Unexpected end of JSON input at undefined line XXXX, columns xx-xx while reading in BigQuery
- python - 使用python将图像保存到子目录中
- php - 如何在 PHP 中解析 Google Directions API Json,特别是嵌套的每个“Step”和“Leg”的距离值和持续时间值?
- python - PHP 执行的 Python 脚本忽略参数
- python - 如何将 100k 频率词表从 NLTK 存储到数据库
- python-3.x - 逻辑回归成本 = nan
- python - 需要从网站下载一个 zip 并保存它而不更改或对时间戳进行任何更改
- azure-devops - Reset Id from task Azure Devops in Boards