Jekyll: Generator to link to all subpages in a static hierarchy

Question

I'm trying to write a static site with Jekyll that has a few layers to it. What's the best way to generate links to all subpages within a section?

For example, if I have a site structure like this:

landing
- Topic A
  - Content 1
  - Content 2
  - Content 3
- Topic B
  - Content 1
  - Content 2
  - Content 3

What would be the best way to create links to each of the Content pages from its Topic page? And, is there a simple way to link to all the Topic pages from the landing?

These are not posts, just static pages. It would be really great if I could just do {% for topic.each %} ...etc. and print the links out.

Answer 1

I would not use posts for this purpose (as yaitloutou suggests). I would read the hierarchy from the directory structure (solution 1) or create two seperate collections (solution 2). You can let the collections from solution 2 share the same layout if you want that.

---

1. Using pages

Create a directory structure with index.md pages and loop over the Jekyll veriable called 'site.pages' to create the menu.

index.md
topic-a/index.md
  content-1/index.md
  content-2/index.md
  content-3/index.md
topic-b/index.md
  content-1/index.md
  content-2/index.md
  content-3/index.md

And loop over all pages like this:

<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
  <li {% if page.url == sitepage.url %} class="active"{% endif %}>
    <a href="{{ sitepage.url }}">{{ sitepage.title }}</a>
  </li>
{% endfor %}
</ul>

If you want the nested structure, you can do something like this. Or if you want only the results for Topic A, you can do this:

<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
{% if sitepage.url contains 'topic-a' %}
  <li {% if page.url == sitepage.url %} class="active"{% endif %}>
    <a href="{{ sitepage.url }}">{{ sitepage.title }}</a>
  </li>
{% endif %}
{% endfor %}
</ul>

---

2. Using collections (simplest solution and quickest build)

Create a collection Topic A and create another collection Topic B. Your config file should look like this:

collections:
  topic-a:
    output: true
    permalink: /topic-a/:path/
  topic-b:
    output: true
    permalink: /topic-b/:path/

Outputting the items of one topic goes like this:

{% assign atopics = site.topic-a | sort: 'order' %}
{% for atopic in atopics %}
  <li {% if page.url == atopic.url %} class="active"{% endif %}>
    <a href="{{ atopic.url }}">{{ atopic.title }}</a>
  </li>
{% endfor %}
</ul>

You should create a _topic-a and a _topic-b directory with your content-1.md, content-2.md, etc. files.

---

Note that both solutions have YML variables called 'order', to determine the order of appearance of the items/pages. This looks like this:

---
title: mytitle
layout: mylayout
order: 50
---
mycontent