Lesson 14: Adding our about page

This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. As of 2024, a maintained fork of the course is available at learn-eleventy.pages.dev and new students are encouraged to use that version.

This version of the course is no longer maintained. If the linked fork is also outdated, consider reviewing the open Issues on the original project to check for recent activity.

One thing that helps me to learn is repetition, so that’s what we’re going to do now by creating our ‘about’ page. This lesson features loads of stuff we already know. It’s time to commit it to memory.

Add about page layout

First up: our layout. Create a new file in your layouts folder called about.html and add the following to it:

{% extends "layouts/base.html" %} 

{% set pageHeaderTitle = title %} 
{% set pageHeaderSummary = content %} 
{% set peopleItems = collections.people %} 

{% block content %}
  <article>
    {% include "partials/page-header.html" %} 
    {% if peopleItems %} 
      <div class="[ no-js-hidden ] [ panel dot-shadow ] [ bg-light-glare ]">
        <div class="[ wrapper ] [ flow flow-space-700 ]">
          <h2 class="[ headline ] [ measure-micro color-quinary ]" data-highlight="dark">Meet the team</h2>
          {% include "partials/people.html" %}
        </div>
      </div>
    {% endif %}
  </article>

  {% include "partials/cta.html" %} 
{% endblock %}

We start off by setting content for our page header. The pageHeaderTitle is the page title—just like with our blog post—and the pageHeaderSummary is the markdown content.

We then look for our agency’s people, by querying a people collection. Those eagle-eyed amongst you will have noticed that this collection doesn’t exist yet—we’ll make that next. We take that collection and pass it into a new partial called people.html, which will be used elsewhere on the site, too.

TIP

We set the data for our upcoming partial using peopleItems. The people.html partial will be able to access that data.

I tend to keep to this style when it comes to setting variables for partials, by using the partial name, then the data name. It keeps things nice and consistent.

Create a people partial

Create a new file in your partials folder called people.html and add the following:

{% if peopleItems %}
<div class="people">
  <ol class="auto-grid">
    {% for item in peopleItems %}
    <li>
      <figure class="[ person ] [ frame ]" data-frame="quaternary">
        <img
          class="[ person__image ] [ radius ]"
          src="{{ item.data.image }}"
          alt="Image of {{ item.data.name }}"
          draggable="false"
        />
        <figcaption class="[ person__details ] [ leading-tight ]">
          <span class="[ person__name ] [ font-sans weight-bold ]"
            >{{ item.data.name }}</span
          >
          <span class="person__title">{{ item.data.title }}</span>
        </figcaption>
      </figure>
    </li>
    {% endfor %}
  </ol>
</div>
{% endif %}

We all hopefully know what’s going on in here. We check to see if the peopleItems variable is set, then loop through it, creating a list of <figure>s for each person. Job done!

Create a people collection

Open up eleventy-from-scratch/.eleventy.js and on line 30 create a new line and add the following:

// Returns a list of people ordered by filename
config.addCollection('people', collection => {
  return collection.getFilteredByGlob('./src/people/*.md').sort((a, b) => {
    return Number(a.fileSlug) > Number(b.fileSlug) ? 1 : -1;
  });
});

This is another collection added by looking up markdown files in the people directory. We then sort them numerically by fileSlug, which is the filename without the extension.

If you look in eleventy-from-scratch/src/people, you’ll notice that they are all numbered files instead of named files. This is a pretty handy way of maintaining content in an SSG like Eleventy because if stuff changes, you can switch out the content without breaking URLs. Consider that Andy’s Tip Of The Day™.

Add an about page

Lastly, we need some content. Create a new file called eleventy-from-scratch/src/about.md and add the following to it:

---
title: 'About Issue 33'
layout: 'layouts/about.html'
permalink: '/about-us/index.html'
---

Wanna see our foosball table? Nah, only kidding. We’re a made-up
agency being used as an example for the Piccalilli course,
[Learn Eleventy From Scratch](https://learneleventyfromscratch.com).

Pretty standard stuff here. All I’ll do is remind you that if you set a custom permalink, you need to add index.html at the end, or Eleventy will create a plain text file called about-us!

Wrapping up

Right, if you open up http://localhost:8080/about-us (opens new window) it should look like this.

That was pretty cool, right? I hope you just rattled through that lesson without much of a headache. If that’s the case: you’re learning really well. If not: don’t sweat. We’ve got plenty more time to practice ahead of us!