Minima header.html functionality?

Help
1

Can you tell me what the minima header.html file is supposed to do? Specifically:

  • There is a loop:
          {%- for path in page_paths -%}
            {%- assign my_page = site.pages | where: "path", path | first -%}
            {%- if my_page.title -%}
            <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
            {%- endif -%}
          {%- endfor -%}

But it only uses the first item which is “about.html”, and this is shown in the demo page here. Why it goes through all this complexity? Is there a site that uses the functionality besides about page?

        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

but I do not see it in the theme showcase. How is it suppressed? Is there an example site with them?

Thanks a lot!

1 Like
2

Hi.

The intent of this code is to build a navbar in one of two ways.

You can either set header paths in your config as the path of the file.

E.g.

header_files:
  - about.md
  - contact.md

This controls what appears in the nav and also the order.

Secondly, if you omit the key from your config, the code will use all pages in your site and build a menu for it. Using whatever order Jekyll determines - alphabetical.

This is controlled by this at the top of the includes file which is important to consider.

# All pages.
{%- assign default_paths = site.pages | map: "path" -%}

# Use configured value if set, otherwise use all pages.
{%- assign page_paths = site.header_pages | default: default_paths -%}

Here is my example site with Minima theme.

Hamburger is for mobile only. Horizontal navbar is for desktop only.

If you want to experiment, clone that and run it locally. Then set header pages in the config and restart Jekyll.

1 Like
3

One other thing to note.

You linked to the master branch of Minima.

There have been some significant changes to the theme since the last release way back, which is the one used by GH Pages.

Such as paths of css files in the theme.

So here is a link to the header file for the last release.

Versions in use on GH Pages