Search code examples
htmlmarkdownjekyllliquid

How to pass a concatenated string to HTML using Jekyll include?


I have to make a string of values separated by semicolons and pass this string to a script in HTML include to then parse and output the result.

My jekyll markdown page:

---
layout: page
title: Our team
permalink: /team
---

{% assign cfhandles=""%}

{% for person in site.data.team-handles %}
    {{ cfhandles | append: person.handle }}
    {{ cfhandles | append: ";" }}
{% endfor %}

{% include load-ratings.html cfhandles=cfhandles %}

My load-ratings.html:

<script>
    let url = "https://codeforces.com/api/user.info?handles=";
    let handles = "{{ include.cfhandles }}";
    console.log(handles);
    url = url + handles;
    console.log(url);
    async function load() {
        let obj = await (await fetch(url)).json();
        console.log(obj);
        for (let cur_user of obj["result"]) {
            let cur_handle = cur_user["handle"];
            let user_rating = cur_user["rating"];
            document.getElementById(cur_handle.toLowerCase()).innerHTML = "Рейтинг: " + user_rating;
        }
    }
    load();
</script>

My team-handles.yml:

- handle: bob1
  name: Bob

- handle: alice2
  name: Alice

When I open the developer console, it shows me that in JS the handles variable is empty (but it shouldn't be like that). How do I pass the needed string to the file so it shows correctly?

I already tried using {%- -%} Liquid tags, but it didn't change the result.


Solution

  • Try this:

    {% assign cfhandles=""%}
    
    {% for person in site.data.team-handles %}
        {% assign cfhandles = cfhandles | append: person.handle | append: ";" %}
    {% endfor %}
    
    {% include load-ratings.html cfhandles=cfhandles %}
    

    The code basically assigns the new strings bob1; and alice2; to the existing variable.