drupal 8のメニューでli要素（現在のページ）にクラスを追加する方法

私がいるページのdrupal 8のメニューのli要素にクラスを追加したいと思います。たとえば、スタートページにいる場合、そのliにはアクティブなクラスがあります。または、[参加]ページにいる場合、参加のli要素にアクティブなクラスがあります。

<ul class="">
<li class="active"><a href="#" >START</a></li>
<li class=""><a href="#" >About</a></li>
<li class=""><a href="#" >join</a></li>
</ul>

では、liがアクティブかどうかを確認するにはどうすればよいですか？

{% for item in items %}
  {% if item=SOMETHING %}
    <li class="active">
      <a  href="{{ item.url }}">{{ item.title }}</a>
    </li>
  {% else %}
    <li >
      <a  href="{{ item.url }}">{{ item.title }}</a>
    </li>
{% endfor %}

routes 8

— 坂セルビア
ソース

cssのみで最初に試してくださいli a:active { color:red; text-decoration:underline; }

— Sssweatなし

Soryy質問はしませんでした。:(私は私がどこのページのためのアクティブなクラス=を追加したいと思います。

— SakaSerbia

私は実際にそれを得ましたが、それが機能するかどうかを確認するために私のcssコードを試してください。（それはあなたがいるページを自動的に検出し、liそれに応じてメニューに下線を引くかもしれ

— ません

動作しますが、メニュー項目をクリックして彼にprntscr.com/a4tpmyを移動すると、自動検出が機能しないようです。

— SakaSerbia 2016

なぜ誰もがそうするのでしょうか？あなたは本当にあなたのユーザーがそれをするだろうと思いますか？

— Sssweatなし16

回答:

ファイルに<li>次のコードを追加する必要があるアクティブクラスを追加するには.theme、menu.html.twig

で.themeファイルにこれを追加

function themename_preprocess_menu(&$variables, $hook) {
  if ($hook == 'menu__main') { // If it is not working replace "main__menu" with "menu"

    // Get the current path.
    $current_path = \Drupal::request()->getRequestUri();
    $items = $variables['items'];
    foreach ($items as $key => $item) {
      // If path is current_path, set active to li.
      if ($item['url']->toString() == $current_path) {
      // Add active link.
      $variables['items'][$key]['attributes']['class'] = 'active';
      }
    }
  }
}

menu.html.twigで<li>、次の行に置き換えます。

この行を置き換える

{{ link(item.title, item.url) }}

沿って

<li {{ item.attributes }} ><a  href="{{ item.url }}"  {{ item.attributes }} > {{ item.title }}</a></li>

— Vamsi
ソース

プログラムでページを検出し、その条件にクラスを適用することをお勧めします。次の手順を実行できます。

現在のページを検出します（コード：Drupal 7の場合）。

 <php
  $path = current_path();
  $path_alias = drupal_lookup_path('alias',$path);
 ?>

現在のページのページ名とページ名が一致するif条件を追加します
```
if($path_alias == "current-page") { print  "active"; }
```

これで問題が解決する可能性があります

— アムレンドラクマール
ソース