use collections in Jekyll

12 Apr 2020 - Kovacs J Giulia

Add to  _config.yml  in the root the following lines:

    collections:    # author collections, each author has their own page
      authors:
        output: true

    defaults:       # front matter defaults
      - scope:
          path: ""
          type: "authors"
        values:
          layout: "author"
      - scope:
          path: ""
          type: "posts"
        values:
          layout: "post"
      - scope:
          path: ""
        values:
          layout: "default"
    

To (re)load the configuration, restart the jekyll server. Press  Ctrl+C  in your terminal to stop the server, and then  jekyll serve  to restart it.

Documents (the items in a collection) live in a folder in the root of the site named  _*collection_name* . In this case,  _authors .
Create a document for each author:  _authors/emi.md :

    ---
    short_name: emi
    name: Kiss J Gabor 
    position: Intendant CEO
    ---
    Owner of the „New Sciention” magazine. Founder of the „Einstein Circle” and the „Feynman Club”.
    

Let’s add a page which lists all the authors on the site. Jekyll makes the collection available at  site.authors .
Create  staff.html  in the root with the following content:

    ---
    layout: default
    title: Staff
    ---
    <h1>Staff</h1>

    <ul>
      {% for author in site.authors %}
        <li>
          <h2>
            <a href="{{ author.url | relative_url}}">
                {{ author.name }}
            </a>
          </h2>
          <h3>{{ author.position }}</h3>
          <p>{{ author.content | markdownify }}</p>
        </li>
      {% endfor %}

    

Open  _data/navigation.yml  and add an entry for the blog page:

    - name: Home
      link: /
    - name: About
      link: /about.html
    - name: Blog
      link: /blog.html
    - name: Staff      
      link: /staff.html
    

Create  _layouts/author.html  with the following content:

    ---
    layout: default
    ---
    <h1>{{ page.name }}</h1>
    <h2>{{ page.position }}</h2>

    {{ content }}

    <h2>Posts</h2>
    <ul>
      {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
      {% for post in filtered_posts %}
        <li>
            <a href="{{ post.url | relative_url }}">
                {{ post.title }}
            </a>
        </li>
      {% endfor %}
    </ul> 
    

The posts have a reference to the author so let’s link it to the author’s page. You can do this using a similar filtering technique in  _layouts/post.html :

    ---
    layout: default
    ---
    <h1>{{ page.title }}</h1>

    <p>
      {{ page.date | date_to_string }}
      {% assign author = site.authors | where: 'short_name', page.author | first %}
      {% if author %}
            - <a href="{{ author.url | relative_url }}">
                {{ author.name }}
            </a>
      {% endif %}
    </p> 

    {{ content }}
    

The last capitel:

Jump into the practice: Deployment.

jekyll