Advice for filtering collection with routes

Help
4

The two most popular ways to accomplish this are with Jekyll Collections or Jekyll Data. I will cover both in this response.

The Jekyll Collections approach

Here, you create individual files for each of the breweries, and then you can show them one at a time (like a page or a post), or you can iterate through them to create a list.

In your _config.yml file, add the line (anywhere):

collections:
  breweries:

Note: If Jekyll is running, even with livereload, you will need to stop and start again for the change to take effect.

Next, create a folder at the root level and name it _breweries. That folder corresponds to the collection you added to the _config.yml file.

Inside that folder, create as many breweries as you like. Every markdown file represents a brewery. You can add whatever YAML front matter you like.

file: anchor-steam.md

---
title: Anchor Steam Brewery
type: brewery
sub-type: na
location: San Francisco
---
## Famous brewery with a tasting room
Learn the traditions of this famous brewery...

File: magnolia-brewery

---
title: Magnolia Brewery
type: brewery
sub-type: restaurant
location: San Francisco
---
## Come for the beer stay for the fries
Tucked away in a corner in the historic Haight Ashbury district there lies a gem of a brewery and restaurant....

All the files you create can have whatever content you like, including pictures, links, videos, etc. It is like creating a single web page or podcast post for each one.

Now create a folder from the root and title it breweries (or whatever you want to call it).

Create two files in the breweries folder:

all.html
restaurants

File: all.html

---
title: All Breweries
layout: default
---

{% for brewery in site.breweries %}
    <h1>Name: {{ brewery.title }}</h1>
{% endfor %}

File: restaurants.html

---
title: Restaurants
layout: default
---

{%- assign breweries = site.breweries| where: "sub-type", "restaurant" -%}
{% for brewery in breweries %}
    <h1>Name: {{ brewery.title }}</h1>
{% endfor %}

Now, you can go to your Jekyll site and go to mysite/breweries/all or mysite/breweries/restaurants and the breweries are filtered as you like.

Of course, I only display the title of the brewery, but you can display whatever metadata or content you want to display.

If you want to learn more about Collections, check out the official documentation:

The Jekyll Data approach

Here, you do not have to modify the _config.yml file and you create a file containing a dataset of breweries. Jekyll can work with CSV, JSON, YML, and XML. I’m going to use YAML in this example.

Create a new folder at the root of your site and call it _data (this is a built-in folder name Jekyll uses so you can add data files).

In that new folder, create a file and call it breweries.yml.

Edit that file and add the following data:

items:
    - title: Anchor Steam Brewery
      type: brewery
      sub-type: na
      location: San Francisco
      Description: "Learn the traditions of this famous brewery..."
    - title: Magnolia Brewery
      type: restaurant
      sub-type: restaurant
      location: San Francisco
      description: "Tucked away in a corner in the historic Haight Ashbury district there lies a gem of a brewery and restaurant...."

Now, in the root of your site, create a new folder and call it brewery-data (or whatever name you want).

In the brewery-data folder, create two files:

all.html
restaurants.html

File: all.html

---
title: All Breweries (from data)
layout: default
---

{% for brewery in site.data.breweries.items %}
    <h1>Name: {{ brewery.title }}</h1>
{% endfor %}

File: restaurants.html

---
title: Restaurants (from data)
layout: default
---

{%- assign breweries = site.data.breweries.items| where: "sub-type", "restaurant" -%}
{% for brewery in breweries %}
    <h1>Name: {{ brewery.title }}</h1>
{% endfor %}

To test this, you can go open your Jekyll site in the browser and go to mysite/brewery-data/all or mysite/brewery-data/restaurants.

Once again, my example just displays the name of the brewery, but you can add any other data elements you want.

Conclusion

Both methods work great, but it will depend on how you want to manage things. If each place has its own unique approach to how you want to describe it, then the collections approach is probably better.

The data approach is really easy and accessible, but you have to know how to work with data. Also, what happens when you want to add images and manage the content for the site? Working with data becomes unwieldy once you think of every data element you want to put in there. You may also find it is harder to do grammar and spell-checking when using data.

If you want to go the data route, I suggest you watch the following video and the following additional videos that explain Jekyll data and teaches you how to use it:

3 Likes