aboutsummaryrefslogtreecommitdiff
path: root/_posts/2020-09-29-simple-jekyll-navigation.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-02 14:28:49 -0400
committerBradley Taunt <bt@btxx.org>2024-07-02 14:28:49 -0400
commitdc6db80fa72286704849ef61ee0e5ccb5841cb09 (patch)
tree9235d796229d49211c27a07b9d18585d503baa94 /_posts/2020-09-29-simple-jekyll-navigation.md
parent088c87bcb58be576308da503d4f11a68843c5013 (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.md58
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 &amp; 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.