Блог

Я новичок в jekyll и имею опыт начинающих в js. [Версия Jekyll: 4.2.0]

У меня есть левая панель навигации, центральное содержимое и правая панель навигации.
в левой навигации я хочу показать название каждой коллекции, и когда пользователь нажимает на нее, в правой навигации должно отображаться название каждой страницы этой коллекции.

Я могу показать имя каждой коллекции в левой навигации со следующим кодом:

 <div class="left_sidebar">
        {% for coll in site.collections %}
        {% if coll.label != "posts" %}
        <a href="{{ coll.docs[0] | relative_url }}" class="col_link" >{{ coll.title }}</a>
        {% endif %}
        {% endfor %}
</div>
<div class="main">{{ content }} </div>
<div class="right_sidebar"></div>
 

но я не могу найти способ заполнить правильную навигацию. Страница должна выглядеть примерно так:
site_mockup

Я немного пробовал писать сценарии, но пока безуспешно:

 <script>
    $(function() { 
        $( '.col_link' ).on( 'click', function() { 
            $('.right_sidebar').load('{% include data.html %} #items');
        });
    });
</script>
 

_includes/data.html:

 {% assign curr_coll = page.collection %}
{% for page in curr_coll.docs %}
    <a href="{{ page | relative_url }}" id="items">{{ page.title }}</a>
{% endfor %}