Generating a list of pages (not posts) in a given category

I am using Jekyll as a static generator for a website (not a blog), and I want to have an automatically generated list of all pages on my index page. Specifically, I want to have different categories and list all articles in each category separately. Here's an example of what I'm describing, if you're having trouble following. Is there any way to do this in Jekyll (e.g. GitHub pages)? I've seen the variables documentation page but that seems specific to the blog post format.

Solution 1:

While building my own site I came across this very same problem, and I have found an (IMHO) easy and robust solution. Hopefully this is useful for anyone else wishing to do something similar.

The Problem

Given a subset of pages (not posts) on the site, list them under headings based on their categories. For example: given a set of pages which we consider resource pages (or reference pages, or whatever logical grouping of pages that you want to display are), we want to list them under their categories (ex. code, explanation, et cetera).

The Solution

To get the behaviour that we want, we have to make modifications in three places:

• _config.yml
• resources.md
• resource-file-X.md

_config.yml

In _config.yml, we must add a list of all of the categories/keywords/tags (or whatever you want to call it) that will appear in the resource files. Here is what I have in mine:

category-list: [code, editors, math, unix]

You can call the variable anything, I chose category-list, just make sure that you use the same variable in the resource.md file.

Note: The order that you place the items in the list is the order they will be listed on the resource.md page.

resource-file-X.md

These are the files that you want to have indexed and linked to on the resources.md page. All that you need to do is add two file variables to the top of each of these files. The first is to indicate that this file is a resource file.

resource: true

The second is to indicate what categories you want this file to be indexed under. You can index it under as many categories as you would like, and if you want a page un-indexed, leave the list blank. My reference for proper EINTR handling in C has the following categories:

categories: [code, unix]

resources.md

This is the file that will generate the list of pages based on their respective categories. All you need to do is add the following code to this file (or whatever file you want the list to be on):

{% for cat in site.category-list %}
### {{ cat }}
<ul>
  {% for page in site.pages %}
    {% if page.resource == true %}
      {% for pc in page.categories %}
        {% if pc == cat %}
          <li><a href="{{ page.url }}">{{ page.title }}</a></li>
        {% endif %}   <!-- cat-match-p -->
      {% endfor %}  <!-- page-category -->
    {% endif %}   <!-- resource-p -->
  {% endfor %}  <!-- page -->
</ul>
{% endfor %}  <!-- cat -->

Code Breakdown

Just a quick explanation of how this works:

• Loop through each of the categories specified in _config.yml.
• Display a heading with that category name.
• Start an unordered list for the pages that belong in that category.
• Loop through the pages on the site.
• If the page is a resource file as indicated by the file variable resource, then for each of the categories that the file belongs to, if one of them matches the current category being listed, display a link to that page.

Note: the variables category-list in _config.yml and categories in the resource files can be called whatever you want, just make sure that you use the same variables in the file generating the list.

Another Note: When you modify _config.yml, you have to completely restart Jekyll, even if you have the --watch option, you have to stop and restart it. It took me a while to figure out why my changes weren't taking effect!

The Final Product

You can see the final product on the resources page on my site, although I just put this together today so at the time of this writing, it's far from complete, but you can check out my bio if you want on the home page.

Hope this helps!

Solution 2:

There's a cleaner way to do this using the liquid "contains" property:

In _config.yml, add your index of categories

categories: [fruit, meat, vegetable, cheese, drink]

In your page.md inside the front matter, add one or more of the categories available in the _config.yml

---
layout: page
title: Orange juice
description: Orange juice is juice from oranges. It's made by squeezing oranges.
categories: [fruit, drink]
---

In your template to get all the pages in the fruit category you do:

{% for page in site.pages %}
  {% if page.categories contains 'fruit' %}
    <div class="item">
      <h3>{{page.title}}</h3>
      <p>{{page.description}}</p>
    </div>
  {% endif %}
{% endfor %}