1

I want to add a dark mode button to my statically generated site with eleventy. The code for dark mode is take from this site But I don't know where to put the js file/function. The button should be at the header, shared by all pages. So I put reference to js file in base layer template base-layout.njk, but it is not working. The button is there but when I click the page does not change.

This is my 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>

Here is my directory structure

.
├── 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
Kabocha Porter
  • 301
  • 3
  • 8

1 Answers1

2

First, you need to include the JS file in your eleventy build so it ends up in the output directory. If you deploy your site, only the output directory will be accessible over the web, so accessing the source file directly won't work. Then you need to adjust the path in your <script> tag to make sure it matches the output location of the JS file.

// .eleventy.js

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

With this config, the JS file will end up in your output directory. Now adjust the script tag to use an absolute URL:

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

You can read more on how to use passthroughFileCopy in Eleventy here and more on why you need to do this as well as the difference between build time and client-side JavaScript here.

MoritzLost
  • 2,611
  • 2
  • 18
  • 32
  • I find the 11ty docs quite confusing and assume a lot about readers' technical experience. Thank you for clarification. – Kabocha Porter May 21 '21 at 17:28
  • another question: now I got my dark mode to work in my homepage, which only loads `index.njk` and `base-layout.njk`. The button doesn't work in blog post, which loads `base-layout.njk` and adds `post-layout.njk`. My css doesn't specify any color for `post-layout` elements though. Any suggestion why the data cascading not working here? – Kabocha Porter May 21 '21 at 18:07
  • The site is essential the same as this [tutorial](https://keepinguptodate.com/pages/2019/06/creating-blog-with-eleventy/) – Kabocha Porter May 21 '21 at 18:29
  • @KabochaPorter Can't tell without seeing the code, is your site on Github? First I suggest you check the network tab in your browser's devtools to see if the JS and CSS files are loaded correctly on your blog post pages. Then check if you're getting any errors in the console and finally check if the CSS is applied correctly using the inspector. – MoritzLost May 21 '21 at 18:35
  • 1
    I solved it. I didn't specify the correct path for the `js` script. It sould be `/global.js` as you indicated, without the `..` in the front. thx – Kabocha Porter May 21 '21 at 18:50