How to stop pagenator-v2-generated pages from appearing in nav menu

Help
1

Prior to upgrading to paginator-v2, I used the following code in my header.html include to generate a menu of pages in the site root (such as Home, About, etc). Note that the link to HOME is hard-coded, and /index.html doesn’t have a title, the if sitePage.title loops through only those pages that include a title and keeps Home as the first menu item the whole time:

<div class="trigger site-navigation">
    <a class="page-link" href="/">HOME</a>

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

    <a class="page-link" href="{{sitePage.url}}">{{sitePage.title}}</a>

    {% endif %}
    {% endfor %}
  </div>

However, after updating to jekyll-paginator-v2, that code now displays pagintor pages (e.g., page 2, page 3) along with the list of pages in the root path.

My assumption is that paginator-generated index.html pages now get included in site.pages in v2 but weren’t in v1.

Any suggestions for working around this?

EDIT:

The solution was just to add a custom variable to the front matter for pages I want in the menu, and rewrite the conditional. I had been trying this but wrote the conditional incorrectly (had to double-check the liquid spec). So I found success with the following:

  <div class="trigger site-navigation">
    <a class="page-link" href="/">HOME</a>

    {% for sitePage in site.pages %}
    {% if sitePage.nav == true %}

    <a class="page-link" href="{{sitePage.url}}">{{sitePage.title}}</a>

    {% endif %}
    {% endfor %}
  </div>
2

Here’s another solution.

Create a data file called theme.yml in _data directory and add the following format. (You could also just add this to config.yml if you are not using gem-based themes.)

navigation:

  - title: Home
    url: /

  - title: About
    url: /about/

  - title: Writings
    url: /writings/

  - title: Themes
    url: /open-source/

  - title: Forestry CMS
    url: https://forestry.io

  - title: Contact 
    url: mailto:hello@example.com

Then you can call the navigation data in theme.yml from your navigation using the following.

{% if site.data.theme.navigation %}
 <nav>
    {% for link in site.data.theme.navigation %}
      {% if link.url contains 'http' %}
        {% assign domain = '' %}
      {% elsif link.url contains 'mailto' %}
        {% assign domain = '' %}
      {% else %}
        {% assign domain = site.url | append: site.baseurl %}
      {% endif %}
      <a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title | capitalize }}</a>
    {% endfor %}
  </nav>
{% endif %}

There are some advantages to this such as

  • Support for multiple site navigations. e.g footer links.
  • Control what pages are shown in each navigation.
  • Open all external links in a new tab.
  • Support for mailto links if not using something like Netlify form handling.

Just my 2 cents. Hope this is helpful to the community.
-Colin

2 Likes
3

This is a great suggestion. I’ll definitely play around with this. It seems a lot cleaner and predictable than my current approach (though my current approach has the advantage of basically automatically updating any time I add a .md file to my root, though that has pitfalls such as the one I ran into that prompted this post!)

1 Like
4

Another solution would be to modify the conditional in your first example to check the page’s URL. If your paginated pages follow a predictable URL scheme (e.g. /page2/index.html, /page3/index.html) you might to check against that and ignore them.

<div class="trigger site-navigation">
    <a class="page-link" href="/">HOME</a>

    {% for sitePage in site.pages %}
      {% if sitePage.title %}
        {% unless sitePage.url contains "/page" %}
          <a class="page-link" href="{{sitePage.url}}">{{sitePage.title}}</a>
        {% endunless %}
      {% endif %}
    {% endfor %}
  </div>
1 Like