Navigation menus not showing up in tag pages

[notakoder]

I created tag pages using filter to show blog posts of those particular tags. These pages are in /project_folder/content/blog/tags/ directory and the blogs are in /project_folder/content/blog directory.

So in the browser, the blog list page will be @ domain/blog/ and the tag pages will be @ domain/blog/tags/tag_name

This is the code to display the navigation menus in the tag page: project_folder/themes/theme_name/tags.twig. In fact it is the same code to display menus on the blog list page too: project_folder/themes/theme_name/blog.twig.

<nav>
{% for page in pages if page.title and not page.hidden %}
{% set pageDepth = page.id|split('/')|length %}
{% if (pageDepth == 2) and (page.id ends with "/index") or (pageDepth == 1) %}
<a {% if page.id == current_page.id %} class="active"{% endif %} href="{{ page.url }}">{{ page.title }}</a>
{% endif %}
{% endfor %}
</nav>

Navigation menus aren't showing up in the tag pages - /project_folder/blog/tags/tag_name however it appears on every other page.

I am a brokencoder. :) I really don't know much about PHP language, it's syntax and twigs. The only way I can solve this is by getting help here.

[PontusHorn]

By navigation menus, are you talking about a general site navigation, ie. not related to the tag pages you're building? If so, the premise of the "filter" page you can build with this plugin is that we can filter the pages array into what the filter specifies. That means you can't at the same time use the pages for any general site navigation that you don't want to be filtered.

It's a bit of a destructive API, and was made that way in order to be able compatible with other plugins that behave similarly. It could probably be improved, especially since Pico has been upgraded significantly, but I haven't looked into it yet and probably won't for the near future. Contributions are welcome on that front. 🙂

[notakoder]

By navigation menus, are you talking about a general site navigation, ie. not related to the tag pages you're building?

Yes, the main website navigation that usually appears on the top of the website. In Github's case, they are Pull requests, Issues, Marketplace and Explore. In my case, it's About, Products & Blog.

If so, the premise of the "filter" page you can build with this plugin is that we can filter the pages array into what the filter specifies. That means you can't at the same time use the pages for any general site navigation that you don't want to be filtered.

The menus in the site navigation are those that aren't a part of the blog pages. These pages are certainly inside the content directory, but not inside the content/blog directory. If every page inside content directory is a pages array, then indeed, I won't be able to display the main navigation header on tag pages unlike other platforms like WordPress or Ghost.

[PontusHorn]

What I generally do is specify my main navigation statically rather than building it dynamically, as I generally want more control over exactly what goes into it anyway. That also frees up plugins like this one to manipulate the pages array as they need.

E.g. instead of what you have, I might do something like:

<nav>
<a {% if current_page.id == 'home' %} class="active"{% endif %} href="/">Home</a>
<a {% if current_page.id == 'blog' %} class="active"{% endif %} href="/blog">Blog</a>
<a {% if current_page.id == 'about' %} class="active"{% endif %} href="/about">About</a>
</nav>

Of course, it'd get unwieldy if you have dozens or hundreds of pages in your site navigation or if they are added/changed/deleted a lot, but it tends to work well for me.

[notakoder]

Yes, static navigation seems to be a better alternative. I'll use that. This also resolves my dilemma of rearranging the menu order according to my wish; the dynamic menu always sorts menu alphabetically.

[notakoder]

Trying static menu hard coded into the themes and it works just fine. Since I have three twig files with possible more in future and possible changes to menu too, I thought it would be better to maintain the menu in a separate file and include it in the twig file.

Referring to https://twig.symfony.com/doc/3.x/tags/include.html, I tried to replace,

<div id="header-child">
    <a class="logo" href="{{ "index"|link }}">Logo</a>
    <nav>
    <a {% if current_page.id == 'about' %} class="active"{% endif %} href="{{ base_url }}/about">About</a>
    <a {% if current_page.id == 'blog' %} class="active"{% endif %} href="{{ base_url }}/blog">Blog</a>
    <a {% if current_page.id == 'products' %} class="active"{% endif %} href="{{ base_url }}/products">Products</a>
    </nav>
    <div style="clear: both;"></div>
</div>

with

<div id="header-child">
    <a class="logo" href="{{ "index"|link }}">Logo</a>
        {% include 'menu.twig' %}
    <div style="clear: both;"></div>
</div>

The result is a blank page. menu.twig is located at /menu.twig and the theme twig is located at /themes/.theme_name/index.twig and hence, I have used ../menu.twig, ../../menu.twig and even ../../../menu.twig in the theme only to see a blank page. Something seems wrong with my include syntax.

[PontusHorn]

I think any included file has to be within your /themes/.theme_name folder as that gets specified as the root folder for Twig. If you try moving it to live at /themes/.theme_name/menu.twig, I believe you should be able to include it using the code snippet you posted.

[notakoder]

That worked. Not sure why I didn't go that far. :) Thanks anyway.

[notakoder]

Is there a situation why the menu links will not work unless there is a ? before the page url ( like localhost/project_name/?about)?

<a {% if current_page.id == 'about' %} class="active"{% endif %} href="{{ base_url }}/?about">About</a>

All of a sudden the links started to throw a 404 error. So tried the old code for dynamic menu only to see that now, the urls have a ? before the link. Did I mess up some core codes anywhere?

[notakoder]

Oh by the way, this happened when i just copied an entire project folder to another one in order to create a new project based on the same theme and structure. I thought this would be a much easier way to build another project on the current structure.

I can replicate this with other Pico projects as well.

[PontusHorn]

If I'm understanding you correctly, it sounds like either the .htaccess file did not get copied over to the new folder, or your server may be configured to only allow URL rewriting within specific folders, which doesn't include the new project folder. Does that make sense?

[notakoder]

100% true. The .htaccess file wasn't copied. Thanks.