12.15 Add a nav and a footer
Table of contents
- Add a reference to navigation links to your template
- Debug the missing reference
- Add the missing file
- Do more later
- What you’ve learned
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.
Add a reference to navigation links to your template
Open layouts/default.html. Add the following line directly under the opening
This makes the full file look like this:
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:
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:
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.
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.
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:
What you’ve learned
- Once you have templates set up, there are fewer places where you have to maintain code.