12.15 Add a nav and a footer
Table of contents
- Add the navigation links
- Add a reference to these links to your template
- Do more later
- What you’ve learned
Building on your knowledge of templating, this article adds more shared code to your template.
You’re going to 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 the navigation links
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.
Add a reference to these 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’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.
- Add an “About” link and an About page, in the same way you added the portfolio page. The link text will look like this:
- Add in a footer section, using the following code as a starting point:
Your page will end up a bit like this:
What you’ve learned
- Once you have templates set up, there are fewer places where you have to maintain code.