css - 如何使用 Grav 显示部分导航

Question

我是第一次使用 Grav，所以 Twig Sytnax 等对我来说还是很新的。
我应该设置导航样式，以便首先显示单词或页面名称的一部分
随着悬停，单词的其余部分应该出现。 (示例:您可以看到“Ab”，悬停时显示“关于”)。

我不确定如何访问各个页面的名称并将它们分开。据我了解，navigation.html.twig 提取各个页面的名称和链接。如何单独划分这些名称？是否最好编写自己的静态导航以便我可以单独编辑各个名称？我该怎么做？

代码:navigation.html.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 %}
            <a class="has-children sidebar-nav-item {{current_page }}" href="{{ p.url }}">
                {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
                {{ p.menu }}
            </a>
            <a>
                {{ _self.loop(p) }}
            </a>
    {% else %}
            <a class="sidebar-nav-item {{ current_page }}" href="{{ p.url }}">
                {{ p.menu }}
            </a>
        </a>
    {% endif %}
{% endfor %}

{% endmacro %}

{% if theme_config.dropdown.enabled %}
    {{ _self.loop(pages) }}
{% else %}
    {% for page in pages.children.visible %}
        {% set current_page = (page.active or page.activeChild) ? 'selected' : '' %}
        <a class="sidebar-nav-item {{current_page}}" href="{{ page.url }}">
                {{ page.menu }}
            </a>

    {% endfor %}
{% endif %}
{% for mitem in site.menu %}
        <a class="sidebar-nav-item" href="{{ mitem.url }}">
            {{ mitem.text }}
        </a>
{% endfor %}

代码 sidebar.html.twig:

    <nav class="sidebar-nav">
      {% include 'partials/navigation.html.twig'%}
    </nav>

Answer 1

上面的导航循环假定您正在嵌套/排列页面，因为您希望它们出现在导航中。然后它将顶级/根页面作为导航的第一个“级别”，并且该页面的任何子级将出现在父级下方的子导航中，假设您的主题具有 dropdown.enabled ({% if theme_config.dropdown.enabled %}) 并且子页面设置为可见。这也将递归执行此操作，因此如果 child 也有 child ，他们也会被包括在内。

如果您按照这种方式构建您的网站，您将获得所需的导航。

有多种替代方法可以使用主题中的自定义配置创建不同的导航。如果您需要更多帮助，我可以为您指明正确的方向。