静态站点生成器 11ty 中的自定义暗模式答案

【问题标题】：custom dark mode in static site generator 11ty静态站点生成器 11ty 中的自定义暗模式
【发布时间】：2021-08-10 09:06:39
【问题描述】：

我想用eleventy 向我的静态生成网站添加一个暗模式按钮。暗模式的代码取自 site 但我不知道将 js 文件/函数放在哪里。该按钮应位于页眉处，由所有页面共享。所以我在基础层模板base-layout.njk 中引用了js 文件，但它不起作用。按钮在那里，但是当我点击页面时没有改变。

这是我的base-layout.njk：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <title>Eleventy Blog</title> 
  <link rel="stylesheet" href="/css/site.css">
</head> 
<body> 
  <header>
    <a href="/" class="link--home">My Blog</a>
    <a href="/About">About</a>
    <button id="dark-button" onclick="darkToggle()">Dark Mode</button>
  </header> 
  <main> 
    {{ content | safe }}
  </main> 
  <footer>&copy; My Blog</footer>
</body> 
<script type="text/javascript" src="../global.js"></script>
</html>

这是我的目录结构

.
├── css
│   └── site.css
├── global.js
├── _includes
│   ├── base-layout.njk
│   └── post-layout.njk
├── index.njk
├── package.json
├── package-lock.json
├── posts
│   └── 2021-0520.md
├── README.md
└── _site
    ├── css
    │   └── site.css
    ├── index.html
    ├── posts
    │   └── 2021-0520
    │       └── index.html
    └── README
        └── index.html

8 directories, 13 files

【问题讨论】：

标签： javascript static-site eleventy

【解决方案1】：

首先，您需要在您的 110 构建中包含 JS 文件，以便它最终在输出目录中。如果您部署站点，则只能通过 Web 访问输出目录，因此无法直接访问源文件。然后你需要调整<script>标签中的路径，确保它与JS文件的输出位置匹配。

// .eleventy.js

// copy the JS file to the output directory in the build step
eleventyConfig.addPassthroughCopy('global.js');

使用此配置，JS 文件将最终出现在您的输出目录中。现在调整脚本标签以使用绝对 URL：

<script type="text/javascript" src="/global.js"></script>

您可以在how to use passthroughFileCopy in Eleventy here 和why you need to do this as well as the difference between build time and client-side JavaScript here 上阅读更多信息。

【讨论】：

我发现这 110 个文档非常令人困惑，并且对读者的技术经验做出了很多假设。谢谢你的澄清。
另一个问题：现在我在我的主页上设置了暗模式，它只加载index.njk 和base-layout.njk。该按钮在博客文章中不起作用，它会加载 base-layout.njk 并添加 post-layout.njk。我的 CSS 没有为 post-layout 元素指定任何颜色。有什么建议为什么数据级联在这里不起作用？
本站与本站基本相同tutorial
@KabochaPorter 不看代码就看不出来，你的网站在 Github 上吗？首先，我建议您检查浏览器开发工具中的网络选项卡，看看 JS 和 CSS 文件是否在您的博客文章页面上正确加载。然后检查控制台中是否有任何错误，最后使用检查器检查 CSS 是否正确应用。
我解决了。我没有为js 脚本指定正确的路径。正如您所指出的，它应该是/global.js，前面没有..。谢谢