A way to load a script for single page? #2506
-
|
Is there a way to load a js file for just a single page? Let's say I have a Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
The simplest solution is to just add the script tag. If you are using Markdown templates, nothing stops you from using HTML, nor any of the other ones. Eleventy lets you output any HTML you want. Now if you want to get fancier and ensure it gets loaded in the HEAD part of your doc and you are using an Eleventy layout template, use front matter to specify something, have the layout template look for it and optionally load it. For example: And in your layout, if script is defined, you can output |
Beta Was this translation helpful? Give feedback.
-
|
Another option is to use YAML multiline strings and define your optional script tag(s) in the template (note the confusingly peculiar ---
# src/index.njk
title: Issue 2205
layout: layouts/base.njk
scripts: >
<script src="/generator.js" defer></script>
---
Hello the world!!And then just output the [optional] ---
# src/_includes/layouts/base.njk
---
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
</head>
<body>
<main>{{ content | safe }}</main>
{{ scripts | safe }}
</body>
</html>Or, if you want to really go overboard you could use Nunjucks |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the answer for both of you. I'll try which one is works for me. |
Beta Was this translation helpful? Give feedback.
-
|
I do something similar to what @pdehaan describes in #2506 (reply in thread). But my solution allows for easier to write and read front matter. In Then, in any And |
Beta Was this translation helpful? Give feedback.
-
|
My approach is to use an if statement in my base file linking to a Nunjucks partial that contains the full script that needs to be show within the head. Unsure if it works well for larger use cases, but for getting a specific script into the head of a specific page (where title comes from frontmatter), it works well: |
Beta Was this translation helpful? Give feedback.
The simplest solution is to just add the script tag. If you are using Markdown templates, nothing stops you from using HTML, nor any of the other ones. Eleventy lets you output any HTML you want.
Now if you want to get fancier and ensure it gets loaded in the HEAD part of your doc and you are using an Eleventy layout template, use front matter to specify something, have the layout template look for it and optionally load it. For example:
And in your layout, if script is defined, you can output
<script src="{{ script }}"></script>.