12.15 Add a nav and a footer

Table of contents

Edit this page

Building on your knowledge of templating, this article adds more shared code to your template.

Let’s add some navigation links that will appear on every page. Now you have a template, you only have to change shared code in one place.

Open layouts/default.html. Add the following line directly under the opening <body> tag:

  {% include navigation.html %}

This makes the full file look like this:

  <!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="/css/main.css">
      <link href="https://fonts.googleapis.com/css?family=Amiri&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
    </head>
    <body>
      {% include navigation.html %}
      {{ content }}
    </body>
  </html>

Refresh the index page in your browser, because the index page uses the default template. You might expect the page to show some navigation links. Hang on: why hasn’t anything changed?

Debug the missing reference

To debug this problem, let’s look at the server log. Look at your Terminal, where your server log has been running all this time. There is a big red error message:

A screenshot of frightening looking errors on the server log

If you pick through those words, shouty-red and off-putting though they are, they are actually very descriptive and tell you that you’ve failed to include a file:

  Liquid Exception: Could not locate the included file 'navigation.html'

So you’ll add that file now.

Add the missing file

Add a folder called _includes at the same level as the _layouts and _data folders. Within your new folder, add a file and name it navigation.html. The _includes folder must be at the same level as other folders that start with an underscore, such as _layouts.

Paste the following code in to navigation.html, and save the file.

  <nav>
    <ul class="nav-item-container ">
      <li class="nav-item"><a href="/">Home</a></li>
      <li class="nav-item"><a href="/portfolio/">Books</a></li>
      <li class="nav-item"><a href="/about/">About</a></li>
    </ul>
  </nav>

Showing the nav links being added to the text editor

Refresh the browser: you’ll see your new nav links. And now you can more easily get around your website: click the “Books” link on your web page.

Showing the nav links in the browser

Do more later

  • It’s best for users if link labels match the words found at their destination. Amend the word “Books” to “Portfolio”, by editing the navigation.html file.
  • Make the “About” link work, in the same way you added the portfolio page.
  • Add in a footer section, using the following code as a starting point:
  <!-- _layouts/default.html -->
  <body>
    {% include navigation.html %}
    {{ content }}
    {% include footer.html %}
  </body>
<footer>
  <div class="wrapper">
    <ul>
      <li>
        <a href="https://unsplash.com/photos/gE1phX0Lbos">Photos by Unsplash</a>
      </li>
      <li>
        <a href="https://generalproducts.co">A General Products Ltd initiative</a>
      </li>
      <li>2019.dayofcode.co.uk</li>
    </ul>
    <ul>
      <li>With thanks to our gold sponsors:</li>
      <li>
        <a href="https://consonance.app">Consonance</a>
      </li>
      <li>
        <a href="https://www.hachette.co.uk/">Hachette UK</a>
      </li>
      <li>
        <a href="hhttps://www.nielsen.com/uk/en/">Nielsen</a>
      </li>
      <li>
        <a href="https://www.thebookseller.com/">The Bookseller</a>
      </li>
    </ul>
  </div>
</footer>

What you’ve learned

  • Once you have templates set up, there are fewer places where you have to maintain code.