How do I process JS files with Eleventy, so I can use variables like {{layout}} & {{eleventy.version}} #3235

nneil · 2024-03-31T20:53:53Z

nneil
Mar 31, 2024

In my eleventy.config.cjs I have

   eleventyConfig.setTemplateFormats([
        "css",
        "liquid",
        "md",
        "js",
    ]);

And in my script.js I have

console.log("{{layout}} {{eleventy.version}}")

These variables expand just fine in my .liquid files, but not in my .js files. What else do I need to do?

pdehaan · 2024-03-31T23:50:38Z

pdehaan
Mar 31, 2024
Collaborator

You could create an .11ty.js template and do something like this:

// src/index.11ty.js
class IndexPage {
  data() {
    return {
      layout: "home.liquid",
      title: "Eleventy 11ty.js templates",
    };
  }

  render(data) {
    return `${data.title} -- ${data.layout} -- ${data.eleventy.version}`;
  }
};

module.exports = IndexPage;

And my src/_includes/home.liquid looks like this:

<!DOCTYPE html>
<body>

<main>{{ content }}</main>

</body>

OUTPUT

<!DOCTYPE html>
<body>

<main>Eleventy 11ty.js templates -- home.liquid -- 2.0.1</main>

</body>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do I process JS files with Eleventy, so I can use variables like {{layout}} & {{eleventy.version}} #3235

{{title}}

Replies: 1 comment

{{title}}

Select a reply

How do I process JS files with Eleventy, so I can use variables like {{layout}} & {{eleventy.version}} #3235

nneil Mar 31, 2024

Replies: 1 comment

pdehaan Mar 31, 2024 Collaborator

OUTPUT

nneil
Mar 31, 2024

pdehaan
Mar 31, 2024
Collaborator