Do you recommend putting your last code {% include my_snippet.html %} at the end of the file? At the beginning does not make sense because it gets polluted.
Pollute what? The HTML, Liquid or the global JS variables?
When should the JS execute? If you want it to be the last thing that runs after the body is finishing loading (like if you need to target a div element) then put your JS snippet at the bottom of your output page. If you don’t put it at the bottom there is a risk of running to too early.
Or for the same effect, you can put it in your head tag at the top of the page but make sure it only executes after body the loaded.
<head>
<script>
document.onload = function() {
// your code here
}
</script>
</head>
<body>
</body>
By polluting, I meant to not put the JS to the right place. When I use a default.html, I have the head in there. If I have another page that uses default, I should not put the js code at the top of that page. Because it then is in content and in body, and therefore polluted. So best put it at the bottom of this page if the js is only needed there. Either directly or included in a html or md as you explained.
Sorry for not explaining well before.
I put an article here why I am here and a link to my site. The link does not work, but I can not edit the article. Can you help? Thanks again.
You could add a field per page
---
custom_js: true
---
Then in default.html (top or bottom of the page) or head.html, you insert the snippet only if the variable is set and true. And it will be off other pages.
Add a new comment and link. or direct message me on the forum
Just one more question, can you give an example of
custom_js: true
in the default.html I include conditionally several js files, one for each md file. So I have in frontmatter page1.md: file1.js: true
In page2.md: file2.js: true
etc.
Correct?
I got it with:
in some.md
—
js: jquery.min
—
default.html:
{% if page.js %}
{% for js_file in page.js %}
{% endfor %}
{% endif %}
Why a loop here, I suppose that page.js is an array with one elem. This results from the page variable that is array based?
Yes that’s fine.
If you want to have multiple JS files that turn on and off.
The first part of if checks the value is set and the second part checks it is true.
I would avoid using a dot in your field name like file1.js so I just uses script_1
default.html
So, following the advice here I have created a .html file with my in it. In the page I want to use the script, I’ve put the following:
{% include redirect.html %}
It gave me a build error.
So I tried :
{% include /redirect.html %}
Ditto a build error.
So I tried:
{% include https://www.domain.com/redirect.html %}
Error again.
How can I make sure I reference the script file properly?
For reference, the build error for the first two was:
github-pages 228 | Error: Could not locate the included file ‘redirect.html’ in any of [“/github/workspace/_includes”, “/usr/local/bundle/gems/minima-2.5.1/_includes”]. Ensure it exists in one of those directories and is not a symlink as those are not allowed in safe mode.
And for the third attempt:
github-pages 228 | Error: Invalid syntax for include tag. File contains invalid characters or sequences:
Thanks in advance!
Michael
the include has to be in the _includes directory inside your project. Sounds like you are trying to include a file that is not in that directory.
You have an error message that is especially clear :
Error: Could not locate the included file ‘redirect.html’ in any of [“/github/workspace/_includes”, “/usr/local/bundle/gems/minima-2.5.1/_includes”]. Ensure it exists in one of those directories
Tell us what you do not understand about it, and we’ll do our best to explain it to you
PS : You should really format your post, it makes the experience of helping you so much more pleasant.