[英]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.