Using front matter

A better way is to highlight the navigation using front matter. For the pages we want in the navigation, we’ll add a navigation_weight to the front matter. The value of navigation_weight is a number which dictates the position it’s shown. For index.html we’ll add a navigation_weight of 1:

---
layout: default
title: Home
navigation_weight: 1
---
...

And for blog.html we’ll add a navigation_weight of 2:

---
layout: default
title: Blog
navigation_weight: 2
---
...

Then instead of having static links in _layouts/default.html, we can sort our html pages by their navigation_weight, loop over the pages that have a navigation_weight and output the url, title and an active class if it’s the current page: