在 GitHub 页中列出子类别

Question

编辑： 我创建了一个存储库 here 来测试下面 jibe 的回答。我在访问 /animals 时得到了一个空白页面，因此非常感谢您的帮助！

这是这个问题的后续：

在那个问题中，我找到了如何列出特定层次类别的 posts。现在我想弄清楚如何列出特定层次结构类别的 子类别。

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

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

我希望用户能够访问 /animals 并查看子类别列表（mammals 和 reptiles）。然后，如果他们转到 /animals/mammals，他们会看到 cats 和 dogs 列为子类别。

我目前通过在每个子类别中放置一个 index.html 文件来手动执行此操作。但这使得更新事情比它应该的要复杂得多。

我试过关注 this answer，但那是针对单个标签，而不是多个类别。

要注意的是任何特定的类别都可能不是唯一的，所以我可以有这样的东西：

动物 -> 哺乳动物 -> 蝙蝠 -> _posts -> vampire.md, fruit.md
体育 -> 棒球 -> 棒球 -> _posts -> wiffle.md, teeball.md

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

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

{% 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

正如我在删除的答案中所建议的那样，我 post 改进了我对您上一个问题的回答。我也添加信息来回答你的新问题（也被删除）：

Thanks for the reply. This almost works, but it's got a few problems. Most importantly, it doesn't support subcategories with the same name (like animals->bats and baseball->bats). It also lists every subcategory and every post under a particular category. I only want to list the subcategories, not the posts. Is there a way to modify your approach to meet those requirements? – Kevin Workman yesterday

相应地修改您的_config.yml

collections:
    animals:
        output: true
        mammals:
            output: true
            cats:
                output: true
            dogs:
                output: true
        reptiles:
            output: true
            lizards:
                output: true

然后创建结构：

mkdir -p _animals/reptiles/lizards
mkdir -p _animals/mammals/cats
mkdir _animals/mammals/dogs

添加您的 md 文件和所有 index.html 您需要制作您想要的列表。它将使用过滤器索引项目。在顶级目录中，您的动物 collection 应该如下所示（每个文件夹中有 index.html）：

清洁工

root/
└── _animals/
    ├── index.html
    ├── mammals
    │   ├── cats
    │   │   ├── housecat.md
    │   │   └── tiger.md
    │   ├── dogs
    │   │   ├── doberman.md
    │   │   └── poodle.md
    │   └── index.html
    └── reptiles
        └── lizards
            ├── chameleon.md
            └── iguana.md

new 你可以只列出有或没有深入的子类别（使用可选参数）_includes/list_subcategories.html

 {% assign animals = site.animals| sort:'title' %}
 {% assign from = page.url | remove: '/index.html' %}
 {% assign deep = (page.url | split: '/' | size) + 1 %}
 {% for animal in animals %}
 {% assign d = animal.url | remove: '/index.html' | split: '/' | size %}
 {% if animal.url != page.url and animal.url contains from and animal.url contains "index" and (include.dig or deep == d) %}
 <a  href={{ animal.url | prepend: site.baseurl }}>{{animal.title}}</a>
 {% endif %}
 {% endfor %}

改进类似于列表动物 _includes/list_animals.html

{% assign animals = site.animals| sort:'title' %}
{% assign from = page.url | remove: '/index.html' %}
{% assign deep = (page.url | split: '/' | size) + 1 %}
{% for animal in animals %}
{% assign d = animal.url | remove: '/index.html' | split: '/' | size %}
{% if animal.url contains "index" or animal.url == page.url %}
{% else %}
    {% if animal.url contains from  and (include.dig or deep == d) %}
    <a  href={{ animal.url | prepend: site.baseurl }}>{{animal.title}}</a>
    {% endif %}
{% endif %}
{% endfor %}

列出 animals/index.html 中的所有子类别和所有动物 :

---
title: animals
---
{% include list_subcategories.html dig=true %}
<hr>
{% include list_animals.html dig=true %}

例如，要列出 animals/mammals/index.html 中的所有哺乳动物和子类别：

---
title: animals
---
{% include list_subcategories.html %}
<hr>
{% include list_animals.html %}

最终生成的结构应该如下所示（还有一些 index.html）：

清洁工

root/
├─ _animals/
│   └─── ...
└── _site
    └── animals
        ├── index.html
        ├── mammals
        │   ├── cats
        │   │   ├── housecat.html
        │   │   └── tiger.html
        │   ├── dogs
        │   │   ├── doberman.html
        │   │   └── poodle.html
        │   └── index.html
        └── reptiles
            └── lizards
                ├── chameleon.html
                └── iguana.html

它解决了你的问题。我从分类学改为挖掘，但您也可以通过输入 taxonomy="baseball/bats" 或 taxonomy="animals/bats".

来区分动物->蝙蝠和棒球->蝙蝠

Answer 2

演示请参见simpyll.com

网站代码见github

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

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

将 var page_parent 指定为最后一个目录所在的 slug 'index.md'

{% 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'

{% 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 %}

获取根目录的子目录（我们在此脚本的前面部分跳过了）。我们可以单独使用深度来定义它。

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

关闭 if 和 for

{% 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 %}

在 GitHub 页中列出子类别

List Subcategories in GitHub Pages

liquid

jekyll

github-pages