From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/posts/simple-jekyll-navigation/index.html | 79 +++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 build/posts/simple-jekyll-navigation/index.html (limited to 'build/posts/simple-jekyll-navigation/index.html') diff --git a/build/posts/simple-jekyll-navigation/index.html b/build/posts/simple-jekyll-navigation/index.html new file mode 100644 index 0000000..100accc --- /dev/null +++ b/build/posts/simple-jekyll-navigation/index.html @@ -0,0 +1,79 @@ + + + + + + + + Simple Navigation Setup in Jekyll 3.9.0 + + + + + + + +
+

Simple Navigation Setup in Jekyll 3.9.0

+

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.

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf