I define a parameter:
<div id=parameter></div>
I fill it by:
document.getElementById("parameter") = value
later I want to pass this parameter to a jekyll function:
{% assign the_parameter = *** the value of parameter *** %}
{%include my_function par= the_parameter %}
What is the correct syntax ?
Thank you by advance
Can you give some more context on what you are trying to achieve?
I am confused by your code and question. Jekyll converts templates into HTML. It cannot run JS and it can not know what the value will be in future on the browser for the user when the JS runs.
An include statement uses a value at build time when you do jekyll build / serve or deploy your site. After that the includes files doesn’t matter and you end up with rendered HTML.
I would suggest an alternate approach. Set your value in Jekyll first and then use it in markdown and in JS.
e.g.
{% assign my_value = "logo.png" %}
## Welcome
I want you to know this is my value: {{ my_value }}
Here is my picture:
{% include render_image.html src_attr=my_value %}
Here is another picture which uses its src in ID as well, just because.
<img id="{{ my_value }}" src="{{ my_value | relative_url }}" />
Here is some JS.
<script>
var myId = "{{ my_value }}" // using Jekyll variable to set a JS variable
var el = document.getElementById(myId)
console.log(el)
el.setAttribute("width", "1000px")
</script>
Maybe your value comes from the config or from a page. Whatever it comes from must happen before the user can see the page
This is my jekyll code:
---
title: Lieu
layout: single
permalink: /lieu/
sidebar:
nav: "categories"
---
<script>
function processUser() {
var parametre = location.search.substring(1).split("&");
var temp = parametre[0].split("=");
l = unescape(temp[1]);
document.getElementById("bidule").innerHTML = l;
}
processUser();
</script>
<div id="bidule"></div>
{% assign entries_layout = page.entries_layout | default: 'list' %}
<div class="entries-{{ entries_layout }}">
{% include selectionner2.html par1="Flore" par2="tous" par3="Vernes"%}
</div>
I would like to pass bidule as par4
Thanks.
Follow my advice above. Make a Jekyll Liquid variable my_id with value “bidule”
Even set it in your frontmatter if you don’t want assign
my_id: 'bidule'
and then use it both in your div to set the ID and in your includes. That would be easy to follow.
And, again, the includes bit runs at build time so it cannot read other HTML elements with JS to figure their values and pass that. Includes is designed to pass Jekyll variables like hardcoded strings or a value from a config or assigned variable or page.my_var
The value to be attributed to the variable ‘bidule’ comes from the call of the html page, e.g:
127.0.0.1:4000/lieu/?lieu=“london”
I cannot write
{% assign my_value = "london" %}
{% include selectionner2.html par1="Flore" par2="tous" par3="Vernes" par4={{ my_value }} %}
jekyll runs once to build your site and then is done (it is static) - it cannot assign a value in liquid to something given to it after it built the site.
You will need to do whatever you are doing in JS only.
You mean I should call selectionner2.html with js code, not by using {% include %} ?
you can’t.
You build jekyll once and then deploy it to a webserver somewhere. After that you have static files that cannot be changed. So that include no longer exists, jekyll used it during the build process but that is it - the finished/built site only contains the files jekyll created at build time.
There is no server running jekyll that would allow it to dynamically build stuff based on url parameters or any other dynamic data. Jekyll is static only.
That said, whatever you are trying to do might be able to be done with pure JS somehow, but that would be a JS thing not a jekyll thing.
Indeed. Jekyll makes static pages which are dumb and flat.
You can add JS to your Jekyll site to make it more dynamic, like filtering a list on a page based on the text in a text box or in the query params like ?search=term.
I would separate the two steps mentally. Use Jekyll to build your site. You get HTML output. All includes and templates and configs can be removed even, because the HTML exists as output.
On top of your static site, you can use JS to get values from inputs.
I would suggest building your JS logic on a plain HTML page outside of jekyll, to force yourself to solve the JS logic with a hardcoded element ID or whatever else you want to make Jeykll set. And after that you can bring your JS to your Jekyll site.
And again, as I said before, you can use a Jekyll variable with a single value and you use as an includes parameters and use it to set the value of a JS variable.
Going back to example, your Jekyll code can be
---
my_value: abcdef
---
<script>
var myId = "{{ my_value }}" // using Jekyll variable to set a JS variable
var el = document.getElementById(myId)
console.log(el)
el.setAttribute("width", "1000px")
</script>
And that will get converted to static HTML.
And the JS won’t care about Jekyll at all.
The script tag will be rendered as this and that is what runs on the browser.
<script>
var myId = "abcdef";
var el = ...
...
Note how my_value can come from frontmatter or data file or an assigned variable or another page. And it gets inserted inside your JS and then stays fixed.
But not from a URL param or a form because Jekyll makes HTML and finishes running. Jekyll can never see what the user enters on the page because it is just static HTML.
If Jekyll as a static site does not work for your dynamic application that needs to generate filtered output and maybe fetch photos or user profiles in real time…
Maybe you need a frontend setup like React or Vue.
Or need a backend server in Python or PHP or Node.
If you content is only modified by user (like uploading data and photos), then Jekyll is a good fit and much simpler and cheaper than a backend solution. And if you need to add some filtering or searching to a Jekyll site then you can use JS for that.
For example I have this Jekyll site which uses the Minima theme and some text content. But the essential part of the site is not stored in the repo. The site exists to pull in data from an external source - GitHub API.
When you load the page, the JS will fetch the data and add it to the page.
https://michaelcurrin.github.io/gist-viewer/
And if you look at index.md in the repo and view the raw content, you’ll see that I use. Jekyll variable to setup my JS.
<script>
renderGists('{{ site.github_username }}');
</script>
But if you right click and view source on the rendered page you’ll see that looks like this
<script>
renderGists('MichaelCurrin');
</script>
The beauty is that anyone can fork the repo and their username will get added for them when they publish to GH Pages. No need to manually edit the HTML/JS with your own username.