GravCMS
Меню в Grav CMS

Меню одностраничник и многостраничник

В frontmetter модульной страницы добавить параметр

onpage_menu: false

Меню с подпунктами модульных страниц

Source (opens in a new tab)

It will show the following menu structure:

  • If page1 selected: section1.1 - section1.2 - section1.3 - page2 - pageN
  • If page2 selected: page1 - section2.1 - section2.2 - section2.3 - pageN

If that’s what you are looking for, you can follow the following steps:

Create an inherited theme from Quark. If you don’t you will loose your changes when Quark is updated to a new release.

Copy file ‘user/themes/quark/templates/modular.html.twig’ into folder ‘user/themes/mytheme/templates/’

In your theme’s ‘modular.html.twig’, replace lines 34-45 with:

{# Add loop though all toplevel pages #}
{% for toplevelPage in pages.children() %}
    {% if toplevelPage.url == page.url and page.template == 'modular' %}
        {# For current page, show sub modules if it is a modular page #}
        {% for module in page.collection() if module.header.visible is not same as(false) %}
            {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
            <li><a class="{{ current_module }}" href="#{{ macro.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
        {% endfor %}
    {% else %}
        {# if toplevelPage is other page, create link to page and not submodule #}
        <li><a class="toplevel-page {{ current_module }}" href="{{ toplevelPage.url }}">{{ toplevelPage.menu }}</a></li>
    {% endif %}
{% endfor %}
{# add external menutiems defined in site.yaml #}
{% for mitem in site.menu %}
    <li>
        <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}">
            {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
            {{ mitem.text }}
        </a>
    </li>
{% endfor %}

I have added a loop around the original navigation logic. In the outer loop, we loop through all top-level pages. If the toplevel page is the current page and it is a modular page, we use the original navigation logic. Else we create a normal link to the other toplevel page.

The links to the other toplevel pages don’t work correctly yet, because of the javascript embedded in the page. We have to exclude the toplevel pages from this script.

Change line 23 to:

filter: ':not(.external):not(.toplevel-page)',

Desktop:

You should now see in the menu a list of all top-level pages. If the current page is a modular page, its sections will be shown in the menu.

  • If page1 selected: section1.1 - section1.2 - section1.3 - page2 - pageN
  • If page2 selected: page1 - section2.1 - section2.2 - section2.3 - pageN

Mobile:

On a mobile device, Quark shows by design only top-level pages and no sub-modules. So your observation is by design.