{"id":15885,"date":"2019-10-16T07:45:51","date_gmt":"2019-10-16T07:45:51","guid":{"rendered":"https:\/\/blog.taragana.com\/?p=15885"},"modified":"2019-11-24T04:44:01","modified_gmt":"2019-11-24T04:44:01","slug":"jekyll-how-to-auto-generate-hierarchical-menu","status":"publish","type":"post","link":"https:\/\/blog.taragana.com\/jekyll-how-to-auto-generate-hierarchical-menu-15885","title":{"rendered":"Jekyll: How to auto-generate hierarchical menu"},"content":{"rendered":"\n

Jekyll<\/a>, the wonderful static sites generator that new Taragana corporate site<\/a> is built upon, provides a navigation menu (in the default theme) which is essentially a list of all pages on the sites. This does not work well for sites with large number of pages, corporate sites and especially sites with deep page hierarchy.<\/p>\n\n\n\n

Jekyll provide 10 recipes<\/a> for hierarchical navigation. However, none addresses a very simple need. I have a site, currently, with 3 levels (could be more in future) of hierarchy. In each level I want to have navigation menu show only the children, and one level deep only, in navigation menu so it creates a silo. For example, when I am in Services, I want to show relevant link only for services. The user can at any time go to the Home page by clicking on the logo.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

I initially thought of providing a link to the parent, from each page, but decided against it as that would duplicate the function of the back button, which users are very familiar with.<\/p>\n\n\n\n

The following code is for the default minima theme. You can replace the entire div class trigger with the following content.<\/p>\n\n\n\n

        <div class=\"trigger\">\n        {% assign url_parts_size = page.url | split: '\/' | size | plus: 1 %}\n        {% if page.url == '\/' %}\n          {% assign url_parts_size = url_parts_size | plus: 1 %}\n        {% endif %}\n        {% assign mypage = page.url | split: '.html' | first %}\n        {% for node in site.pages %}\n          {% if node.url contains mypage and node.url != page.url %}\n            {% assign node_url_parts_size = node.url | split: '\/' | size %}\n            {% if node_url_parts_size == url_parts_size %}\n              <a class=\"page-link\" href=\"{{ node.url | split: '.html' | first | relative_url }}\">{{ node.title | escape }}<\/a>\n            {% endif %}\n          {% endif %}\n        {% endfor %}\n        <\/div><\/code><\/pre>\n\n\n\n
Writing code in liquid is a royal pain due to unconventional syntax. The above code finds out url’s which share the same base path but one level higher (children).<\/p>\n\n\n\n
Let me know if you decide to use the above code and what modifications, if any you made.<\/p>\n","protected":false},"excerpt":{"rendered":"
Jekyll, the wonderful static sites generator that new Taragana corporate site is built upon, provides a navigation menu (in the default theme) which is essentially a list of all pages on the sites. This does not work well for sites with large number of pages, corporate sites and especially sites with deep page hierarchy. Jekyll […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[161,162],"_links":{"self":[{"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/posts\/15885"}],"collection":[{"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/comments?post=15885"}],"version-history":[{"count":5,"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/posts\/15885\/revisions"}],"predecessor-version":[{"id":15891,"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/posts\/15885\/revisions\/15891"}],"wp:attachment":[{"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/media?parent=15885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/categories?post=15885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.taragana.com\/wp-json\/wp\/v2\/tags?post=15885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}