How does navigation bar work?

[monikagupta78]

I am not able to understand how the nav bar links are rendered. pls help me understand this logic.

In navbar.html - how this site.html_pages is set? where it is defined?

{% assign pages = site.html_pages | sort: 'weight' %}

[yousinix]

• site.html_pages is a Jekyll variable that returns a list of all the pages having .html extension. For example, by running the following snippet:

  {% for page in site.html_pages %}
      {{ page }}
  {% endfor %}

  it will return the following liquid list of pages:

  {"dir"=>"/", "name"=>"404.html", "path"=>"404.html", "url"=>"/404"}
  
  {"layout"=>"page", "title"=>"About", "permalink"=>"/about/", "weight"=>3, "dir"=>"/about/", "name"=>"about.md", "path"=>"pages/about.md", "url"=>"/about/"}
  
  {"layout"=>"default", "title"=>"Articles", "permalink"=>"/articles/", "weight"=>2, "dir"=>"/articles/", "name"=>"articles.html", "path"=>"pages/articles.html", "url"=>"/articles/"}
  
  {"layout"=>"page", "title"=>"Docs", "permalink"=>"/docs/", "weight"=>5, "dir"=>"/docs/", "name"=>"docs.md", "path"=>"docs/docs.md", "url"=>"/docs/"}
  
  {"layout"=>"page", "title"=>"Elements", "permalink"=>"/elements/", "weight"=>4, "dir"=>"/elements/", "name"=>"elements.md", "path"=>"docs/elements.md", "url"=>"/elements/"}
  
  {"layout"=>nil, "title"=>"<i class=\"fab fa-1x fa-github\"></i>", "weight"=>6, "external_url"=>"https://github.com/YoussefRaafatNasry/portfolYOU", "dir"=>"/docs/", "name"=>"github.md", "path"=>"docs/github.md", "url"=>"/docs/github"}
  
  {"layout"=>"default", "dir"=>"/", "name"=>"index.html", "path"=>"index.html", "url"=>"/"}
  
  {"layout"=>"default", "title"=>"Projects", "permalink"=>"/projects/", "weight"=>1, "dir"=>"/projects/", "name"=>"projects.html", "path"=>"pages/projects.html", "url"=>"/projects/"}

• Then by assigning site.html_pages list to another variable called pages and using the sort filter to sort it in ascending order depending on weight variable declared in the front matter of each page, the new list will look something like this:

  {"name"=>"404.html" ....}
  
  {"name"=>"index.html"....}
  
  {"title"=>"Projects", "weight"=>1 ....}
  
  {"title"=>"Articles", "weight"=>2 ....}
  
  {"title"=>"About", "weight"=>3 ....}
  
  {"title"=>"Elements", "weight"=>4 ....}
  
  {"title"=>"Docs", "weight"=>5 ....}
  
  {"title"=>"<i class=\"fab fa-1x fa-github\"></i>", "weight"=>6 ....}

  the previous list was minimized to focus on the stuff that matter

• As obvious in the previous snippet, not all pages have title that's why {% if site_page.title %} is used in navbar.html to access pages with a declared title only, to avoid displaying 404.html and index.html in the navbar.

I hope that this was helpful, don't hesitate to ask if there was something unclear or for further help with anything else.

[monikagupta78]

Thanks a ton , i understood now.