Html 单击第一个分区中的集合名称时，如何在第二个分区中显示集合页面列表？（杰基尔）

我是杰基尔的新手，有js的初学者经验。[杰基尔版本：4.2.0]

我有左导航窗格、中心内容和右导航窗格
在左导航上，我想显示每个集合的标题，当用户单击它时，右导航应该显示该集合的每个页面的标题

我能够用以下代码在左导航中显示每个集合的名称：

{site.collections%中的coll为%1}
{%if coll.label！=“posts”%}
{%endif%}
{%endfor%}
{{content}}

但我无法找到一种方法来填充正确的导航。页面应如下所示：

我尝试过编写脚本，但到目前为止没有成功：

$（函数（）{
$（'.col_link'）。在（'click'，function（）{
$（'.right_sidebar'）.load（'{%include data.html%}#items'）；
});
});

_包括/data.html：

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

{%assign curr\u coll=page.collection%}
{curr_coll.docs%中的页面为%
{%endfor%}