Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation

Question

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.

Where are you loading your JavaScript from? Is it from the Jekyll server, or somewhere else? Can you give us an idea of what your directory structure looks like? — Kevin Workman
Thanks for your comment again Kevin! Everything is loading from a local development directory with jekyll serve, I updated the question with the structure of the project. — hzoltan

Kevin Workman Kevin Workman · Accepted Answer · 2016-10-04T13:45:56

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.

Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation

2 Answers