From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2020-09-29-simple-jekyll-navigation.md | 58 --------------------------- 1 file changed, 58 deletions(-) delete mode 100644 _posts/2020-09-29-simple-jekyll-navigation.md (limited to '_posts/2020-09-29-simple-jekyll-navigation.md') diff --git a/_posts/2020-09-29-simple-jekyll-navigation.md b/_posts/2020-09-29-simple-jekyll-navigation.md deleted file mode 100644 index d948f99..0000000 --- a/_posts/2020-09-29-simple-jekyll-navigation.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -layout: post -title: "Simple Navigation Setup in Jekyll 3.9.0" -date: 2020-09-29 ---- - - -I have found that there is a lot of information on the internet in regards to setting up "dynamic" navigation in Jekyll. The problem I've noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out `nav` elements in Jekyll (3.9.0 as of this writing). - -## Creating the Directories & Files - -In your Jekyll project, at the top level, you need to create a directory called `_data`. Inside this folder we will be creating a new file called `navigation.yml`. The contents of this file will contain all your navigation links and they are rendered like so: - - - - title: Home - url: / - - - title: Articles - url: /articles/ - - - title: About - url: /about/ - - -## Dynamically Rendering the Navigation - -The next and final step is rendering out the navigation with a simple loop: - - - {% for item in site.data.navigation %} -
  • - {{ item.title }} -
  • - {% endfor %} - - -## Highlight Current Page - -It's also very easy to extend this method to add a CSS class based on whether a user is on the currently selected page or not: - - - {% for item in site.data.navigation %} -
  • - {% if item.url == page.url %} - {{ item.title }} - {% else %} - {{ item.title }} - {% endif %} -
  • - {% endfor %} - - - - /* Custom styling for active class */ - li a.active { color: red; } - - -Congrats! You now have fully functional, dynamic navigation on your Jekyll site. -- cgit v1.2.3-54-g00ecf