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

Question

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

{% 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

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

{% 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 %}

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

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