列出GitHub页面中的子类别 [英] List Subcategories in GitHub Pages

问题描述

我已经在此处创建了一个可测试jibe的存储库在下面回答.当我访问/animals时，我最终得到的是空白页面，因此我们将为您提供任何帮助！

I've created a repository here that tests jibe's answer below. I just end up getting a blank page when I visit /animals, so any help is appreciated!

这是此问题的后续内容: GitHub页面中的分层类别

This is a follow-up to this question: Hierarchical Categories in GitHub Pages

在该问题中，我发现了如何列出特定层次结构类别的帖子.现在，我试图弄清楚如何列出特定层次结构类别的子类别.

In that question, I found out how to list the posts of a particular hierarchical category. Now I'm trying to figure out how to list the subcategories of a particular hierarchical category.

我正在GitHub页面上使用Jekyll，并且我希望具有这样的层次结构类别:

I'm using Jekyll on GitHub pages, and I want to have hierarchical categories like this:

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

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

I'd like users to be able to visit /animals and see a listing of the subcategories (mammals and reptiles). Then if they go to /animals/mammals, they'd see cats and dogs listed as subcategories.

我目前正在通过在每个子类别中放置一个index.html文件来手动执行此操作.但这会使更新工作变得复杂得多.

I'm currently doing this manually by putting an index.html file inside each subcategory. But that makes updating things much more complicated than it probably should be.

我已经尝试遵循此答案，但这只是针对单个标签，而不是多个类别.

I've tried following this answer, but that's meant for single tags, not multiple categories.

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

The catch is that any particular category might not be unique, so I can have stuff like this:

• 动物->哺乳动物-> 蝙蝠-> _posts-> vampire.md，fruit.md
• 运动->棒球-> 蝙蝠-> _posts-> wiffle.md，teeball.md

• animals -> mammals -> bats -> _posts -> vampire.md, fruit.md
• sports -> baseball -> bats -> _posts -> wiffle.md, teeball.md

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

I'd also like to be able to define frontmatter attributes in the subcategories, maybe in the index.html file of each? For example the animals->mammals->bats->index.html file would contain a frontmatter variable thumbnail with a value of "VampireBat.jpg", and sports->baseball->bats->index.html would have a thumbnail of "YellowWiffleBat.png". I'd like to be able to access these variables from the parent level (to show a thumbnail and a link to the subcategory).

我的第一个想法是像这样直接访问子类别:

My first thought was to access the subcategories directly, like this:

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

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

Which I'd generalize using the categories from the page itself:

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

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

But that doesn't work at all, since site.categories.whatever is a list of all of the posts in that category, ignoring any hierarchical information.

除了手动处理之外，还有其他更好的方法吗?

推荐答案

演示请参见 simpyll.com . /strong>

See simpyll.com for demo

有关网站代码，请参见 github

See github for website code

使用路径"/"作为计数变量将var page_depth分配为当前页面深度

assign var page_depth as the current pages depth using the path '/' as a count variable

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

将var page_parent分配为存放"index.md"的最后一个目录的子段

assign var page_parent as the slug of the last directory housing 'index.md'

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

浏览网站上的每个页面

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

跳过网站根目录

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

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

remove backslashed from each page in website

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

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

assign var node_last for each page in website

{% assign node_last = split_path | last %}

为网站中的每个页面分配var node_parent作为包含"index.md"的最后目录的子段

assign var node_parent as the slug of the last directory housing 'index.md' for each page in website

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

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

assign node_url for each page in website

{% assign node_url = node.url %}

循环浏览网站中每个页面路径中的每个子段

loop through each slug in each page path in website

{% for slug in split_path offset:1 %}

将var slug分配为每个块的名称，因此为其命名

assign var slug as the name of each slug therefore giving it a name

{% assign slug = slug %}

使用forloop.index分配slug_depth

assign slug_depth with a forloop.index

{% assign slug_depth = forloop.index %}

关闭

{% endfor %}

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

obtain sub-directories for every page in website comparing depth and parent of current page to that of every other page in website

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

获取root的子目录(在本脚本的前面我们已跳过了这些子目录).我们可以单独使用深度来定义它.

obtain sub-directories for root (which we skipped early in this script). we can use depth alone to define this.

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

这篇关于列出GitHub页面中的子类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！