Menu 在Jekyll中生成菜单

我正在用Jekyll（没有博客）构建一个静态站点，只包含页面。
我想找到一种方法（自动或使用

menu.yml

文件）生成菜单（如页脚上）。
我在页面的YAML中定义标题和章节属性：

---
layout: page
title: Title of the page
chapter: Title of the chapter
permalink: /title-of-the-chapter/title-of-the-chapter/
order: 3250
published: true
---

我想要一份这样的菜单：

<ul>
    <li>Title of the chapter</li>
        <ul>
            <li><a href="permalink">Title of the page</a></li>
        </ul>
</ul>

---

是否有一个解决方案（可能没有插件）可以自动完成这项工作（我有很多页面）？

只有使用插件才能实现完全自动化，即vanilla Jekyll无法自动循环您的文件夹并生成您的文件的分层列表

因此，如果您想要一个没有插件的解决方案，您需要维护菜单层次结构：每次添加页面时，您也需要修改数据文件

根据您所需的复杂性，有不同的方法可以从数据文件中生成菜单：

• 简单：
• 复杂（带有“动态”菜单）：

---

这应该足以让你开始。如果遇到问题，请提出更具体的问题。

分组数据是这里的诀窍，要做到这一点，您需要一个辅助处理器。将此后处理放在javascript中最方便，但这意味着您需要为自己留下一些数据

下面的代码将所有页面的数组嵌入为一个数组。然后可以通过页面内javascript对其进行后处理

<script>
let menu = [
  {% for p in site.pages %}
  {
    'chapter':'{{ p.chapter }}',
    'title':'{{ p.title }}',
    'url':'{{ p.url }}',
  }
  {% endfor %}
].filter(function(d){
    return d.title != '';
})
.reduce(function(a,d){
    a[d.chapter] = a[d.chapter] || [];
    a[d.chapter].push(d);
},{});
menu = Object
    .keys(menu)
    .map(function(key){
        let html = menu[key].map(function(d){
              return "<li>"+d.title+"</li>";
            })
            .join('');
        html = '<li>' + key + '<ol>'+html+'</ol></li>';
        return html.join('');
    })
    ;
menu.push('</ol>');
menu.unshift('<ol>');
document.write(menu.join(''));
</script>

让菜单=[
{site.pages%中p的%s}
{
“章”：“{p.chapter}}”，
“title”：“{p.title}}”，
“url”：“{p.url}}”，
}
{%endfor%}
].过滤器（功能（d）{
返回d.title！=''；
})
.减少（功能（a、d）{
a[d.章]=a[d.章]| |[]；
a[d.章].推（d）；
},{});
菜单=对象
.按键（菜单）
.map（功能（键）{
设html=menu[key].map（函数（d）{
返回“
”+d.title+”
”；
})
.加入（“”）；
html='
'+key+'+html+'
'；
返回html.join（“”）；
})
;
菜单。按（“”）；
菜单。取消移位（“”）；
document.write（menu.join（“”））；

我相当肯定排序没有正确执行，但这似乎大致正确

---

这个解决方案的一个好处是，您可以将“章节”作为文件夹嵌入。您可以基于通用文件夹结构生成嵌套，并使用“索引”页面作为“章节”标题的标记。

谢谢！我听从你的建议和这些指示，这似乎很好！

<script>
let menu = [
  {% for p in site.pages %}
  {
    'chapter':'{{ p.chapter }}',
    'title':'{{ p.title }}',
    'url':'{{ p.url }}',
  }
  {% endfor %}
].filter(function(d){
    return d.title != '';
})
.reduce(function(a,d){
    a[d.chapter] = a[d.chapter] || [];
    a[d.chapter].push(d);
},{});
menu = Object
    .keys(menu)
    .map(function(key){
        let html = menu[key].map(function(d){
              return "<li>"+d.title+"</li>";
            })
            .join('');
        html = '<li>' + key + '<ol>'+html+'</ol></li>';
        return html.join('');
    })
    ;
menu.push('</ol>');
menu.unshift('<ol>');
document.write(menu.join(''));
</script>