diff options
author | Bradley Taunt <bt@btxx.org> | 2024-07-02 14:28:49 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-07-02 14:28:49 -0400 |
commit | dc6db80fa72286704849ef61ee0e5ccb5841cb09 (patch) | |
tree | 9235d796229d49211c27a07b9d18585d503baa94 /_posts/2020-09-29-simple-jekyll-navigation.md | |
parent | 088c87bcb58be576308da503d4f11a68843c5013 (diff) |
Conversion to barf for testing purposes
Diffstat (limited to '_posts/2020-09-29-simple-jekyll-navigation.md')
-rw-r--r-- | _posts/2020-09-29-simple-jekyll-navigation.md | 58 |
1 files changed, 0 insertions, 58 deletions
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 %} - <li> - <a href="{{ item.url }}"><span>{{ item.title }}</span></a> - </li> - {% 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 %} - <li> - {% if item.url == page.url %} - <a class="active" href="{{ item.url }}"><span>{{ item.title }}</span></a> - {% else %} - <a href="{{ item.url }}"><span>{{ item.title }}</span></a> - {% endif %} - </li> - {% endfor %} - - - - /* Custom styling for active class */ - li a.active { color: red; } - - -Congrats! You now have fully functional, dynamic navigation on your Jekyll site. |