How do I include liquid/global variables defined using Jekyll in a Javascript file?

Question

Currently I'm using Jekyll to build a website, with markdown and html files. If I want to use for example variables defined in the '_data' folder in html/md I can simply use {% for item in site.data.XX %}. My question is, what is the correct syntax when reaching Jekyll variables (e.g. site) in Javascript?

I am using frontmatter in my JS file. Should I include something there or do an import?

I tried:

• console.log(site.collections);
• console.log({{site.collections}});

But I just get the errors "Site is not defined" or "Uncaught SyntaxError: Invalid or unexpected token".

Answer 1

Any file with a front-matter will be processed by jekyll...

eg : anyfile-with-front-matter.js

---
title: my js file
---
console.log({{page.title}});
console.log({{site.description}});

..., except if it is "ignored".

By default :

• any underscored folder is ignored (eg: _myfolder)
• node_modules, vendor/bundle/, vendor/cache/, vendor/gems/ and vendor/ruby/ folders are ignored by default configuration

To make contained files available to process, you can add containing folders to include array in your _config.yml.

include:
 - node_modules
 - _myfolder

That's my guess.