Jekyll Child Page Navigation

Question

I'm finishing up my site redesign and just need to complete my portfolio page. Rather than using posts for portfolio entries, I want to use subdirectories/child pages:

...
work
  project
     index.html
  project-2
    index.html
  index.html
...

I want to loop through those subpages in a list to show on work/index.html. Something similar to:

<ul>
  {% for page in site.work.pages %}
    <li>
      <figure>
        <img src="/img/foo.jpg" alt="foo">
      </figure>
    </li>
  {% endfor %}
</ul>

How can this be done?

Answer 1

Jekyll does not support this as simply as in your example yet, it is coming in 2.0 however.

You could add a key/value pair to the YAML header of the child pages to signify that it should appear on the main index page. I have a similar setup that I use to define what pages should appear in the main navigation for the site.

project/index.html etc

---
group: work
---

work/index.html

<ul>
{% for node in site.pages %}
    {% if 'work' == node.group %}
    <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
{% endfor %}
</ul>

You may be able to avoid requiring the group attribute if you changed the if condition to do substring matching of the URL, but this solution is easier to understand.