Twig, categories and navigation breadcrumbs

[iagovar]

Hi, I'm trying to create a navigation bar breadcrumbs-style but failed to show the current category title and link, since it's not yet in the documentation, I tried this:

<span class="navigation">Estás en <a href="{{ "index"|link }}">{{ site_title }}</a> > <a href="{{ "category"|link }}">{{ category_title }}</a></span>

That would show up in http://domain.tld/category/page

[PhrozenByte]

Where does the category come from? You're using some sort of plugin for this, right? What plugin? How does it work? I'm unsure about what you are even trying to do. You're basically providing zero information :wink:

[iagovar]

Hi, I'm not using any plugin, I'm using Pico 2 beta.

I'm just editing my theme page template. So when a page is shown, this breadcrumbs bar is shown.

So if the user is in /category/article there will be a bar saying "You are in Main Site > Category", he can click in "Main Site" to go back to the index page, or "Category" to go back to the parent category.

[PhrozenByte]

So, basically your directory is the category. What you still need is a way to store the category's name (and other metadata). It's probably best to simply use content/category/index.md for that. Another thing you've to do is to guess the category of a page (i.e. extract category from a page like category/page). Some simple string manipulation should do the job.

{% if current_page %}
    <span class="navigation">
        Estás en <a href="{{ base_url }}">{{ site_title }}</a>
        {% set pathComponents = current_page.id|split("/")|slice(0, -1) %}
        {% for subPath in pathComponents %}
            {% set category = pathComponents|slice(loop.index0)|join("/") ~ "/index" %}
            &gt; <a href="{{ category|link }}">{{ pages[category].title }}</a>
        {% endfor %}
    </span>
{% endif %}

The snippet above is untested.

#edit: Snippet updated

[iagovar]

Hi, I already have a category page, I did as stated here: https://github.com/picocms/Pico/issues/414

Edit: missed things in your comment. I'd try your proposal and see how it goes, thx.

[PhrozenByte]

Should work then :wink:

[iagovar]

It seems to not be working:

Example: https://www.amagazine.es/electronica/grabadora-de-voz-para-entrevistas

[PhrozenByte]

I've updated the snippet, see above

[iagovar]

It works! Thank you so much!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1: