Understanding navigation pane about gravity HOT 2 CLOSED

Wow Hemang! Thank you so much for the thorough response! I definitely understand everything better now, and will start playing around with things to customize the website a bit for myself. I'll let you know if I hit any hiccups now 👍

from gravity.

Hello @sjfox 😄
Thanks for getting in touch,

Let me give you a complete overview of things,

File Structure of Gravity

In the Includes folder,

• There is a file called head.html which contains all the stuff that goes into the tag of each webpage generated with Gravity.
• Header.html consists of all the code driving the header part of website. Like the title, description and navigation bar.

In the layouts folder are the basic templates for,

• Creating a page
• Creating a post
• Creating an archive page

Post folder contains all the posts, as its name.

Now as you can see there are several files in main directory which are not inside any folder, config.yml, about.md, design.md, index.html etc.

So the about.md and download.md files, are sample Pages, whereas design.md and science.md are sample Archive Pages (Archive Pages show only those posts which fall under their category ).
But as you can see the archive.html file in layouts folder, it has..

---
layout: page
---

This implies that all archive type pages are ultimately of type page only. This type thing decides what kind of layout that .md file should be given.

So let me show how navigation files are generated. Two things to keep in mind are, header.html is the file which contains all the contents that go into the header part of all the webpages generated using Gravity and the second thing is FRONT MATTER decides what file is what.

Process of page creation

1. We create a file called newpage.md in root directory and in its front matter write,

layout: page
title : Give a title, lets say 'newpage'
permalink:  Give a permalink (Usually the title), lets say /newpage/
---

1. Now save the file.
2. Jekyll starts generating webpages, it checks the value in the layout field of newpage.md, searches for that layout name in _layouts folder, and then applies that layout to our newpage.md and converts it into newpage.html. This all happens under the hood.
3. Jekyll starts processing header.html and starts creating content to be put in header part of website.
4. Jekyll reaches this part of code in header.html, this part is responsible for creating navigation bar,

<div class="trigger site-navigation">
    <a class="page-link" href="{{site.url}}{{site.baseurl}}">HOME</a><span class="exclamationMark">/</span>

    {% for sitePage in site.pages %}
    {% if sitePage.title %}

    <a class="page-link" href="{{sitePage.url | prepend: site.baseurl }}">{{sitePage.title}}</a><span class="exclamationMark">/</span>
    {% endif %}
    {% endfor %}
  </div>

The first part
<a class="page-link" href="{{site.url}}{{site.baseurl}}">HOME</a><span class="exclamationMark">/</span>
is a hardcoded link to HOME page.

And the second part
We have a FOR loop (Language used: Liquid).
This searches all the generated webpages which have a layout of type "page" and then display them in site's navbar in ALPHABETICAL ORDER.

{% for sitePage in site.pages %}
    {% if sitePage.title %}

    <a class="page-link" href="{{sitePage.url | prepend: site.baseurl }}">
{{sitePage.title}}
</a>

<span class="exclamationMark">/</span>
    {% endif %}
    {% endfor %}

So its the property of Liquid's for Loop due to which all the navigation pages are arranged in Alphabetical Order by default.

You can read more about for loops in Liquid and modify them, like reversing the order of pages and limiting the number of pages
https://github.com/Shopify/liquid/wiki/liquid-for-designers
https://help.shopify.com/themes/liquid/objects/for-loops
https://help.shopify.com/themes/liquid/tags/iteration-tags

Like here's how we can modify the for loop so that it shows only 5 pages in navigation bar,

{% for sitePage in site.pages limit:5 %}

Feel free to discuss more/ask anything. 👍 😃

Thanks
Hemang

from gravity.