当页面不在菜单中时，Timber Twig 将 class 添加到祖先菜单项

Question

我有一个包含 2 个子级别的菜单：/news/current-news/ - 在 'current-news' 级别，顶部 'news' 列表项正确选择 'current_page_parent' class。该页面上的项目太多，无法作为第 3 级菜单放入，这些是分页的预告片。当您单击其中一个预告片时，url 是 /news/current-news/item-title - 在该页面上我想要主要的 'news' 项目菜单仍然选择 'current_page_parent' class - 这可能吗，因为它是 url 中的子项，但不在菜单结构中？我的菜单树枝是：

{% if menu %}
<ul class="nav-main">
{% for item in menu.get_items %}
  <li class="nav-main-item{{ item.classes|join(' ') }}" role="menuitem"
  {% if item.children %}role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0"{% endif %}>
    <a class="nav-main-link" href="{{ item.get_link }}">{{ item.title }}</a>
    {% if item.get_children %}
      <ul class="nav-drop">
      {% for child in item.get_children %}
        <li class="nav-drop-item {{ child.classes | join(' ') }}">
          <a class="nav-drop-link" href="{{ child.get_link }}">
            <div class="menu-item-title">{{ child.title }}</div> 
            <div class="menu-item-description">{{ child.post_content }}</div>
          </a>
        </li>
      {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}</ul>{% endif %}

并来自页面的 php 模板：

<?php
/**
 * Template Name: Blog Landing Page
 * Template Post Type: page
 */

global $paged;
  if (!isset($paged) || !$paged){
      $paged = 1;
  }

 $context = Timber::context();

$timber_post     = new Timber\Post();
$context['post'] = $timber_post;

$newsArgs   =   array(
    'post_type'     =>  'post',
  'post_status'     => 'publish',
  'posts_per_page'  =>  6,
  'paged'           => $paged,
    'orderby'       =>  array(
    'date'          =>  'DESC'
));
$context['news'] = new Timber\PostQuery($newsArgs);

Timber::render( 'layouts/layout-blog.twig', $context );

Answer 1

我相信您可以通过比较 post 路径和菜单项路径来做到这一点。此示例添加 current_page_parent class 如果 post 路径包含菜单项路径：

{% if item.path in post.path %} current_page_parent {% endif %}

它在您的代码段中：

{% if menu %}
<ul class="nav-main">
{% for item in menu.get_items %}
  <li class="nav-main-item{{ item.classes|join(' ') }}{% if item.path in post.path %} current_page_parent {% endif %}" role="menuitem"
  {% if item.children %}role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0"{% endif %}>
    <a class="nav-main-link" href="{{ item.get_link }}">{{ item.title }}</a>
    {% if item.get_children %}
      <ul class="nav-drop">
      {% for child in item.get_children %}
        <li class="nav-drop-item {{ child.classes | join(' ') }}">
          <a class="nav-drop-link" href="{{ child.get_link }}">
            <div class="menu-item-title">{{ child.title }}</div> 
            <div class="menu-item-description">{{ child.post_content }}</div>
          </a>
        </li>
      {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}</ul>{% endif %}

如果您只想将该行为限制在 News 菜单项，只需添加另一个条件：

{% if item.title == 'News' and item.path in post.path %} current_page_parent {% endif %}

当页面不在菜单中时，Timber Twig 将 class 添加到祖先菜单项

Timber Twig add class to ancestor menu item when page is not in menu

wordpress

menu

twig

timber