Jekyll sample code

Listing every page

This Liquid/Jekyll template code will list every page in the site.

Template code

{% for p in site.pages %}
  {{ p.title }}
{% endfor %}

Listing only pages that fit into a category

Let’s say that your website is showcasing paintings, and you’d like to provide a list of only the paintings in which blue is the most prominent color.

Markdown header

The Markdown files for all of the blue paintings would have headers (the first few lines) that include the variable color, set to the value blue:

---
title: This is the title text
layout: page
color: blue
---

Template code

This template code also iterates through every page in the site. If and only if the page has the variable color set to blue, Jekyll will insert a link to the page, with the page title as the link text.

{% for p in site.pages %}
  {% if p.color=="blue" %}
    <a href="{{ site.baseurl }}{{ p.url }}">
      {{ p.title }}
    </a>
  {% endif %}
{% endfor %}    

Inserting page variables into results

Let’s say that you also want to include a thumbnail image in your links.

Markdown header

There’s an additional variable that holds the path to the thumbnail.

---
title: This is the title text
layout: page
color: blue
thumbnail_image: img/bluebird.jpg
---

Template code

This template code also iterates through every page in the site. If and only if the page has the variable color set to blue, Jekyll will insert a link to the page, with the page title as the link text.

{% for p in site.pages %}
  {% if p.color=="blue" %}
    <a href="{{ site.baseurl }}{{ p.url }}">
      <img src="{{ p.thumbnail_image }}" 
        alt="thumbnail image">
      <h4>{{ p.title }}</h4>
    </a>
  {% endif %}
{% endfor %}