Search code examples
htmljekyll

Get front matter data of specific pages into table in Jekyll


I want to get some information from the front matter ({{ page.title }} and {{ page.status }}) for some of my site pages into a table on my index page.

How should I do this?

<table>
<tr>
<td>Page title</td> <td>Page status</td>
</tr>
<tr>
<td>{{ page-name-1.title }}</td><td>{{ page-status-1.status }}</td>         
</tr>
<tr>
<td>{{ page-name-2.title }}</td><td>{{ page-status-2.status }}</td>         
</tr>
</table>

Solution

  • You can get a specific page from the site.pages collection with the Liquid filter where of Jekyll.

    Given I have a page foo.md with this front matter:

    ---
    title: foo
    status: bar
    ---
    

    Then this:

    <table>
      <tr>
        <td>Page title</td> 
        <td>Page status</td>
      </tr>
      {% assign page_info = site.pages | where: 'name', 'foo.md' %}
      <tr>
        <td>{{ page_info[0].title }}</td>
        <td>{{ page_info[0].status }}</td>         
      </tr>
    </table>
    

    Will render as

    <table>
      <tr>
        <td>Page title</td> 
        <td>Page status</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>         
      </tr>
    </table>


    Just repeat it for any page that have an interest for you:

    {% assign pages_info = 'foo.md,index.md' | split: ',' %}
    <table>
      <tr>
        <td>Page title</td> 
        <td>Page status</td>
      </tr>
      {% for page_name in pages_info %}
        {% assign page_info = site.pages | where: 'name', page_name %}
        <tr>
          <td>{{ page_info[0].title }}</td>
          <td>{{ page_info[0].status }}</td>         
        </tr>
      {% endfor %}
    </table>