Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Sidebar for subpages

Started by Muut Archive 10 years ago · 5 replies · 694 views
10 years ago

I'm thinking about a way to have different sidebars for pages.

The idea is to allow pages to have their own sidebar, but fall back to a default one. Bonus points for walking through parent pages/folders and use their sidebar until only the top level "default" sidebar is left.

I'm guessing I'd have to use modular pages for that, but since I just started playing with Grav, I'm not sure how I'd do that.

10 years ago

Why not use collection ?

I use this in a template to display pages at the same level as my current page:

HTML
<div class="nav-widget">
    <p>Quick access:</p>
    <ul>
    {% for p in page.parent.children %}
        <li><a href="{{ p.url }}">{{ p.menu }}</a></li>
    {% endfor %}                    
         </ul>
</div>

Using siblings should be better but can't make it work in Twig. So I take parent and then chldren to get all pages at the same levels.

You can look at macro too ; I use this for a menu ; you'll miss the fist <ul>...</ul> which is in a parent file.

TWIG
{% macro loop(page) %}
    {% for p in page.children.visible %}
        {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
        {% if p.children.visible.count > 0 %}
            <li class="{{ current_page }}">
                <a href="{{ p.url }}">{{ p.menu }}</a>
                <ul class="menu">
                    {{ _self.loop(p) }}
                </ul>
            </li>
        {% else %}
            <li>
                <a href="{{ p.url }}">{{ p.menu }}</a>
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

{{ _self.loop(pages) }}

Hope it helps,
Nicolas

10 years ago

I do something similar to what you are looking for in my Grav Course Hub Project. There I support multiple courses (blogs), where each can contain its own sidebar. If no custom sidebars are found I then use the top-level one.

Twig:
https://github.com/hibbitts-design/grav-skeleton-multi-course-blog-hub-site/blob/master/user/themes/course-hub-bootstrap/templates/partials/sidebar.html.twig

Top-level structure:
https://github.com/hibbitts-design/grav-skeleton-multi-course-blog-hub-site/tree/master/user/pages

Blog #1 structure:
https://github.com/hibbitts-design/grav-skeleton-multi-course-blog-hub-site/tree/master/user/pages/02.cpt-363

Blog #2 structure:
https://github.com/hibbitts-design/grav-skeleton-multi-course-blog-hub-site/tree/master/user/pages/03.cpt-365

Hope the above is of some help.

10 years ago

Thanks Nicolas, but my question was not about navigation. The idea is to have a default sidebar showing an about me and perhaps some tag clouds, etc.

But when you get to a lower level page I'd like to show a different sidebar specifically for the project this page is about for example.

I think Paul's suggestion might be something to look into, but it's getting late here, so I have to push it to tomorrow :)

10 years ago

ooops it's the "walk through children" which made me think about this kind of recursive mechanism to fetch content. I didn't think about "inheritence" as you expect...

10 years ago

I'm not sure if this is the best solution since I'm new to Grav and Twig, but it seems to work for now. Thanks to @paulhibbitts for giving me the idea to use uri.path|split('/') to be able to move through the levels.

TWIG
{% set sidebarContent = '' %} {# some default "emptiness"... #}
{% set pathArray = uri.path|split('/') %} {# is there a better option than using the URI? #}
{% for pathPart in pathArray %}
    {% set fullPath = fullPath ~ pathPart %}
    {% set tmpContent = pages.find(fullPath ~ '/sidebar').content %}
    {% if tmpContent is not empty %}
        {% set sidebarContent = tmpContent %} {# overwrite old sidebar content with new #}
    {% endif %}
    {% set fullPath = fullPath ~ '/' %} {# add delimiter to prepare for the next pathPart #)
{% endfor %}
{{ sidebarContent }} 

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1357 9 years ago
Archive · by Muut Archive, 9 years ago
2 936 9 years ago
Archive · by Muut Archive, 9 years ago
2 4066 9 years ago
Archive · by Muut Archive, 9 years ago
1 2954 9 years ago
Archive · by Muut Archive, 9 years ago
3 1120 9 years ago