web-dev-qa-db-ja.com

小枝を使用してメニューブロックにカスタムクラスを追加する方法

私はDrupal 8の新人で、以下のようにtwigを使用してプライマリメニューブロックを表示しようとしています

 {% if page.primary_menu %}
   {{ page.primary_menu }}
 {% endif %}

このようにしてくれます

<ul class="sm menu-base-theme" id="main-menu">
   <li>
      <a href="/drupal8/" data-drupal-link-system-path="<front>" class="is-active">About</a>
   </li>
   <li>
      <a href="/drupal8/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
   </li>
</ul>

ulおよびa要素にカスタムクラス属性を追加して、このようなメニューを取得したい

<ul class="nav navbar-nav navbar-right" id="main-menu">
   <li>
      <a href="#about" data-drupal-link-system-path="<front>" class="page-scroll">About</a>
   </li>
   <li>
      <a href="#home" data-drupal-link-system-path="<front>" class="page-scroll">Home</a>
   </li>
</ul>

メニューにカスタムクラスを追加するにはどうすればよいですか？この問題について何か考えがあれば、私を助けてください。ありがとうございました。

theming8navigation
3
Sujan Shrestha

これは、テーマのテンプレートフォルダーに「menu--main.html」というテンプレートファイルを作成することで実行できます。

次に、そのファイルのコードの下に配置します。

 {％メニューとしての_selfのインポート％} 
 {{menus.menu_links（items、attributes、0）}} 
 {％マクロmenu_links（items、attributes、menu_level）％} 
 {％メニューとしての_selfのインポート％} 
 {％if item％} 
 {％if menu_level == 0％}
  <ul{{ attributes.addClass('menu', 'nav', 'navbar-nav','navbar-right') }}>

    {％ そうしないと ％}
  <ul{{ attributes.addClass('dropdown-menu') }}>

 {％endif％} 
 {％for item in items％} 
 {％if menu_level == 0 and item.is_expanded％}
    <li{{ item.attributes.addClass('expanded', 'dropdown') }}>
    <a href="{{ item.url }}" class="page-scroll">{{ item.title }}</a>

 {％else％} 
 
 {{link（item.title、item.url）}} 
 {％endif％} 
 { ％if item.below％} 
 {{menus.menu_links（item.below、attributes.removeClass（ 'nav'、 'navbar-nav'）、menu_level + 1）}} 
 {％ endif％}
  </li>
{% endfor %}
</ul>

 {％endif％} 
 {％endmacro％}

これにより、クラス「ul」が追加されます

4
Sachin

Menu Link Attribute モジュールを使用して、クラス、IDなどをメニュー項目に追加できます。

このモジュールを使用すると、メニューリンクに属性を追加できます。

したがって、追加された属性を使用して、メニュー項目をカスタマイズできます。

3
CodeNext

フックを使用できますように：

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    if (!isset($variables['attributes']['class'])) {
      $variables['attributes']['class'] = [];
    }
    $variables['attributes']['class'] = array_merge($variables['attributes']['class'], ['my-main-menu']);  }
}

ソース： https://www.drupal.org/docs/8/theming-drupal-8/modifying-attributes-in-a-theme-file

0
Jean-Luc Barat