Menu
Highly possible that I have error logic but I'm just learning both JavaScript and Jekyll.
My goal is to manipulate an HTML element through JavaScript and place some Jekyll variable inside the inner HTML of that element. Everything is loading from a local development directory with jekyll serve. I tried the following:
HTML:
<html>
<body>
<h2>Something</h2>
</body>
</html>
JavaScript:
document.addEventListener("DOMContentLoaded", function () {
manipulate = document.getElementsByTagName("h2");
manipulate[0].innerHTML = "{{ page.title }}";
});
Structure:
├── _config.yml
├── contact-us.md
├── css
│ └── main.scss
├── feed.xml
├── _includes
│ ├── footer.html
│ ├── header.html
│ ├── head.html
│ ├── readtime.html
│ └── sidebar.html
├── index.html
├── js
│ ├── anchor.js
│ └── tags.js
├── _layouts
│ ├── default.html
│ ├── page.html
│ ├── post.html
│ ├── single.html
│ └── tags.html
├── _posts
├── readme.md
├── _sass
│ ├── _base.scss
│ ├── _layout.scss
│ └── _syntax-highlighting.scss
├── _site
│ └── [...]
└── tags.md
I reached the tags.js from the tags.md
For example, if my page's title would be "foo", then I assumed the following HTML output in the <h2> tag (this was my goal):
<h2>foo</h2>
But instead it gave me the following:
<h2>{{ page.title }}</h2>
I think it happened cause jekyll renders the values of the variables inside the jinja format and gives us the output, and after that I just placed the string "{{ page.title }}" to the <h2> tag.
I'm sure I'm missing something, but if you used something like that in one of your project, I'd appreciate any help.
222
Jekyll only touches files that have frontmatter. If a file doesn't contain frontmatter, then it is copied as-is into your site's directory structure. Your tags.js file probably doesn't contain any front matter, which is why the liquid tags aren't being replaced.
To get Jekyll to replace liquid tags inside your JavaScript file, you can add a frontmatter section to the top of it. That frontmatter can be empty!
---
---
//rest of your JavaScript
That will fix the problem of Jekyll not replacing the tags, but you're going to have another problem: when Jekyll is replacing the tag in the JavaScript, it doesn't know ahead of time what page will be calling that JavaScript. So it doesn't know what page.title will be! (Actually, it will use the title of your JavaScript file, which probably depends on your default settings.)
One way around this is to get rid of the liquid from your JavaScript, and take a parameter instead. Then from your html file, pass that parameter into the JavaScript. That parameter can be the liquid tag.
168
following @KevinWorkman's answer, we added:
---
layout: blank
---
to the .JS file, then created a layout file, blank.html, with just this inside:
---
---
{{content}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
