Https://stackoverflow.com/questions/70845147/how-to-use-liquid-template-tags-in-external-javascript-in-jekyllrb

Help
1

I’m trying to remove all the inline scripts from our jekyllrb project. The inline scripts pull some values from jekyll data eg. {{site.homepage_title}} , which throws an error when moved to an external/standalone javascript file.

I try renaming the javascript file for example search.js to search.js.liquid but it doesn’t work.

Any ideas or workaround would be much appreciated. Thanks!

2

jekyll is a static site generator - you run it and it creates the files in the _site folder. Once that is done there is not more concept of liquid or front matter - those are both used in the process of building what is in the _site folder.

So you cannot put liquid into a JS file and expect it to do anything - other than maybe at build time in which case you would need to have front matter in the js file so it is processed.

You probably should give a specific example of what you are trying to do.

3

Hello,

Thanks so much for the feedback!

You probably should give a specific example of what you are trying to do.

What I’m trying to do is to remove inline scripts from the .md file which is later translated into a static HTML file. The inline scripts there contains a logic that pulls variable from {{}} and some other performs conditional statements {% %} making it a bit difficult to move into a separate js file.

The purpose of moving the inline scripts is for preparation of adding Content-Security-Policy: script-src 'self' header

Thanks again for lending a helping hand.

Any thoughts about it would be much appreciated!

4

still not clear - what is an example bit of code that is in the inline script you want to remove?

if you want to get rid of the liquid code I don’t think you can - jekyll needs that.

5

For example, we have a file _includes/head.html that contains the following code:
…

.... .... some external scripts...

In some other place _pages/search.md:

title: search page
toc: false

some HTML…

The last example is the file _includes/sidebar.html:

some HTML…

Thanks,

6

Thanks for your reply!

We have use it in different places for example, we have a file in _includes/head.html that contains the following contents:

someHTMLs...
<script>
  var pageConfig = {
    tocNotNested: {% if page contains "toc_not_nested" %}{% if page.toc_not_nested %}true{% else %} false{% endif %}{% else %} false{% endif %}
};
</script>
some external scripts...

Another example is _includes/sidebar.html contains:

someHTMLs...
<script>
var baseUrl = "{{ site.baseurl }}";
some js code...
document.write(renderItems({% include {{ page.sidebar_data }} %}, []).html());
</script>

Thanks,

7

It would be better if you could specifically share one of these scripts, how it currently works, and how you would like the site to work at the end. Please share some code, so we better understand the need.

8

For Jekyll to process your JavaScript file, it should start with front matter. For example:

---
---

console.log('Title: ' + '{{ site.title }}');
9

Hello,

This works for me, thank you so much! In addition to that, I would need to use a layout: none to it so it won’t be using the default.html layout.

It really helps :slight_smile: Thanks a lot everyone! I really appreciate all your help :bowing_man:

1 Like
10

Hello,

I have posted the code here but for some reason it gone through the forum’s admin/moderator for a review and that takes a while for them to show the reply. Nonetheless, I found @ashmaroli answer to be the solution. Thank you!

2 Likes
11

Great news. I’m glad you are all set.