[英]List Subcategories in GitHub Pages
编辑:我在这里创建了一个存储库,用于测试下面的jibe答案。 当我访问/animals
时,我最终得到一个空白页面,所以任何帮助都表示赞赏!
这是对这个问题的后续跟进: GitHub页面中的分层类别
在那个问题中,我发现了如何列出特定层次类别的帖子 。 现在我想弄清楚如何列出特定层次类别的子类别。
我在GitHub页面上使用Jekyll,我想要像这样的分层类别:
我希望用户能够访问/animals
并查看子类别( mammals
和reptiles
)的列表。 然后,如果他们去/animals/mammals
,他们会看到cats
和dogs
列为子类别。
我目前通过在每个子类别中放入一个index.html
文件来手动执行此操作。 但这使得更新事情变得比它应该更加复杂。
我已经尝试过这个答案 ,但这意味着单个标签,而不是多个类别。
问题是任何特定的类别可能都不是唯一的,所以我可以有这样的东西:
我还希望能够在子类别中定义frontmatter属性,可能在每个子类的index.html文件中? 例如, animals->mammals->bats->index.html
文件将包含值为"VampireBat.jpg"
的frontmatter变量thumbnail
, "VampireBat.jpg"
sports->baseball->bats->index.html
将包含thumbnail
"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
是该类别中所有帖子的列表,忽略任何分层信息。
除了手动操作之外,还有更好的方法吗?
正如我在删除的答案中建议的那样,我发布了我之前问题答案的改进版本。 我还添加了回答新问题的信息(也已删除):
谢谢回复。 这几乎可行,但它有一些问题。 最重要的是,它不支持具有相同名称的子类别(如animals-> bats和baseball-> bats)。 它还列出了特定类别下的每个子类别和每个帖子。 我只想列出子类别,而不是帖子。 有没有办法修改您的方法以满足这些要求? - Kevin Workman昨天
相应地修改_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,您需要创建所需的列表。 它将使用过滤器索引项目。 从顶部目录开始,您的animals集合应该如下所示(每个文件夹中都有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
新的你可以列出只有或没有深入的子类别(使用可选参数) _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
中的所有哺乳动物和次级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"
来区分动物 - >蝙蝠和棒球 - >蝙蝠。
有关演示,请参阅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 %}
跳过网站root
{% if node.url == '/' %}
{{ continue }}
{% else %}
从网站的每个页面中删除backslashed
{% 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 %}
关闭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 %}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.