How to Set a Multi-level Dynamic Menu on Jekyll

I have few pages on my jekyll website such as 'About', 'Blog' pages. Jekyll has a pretty good way of adding the page-links to the top navigation bar. The only problem which I was facing was that I have enabled 'pagination' Click this to learn how to set pagination on jekyll and as soon as I enabled it, I started seeing multiple links pointing to 'Blog' in my navigation menu.

The reason for that was that all the pages (of pagination) were being considered as separate site.pages. This is not what I wanted, a page for each paginated page as blog/page1, blog/page2 etc. So I ran through the jungle of Web and found that there are many ways to set it. Few of the ways which I liked are as mentioned below:

Method 1: Setup a separate configuration file to maintain the menus

As mentioned here, one could use this plugin and create a separate file to maintain the menu. This way user will have a lot of control over what goes into the menu and in which order. The only issue with this method is that each time you add a new page, you have to add it to the top-menu. I don't want that, at least not yet.

Method 2: Use a liquid script

As mentioned here, one could add a simple script in the navigation.html and make the process of creating menus and submenus automated. For amandogra.github.io, I have modified this script a bit as I want only first level of pages to be displayed in my website. i.e., pages like /blog/ or /about/ and not something like /blog/page1. So the piece of code which I added to display my navigation menu is as follows:

{% assign entries = site.pages ' sort: "path" %}
{% for entry in entries %}

{% capture slug    %}{{ entry.url ' split: "/"   ' last                       }}{% endcapture %}
{% capture current %}{{ entry.url ' remove: slug ' remove: "//" ' append: "/" }}{% endcapture %}

{% if '/' == current %}
<a class="page-link {% if page.url == entry.url %}active{% endif %}"
href="{{ site.baseurl }}{{ entry.url }}">;{{ entry.title }}<;/a>;
{% endif %}
{% endfor %}

This liquid template simply navigates through all the pages and add only those to the navigation menu which do not have any slug. Pretty neat. Thanks, Kasper Isager!

{% highlight ruby linenos %} {% assign entries = site.pages ' sort: "path" %} {% endhighlight %}

Previous postHow to Convert Html to Markdown Using Vim-pandocNext postRetrospective 2015