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

Question

我想使用 eleventy 向我的静态生成网站添加暗模式按钮。黑暗模式的代码取自 site 但我不知道 js file/function 放在哪里。该按钮应位于页眉处，由所有页面共享。所以我在基础层模板 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

Answer 1

首先，您需要将 JS 文件包含在您的 110 版本中，以便它最终出现在输出目录中。如果部署站点，则只能通过 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>

您可以在 and more on 上阅读更多内容。

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

custom dark mode in static site generator 11ty

javascript

static-site

eleventy