jekyll - 列出 GitHub 页面中的子类别

Question

编辑:我创建了一个存储库 here这测试了下面jibe的答案。当我访问 /animals 时，我最终得到了一个空白页面，因此非常感谢您的帮助!

这是此问题的后续内容:Hierarchical Categories in GitHub Pages

在这个问题中，我了解了如何列出特定层次类别的帖子。现在我试图弄清楚如何列出特定层次类别的子类别。

我在 GitHub 页面上使用 Jekyll，我希望有这样的分层类别:

• 动物 -> 哺乳动物 -> 猫 -> _posts -> housecat.md, Tiger.md
• 动物 -> 哺乳动物 -> 狗 -> _posts -> poodle.md, doberman.md
• 动物 -> 爬行动物 -> 蜥蜴 -> _posts -> iguana.md, chameleon.md

我希望用户能够访问 /animals 并查看子类别列表(哺乳动物 和 爬行动物)。然后，如果他们转到 /animals/mammals，他们会看到 cats 和 dogs 列为子类别。

我目前正在手动执行此操作，方法是将 index.html 文件放入每个子类别中。但这使得更新事情比应有的复杂得多。

我尝试过关注 this answer ，但这适用于单个标签，而不是多个类别。

问题是任何特定类别可能都不是唯一的，所以我可以有这样的东西:

• 动物 -> 哺乳动物 -> bat -> _posts -> vampire.md、fruit.md
• 体育 -> 棒球 -> 球棒 -> _posts -> wiffle.md、teeball.md

我还希望能够在子类别中定义 frontmatter 属性，也许在每个子类别的 index.html 文件中？例如，animals->mammals->bats->index.html 文件将包含一个值为 "VampireBat.jpg"frontmatter 变量 thumbnail code> 和 sports->baseball->bats->index.html 的缩略图将为 "YellowWiffleBat.png"。我希望能够从父级别访问这些变量(以显示缩略图和子类别的链接)。

我的第一个想法是直接访问子类别，如下所示:

{% for mammalType in site.categories.animals.mammals %}
   <p>{{ mammalType.title }}</p>
   <img src="(( mammalType.thumbnail }}" />
{% endfor %}

我将使用页面本身的类别进行概括:

{% for subcategory in page.categories %}
   <p>{{ subcategory.title }}</p>
   <img src="(( subcategory.thumbnail }}" />
{% endfor %}

但这根本不起作用，因为 site.categories.whatever 是该类别中所有帖子的列表，忽略任何层次结构信息。

除了手动执行之外，还有更好的方法吗？

Answer 1

参见simpyll.com用于演示

参见github网站代码

使用路径“/”作为计数变量，将 var page_depth 指定为当前页面深度

{% assign page_depth = page.url | split: '/' | size %}

将 var page_parent 指定为包含“index.md”的最后一个目录的 slug

{% assign page_parent = page.url | split: '/' | last %}

循环浏览网站中的每个页面

{% for node in site.pages offset:1 %}

跳过网站根目录

{% if node.url == '/' %}
{{ continue }}
{% else %}

删除网站每个页面的反斜杠

{% assign split_path = node.url | split: "/" %}

为网站中的每个页面分配 var node_last

{% assign node_last = split_path | last %}

将 var node_parent 指定为网站中每个页面的最后一个目录“index.md”的 slug

{% assign node_parent = node.url | remove: node_last | split: '/' | last %}

为网站中的每个页面分配node_url

{% assign node_url = node.url %}

循环访问网站中每个页面路径中的每个 slug

{% for slug in split_path offset:1 %}

将 var slug 指定为每个 slug 的名称，从而为其命名

{% assign slug = slug %}

使用 forloop.index 分配 slug_depth

{% assign slug_depth = forloop.index %}

关闭

{% endfor %}

获取网站中每个页面的子目录，将当前页面的深度和父级与网站中每个其他页面的深度和父级进行比较

{% if slug_depth == page_depth and page_parent == node_parent %}<li><a href="{{ node_url }}">{{ slug }}</a></li>{% endif %}

获取 root 的子目录(我们在此脚本的早期跳过)。我们可以单独使用深度来定义它。

{% if slug_depth == 1 and page.url == '/' and slug != 'search.json' and slug != 'sitemap.xml' %}<li><a href="{{ node_url }}">{{{slug}}</a></li>{% endif %}

关闭如果且对于

{% endif %}
{% endfor %}

总共:

  {% assign page_depth = page.url | split: '/' | size %}
  {% assign page_parent = page.url | split: '/' | last %}
  {% for node in site.pages offset:1 %}
  {% if node.url == '/' %}
  {{ continue }}
  {% else %}
  {% assign split_path = node.url | split: "/" %}
  {% assign node_last = split_path | last %}
  {% assign node_parent = node.url | remove: node_last | split: '/' | last %}
  {% assign node_url = node.url %}
  {% for slug in split_path offset:1 %}
  {% assign slug = slug %}
  {% assign slug_depth = forloop.index %}
  {% endfor %}
  {% if slug_depth == page_depth and page_parent == node_parent %}
  <li><a href="{{ node_url }}">{{ slug }}</a></li>
  {% endif %}
  {% if slug_depth == 1 and page.url == '/' and slug != 'search.json' and   slug != 'sitemap.xml' %}
  <li><a href="{{ node_url }}">{{{slug}}</a></li>
  {% endif %}
  {% endif %}
  {% endfor %}