Cách thêm lớp trong phần tử li (cho trang tôi đang ở) trong menu cho drupal 8

Tôi muốn thêm lớp trong phần tử li trong menu cho drupal 8 cho trang tôi đang ở. Ví dụ: nếu tôi ở trang Bắt đầu, li đó có lớp hoạt động. Hoặc Nếu tôi ở trang Tham gia mà phần tử li để tham gia có lớp hoạt động.

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

Vì vậy, làm thế nào để hỏi nếu li đang hoạt động hay không?

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

— SakaSerbia
nguồn

thử đầu tiên chỉ với cssli a:active { color:red; text-decoration:underline; }

— Không có Sssweat

Soryy tôi không hỏi câu hỏi hay. :( Tôi muốn thêm class = active cho trang nơi tôi đang ở

— SakaSerbia

Tôi thực sự đã nhận được điều đó, nhưng hãy thử mã css của tôi để xem nó có hoạt động không. (nó có thể tự động phát hiện trang bạn đang truy cập và gạch dưới Menu liphù hợp)

— Không có Sssweat

Là công việc nhưng khi bạn nhấp vào mục menu và muve anh prntscr.com/a4tpmy có vẻ như tự động phát hiện không hoạt động.

— SakaSerbia

Tại sao mọi người sẽ làm điều đó? Bạn thực sự nghĩ rằng người dùng của bạn sẽ làm điều đó?

— Không có Sssweat

Câu trả lời:

Để thêm lớp hoạt động <li>cần thêm mã sau vào .themetệp của bạn vàmenu.html.twig

Trong tệp .theme thêm cái này

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';
      }
    }
  }
}

Trong menu.html.twig thay thế của bạn <li>với dòng dưới đây.

thay thế dòng này

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

bởi

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

— Vamsi
nguồn

Sẽ tốt hơn nếu bạn lập trình phát hiện trang và áp dụng lớp theo điều kiện đó. Bạn có thể làm theo các bước sau.

Phát hiện trang hiện tại (MÃ: Đối với Drupal 7).

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

Thêm điều kiện if khớp với tên trang của bạn với điều kiện của trang hiện tại
```
if($path_alias == "current-page") { print  "active"; }
```

Điều này có thể giải quyết vấn đề của bạn

— Amrendra Kumar
nguồn