静态站点生成器11的自定义暗模式
静态站点生成器11的自定义暗模式
提问于 2021-05-21 06:22:32
我想添加一个黑暗模式按钮到我的静态生成的网站与eleventy。黑暗模式的代码来自这个站点，但是我不知道把js文件/函数放在哪里。按钮应该在标题处，由所有页面共享。所以我在底层模板base-layout.njk中引用了base-layout.njk文件，但是它不起作用。按钮在那里，但是当我单击时，页面不会改变。
这是我的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>© 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回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-21 08:22:19
首先，您需要将JS文件包含在您的71次构建中，这样它就会在输出目录中结束。如果部署站点，只有输出目录可以通过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>您可以在如何在这里使用passthroughFileCopy和为什么需要这样做，以及这里的构建时间和客户端JavaScript之间的区别。上阅读更多内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67631763
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号