在 Jekyll 中生成菜单答案

【问题标题】：Generate a menu in Jekyll在 Jekyll 中生成菜单
【发布时间】：2015-09-20 13:46:47
【问题描述】：

我正在使用 Jekyll（没有博客）构建一个静态网站，只有页面。
我想找到一种方法来生成（自动或使用menu.yml 文件）菜单（如this website，在页脚上）。
我在页面的 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>

顺便说一下，我的文件是这样组织在文件夹中的：

01-chapter-one
    01-subchapter-one
        index.md
    02-subchapter-two
        index.md
02-chapter-one
    01-subchapter-one
        index.md

是否有解决方案（可能没有插件）自动执行此操作（我有很多页面）？

【问题讨论】：

标签： menu jekyll liquid

【解决方案1】：

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

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

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

简单：Accessing _data in Jekyll (loop in loop)
复杂（带有“动态”菜单）：Excluding page from Jekyll navigation bar

这应该足以让您入门。如果遇到问题，请提出更具体的问题。

【讨论】：

感谢克里斯蒂安！我按照您的建议和这些说明进行操作，看起来不错！

【解决方案2】：

分组数据是这里的诀窍，要做到这一点，您需要一个辅助处理器。放置此后期处理最方便的地方是在 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>

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

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

【讨论】：