Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Jekyll data-driven navigation
{% comment %}
This snippet checks the data "navigation.json" file for pages not included
Usage:
{% include jsonnav.html %}
Return:
HTML direct output
Required:
json file called "navigation.json" in data folder
{% endcomment %}
{% comment %}
--------------------------------------------------------------------------------------------------------------------------------------------------------------
--- VARIABLES ---
--------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% assign foundPages = "" %}
{% assign foundPagesCount = 0 %}
{% assign newPages = "" %}
{% assign newPagesCount = 0 %}
{% comment %}
--------------------------------------------------------------------------------------------------------------------------------------------------------------
--- LOGIC ---
--------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for page in site.html_pages %}
{% assign found = false %}
{% comment %}
------------------------------------------------------------------------------------------------------------------------------------------------------------
--- LEVEL 1 ---
------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for link in site.data.navigation %}
{% if link.url == page.url && link.title == page.title %}
{% assign found = true %}
{% break %}
{% else %}
{% comment %}{{link.url}} == {{page.url}} &amp;&amp; {{link.title}} == {{page.title}}<br>{% endcomment %}
{% endif %}
{% if link.subpages.size > 0 %}
{% comment %}
----------------------------------------------------------------------------------------------------------------------------------------------------
--- LEVEL 2 ---
----------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for sublink in link.subpages %}
{% if sublink.url == page.url && sublink.title == page.title %}
{% assign found = true %}
{% break %}
{% else %}
{% comment %}{{sublink.url}} == {{page.url}} &amp;&amp; {{sublink.title}} == {{page.title}}<br>{% endcomment %}
{% endif %}
{% if sublink.subpages.size > 0 %}
{% comment %}
--------------------------------------------------------------------------------------------------------------------------------------------
--- LEVEL 3 ---
--------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for subsublink in sublink.subpages %}
{% if subsublink.url == page.url && subsublink.title == page.title %}
{% assign found = true %}
{% break %}
{% else %}
{% comment %}{{subsublink.url}} == {{page.url}}<br>{% endcomment %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% comment %}
Handeling found and new pages
{% endcomment %}
{% if found == true %} {% comment %}Found pages{% endcomment %}
{% assign foundPagesCount = foundPagesCount | plus: 1 %}
{% capture foundPages %}{{ foundPages }}
<pre><code>
{
"title": "{{ page.title }}",
"url": "{{ page.url }}",
"subpages": []
},
</code></pre><hr>
{% endcapture %}
{% else %} {% comment %}New pages{% endcomment %}
{% assign newPagesCount = newPagesCount | plus: 1 %}
{% capture newPages %}{{ newPages }}
<pre><code>
{
"title": "{{ page.title }}",
"url": "{{ page.url }}",
"subpages": []
},
</code></pre><hr>
{% endcapture %}
{% endif %}
{% endfor %}
{% comment %}
--------------------------------------------------------------------------------------------------------------------------------------------------------------
--- OUTPUT ---
--------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
<h2>New pages <small>({{ newPagesCount }})</small></h2>
{{ newPages }}
<h2>Found pages <small>({{ foundPagesCount }})</small></h2>
{{ foundPages }}
{% comment %}
This snippet spits out the HTML navigation derived from a json data file.
Usage:
{% include navigation.html %}
Return:
HTML direct output
Required:
json file called "navigation.json" in data folder
{% endcomment %}
<ul class="navi top-margin7-xs">
{% comment %}
------------------------------------------------------------------------------------------------------------------------------------------------------------
--- LEVEL 1 ---
------------------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for link in site.data.navigation %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
{% if link.subpages.size > 0 %}
<ul>
{% comment %}
----------------------------------------------------------------------------------------------------------------------------------------------------
--- LEVEL 2 ---
----------------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for sublink in link.subpages %}
<li>
<a href="{{ sublink.url }}">{{ sublink.title }}</a>
{% if sublink.subpages.size > 0 %}
<ul>
{% comment %}
--------------------------------------------------------------------------------------------------------------------------------------------
--- LEVEL 3 ---
--------------------------------------------------------------------------------------------------------------------------------------------
{% endcomment %}
{% for subsublink in sublink.subpages %}
<li>
<a href="{{ subsublink.url }}">{{ subsublink.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
[
{
"title": "Home",
"url": "/"
},
{
"title": "Customer Experience",
"url": "/Customer%20Experience/",
"subpages": [
{
"title": "Example",
"url": "/Customer%20Experience/example/"
}
]
},
{
"title": "Capture",
"url": "/Capture/",
"subpages": [
{
"title": "Example",
"url": "/Capture/example/"
}
]
},
{
"title": "Create",
"url": "/Create/",
"subpages": [
{
"title": "Example",
"url": "/Create/example/"
}
]
},
{
"title": "GEM",
"url": "/GEM/",
"subpages": [
{
"title": "Using GEM",
"url": "/GEM/Using%20GEM/",
"subpages": [
{
"title": "Example",
"url": "/GEM/Using%20GEM/example/"
}
]
},
{
"title": "Production",
"url": "/GEM/Production/",
"subpages": [
{
"title": "Example",
"url": "/GEM/Production/example/"
}
]
},
{
"title": "UX UI",
"url": "/GEM/UX%20UI/",
"subpages": [
{
"title": "Example",
"url": "/GEM/UX%20UI/example/"
}
]
},
{
"title": "Visual Designer",
"url": "/GEM/Visual%20Designer/",
"subpages": [
{
"title": "Example",
"url": "/GEM/Visual%20Designer/example/"
}
]
},
{
"title": "The FEDs",
"url": "/GEM/The%20FEDs/",
"subpages": [
{
"title": "Example",
"url": "/GEM/The%20FEDs/example/"
}
]
}
]
},
{
"title": "Tools",
"url": "/Tools/",
"subpages": [
{
"title": "Example",
"url": "/Tools/example/"
}
]
},
{
"title": "Support",
"url": "/Support/",
"subpages": [
{
"title": "Example",
"url": "/Support/example/"
}
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.