web-dev-qa-db-ja.com

Drupal 8でメインメニューulおよびliにクラスを追加するにはどうすればよいですか。

メインメニューのスタイルに合わせてhtml要素とそのクラスを生成したいと思います。

私はAPIドキュメントで提供されているほぼすべての可能性とコアテーマなどを見て混乱していますが、それでも私が何をしなければならないのか、どこでやらなければならないのかよくわかりません。
私は以下への明確な指針に非常に感謝します：

  1. どのphp関数を作成する必要があるか。
  2. 追加/更新する必要がある変数。
  3. 関数が移動するファイル。

おそらく、MYTHEME.themeでは、item.attributesがメニューの印刷に使用するattributesおよびlinks.html.twig変数に追加するために、何らかの前処理関数が必要ですulおよびメニュー項目li 's。

[更新]これまでのところ、メインメニューのulにクラスを配置する1つの方法を発見しましたが、理想的には、各サブメニューのulにクラスを追加して、サブメニューの深さを示します。
メインメニューの個々のlinkアイテムの生成/変更を理解できるドキュメントや例を見つけることができません。

この関数は、ファイルMYTHEME.themeに入ります。

function MYTHEME_preprocess_page(&$variables) {

  // Pass the main menu and secondary menu to the template as render arrays.
  if (!empty($variables['main_menu'])) {
    $variables['main_menu']['#attributes']['id'] = 'main-menu-links';
    $variables['main_menu']['#attributes']['class'] = array('links', 'clearfix', 'MYNEW_class');
  }

}
themingroutes8
5
iainH

_menu--main.html.twig_をテーマに保存して、メインメニューのtwigファイルを上書きします。元のmenu.html.twigを_/core/modules/system/templates/menu.html.twig_または_/core/themes/classy/templates/navigation/menu.html.twig_からコピーします。テーマは上品から拡張されます。

次に、メニュー出力の生成に使用される Twigマクロ を変更できます。レベルを示すulのクラスを取得するには、次のようにします。

_{% if menu_level == 0 %}
  <ul{{ attributes.addClass('menu', 'menu-level--' ~ menu_level) }}>
{% else %}
  <ul class="menu {{ 'menu-level--' ~ menu_level }}">
{% endif %}
_

Liと同様の操作を行うことができます。

_<li{{ item.attributes }}>_

.addClass('class-name')を次のような属性に追加するだけです：

<li{{ item.attributes.addClass('class-name') }}>

私のようなHTML /クラス名snobの場合は、次のようにクラスを削除することもできます：{{ item.attributes.removeClass('menu-item') }}

liループのforの上の行でこれを行いました。

12
wesruv

すべてのレベルのアイテムを含むメインメニューを取得する方法が解決されました Drupal 8-"メニューリンクをプラグインとして実装"、メニューツリーを作成しようとしている

Ulとliにクラスを追加するには、3つのオプションがあります。

A. menuTreeサービスをオーバーライドします。

  1. コアのMenuLinkTreeを拡張するモジュールMyprojectMenuLinkTreeに新しいMenulinkTreeを作成する
  2. MyprojectMenuLinkTree :: buildを追加してMenulinkTree :: buildをオーバーライドする
  3. このようなロジックでレベル指定クラスを更新 https://Gist.github.com/vijaycs85/308d2d0287a9ab1cd168
  4. ovrride defult menu.link_tree at sites/default/services.yml https://Gist.github.com/vijaycs85/1179c6009c6932405f1

PS：クラスを追加するためにこれらの全体のオーバーライドを行う必要がある場合は、よくわかりません。

B.テーマレイヤーのツリービルドのみをオーバーライドする：

  1. Mytheme.themeファイルにコードを追加します。 https://Gist.github.com/vijaycs85/61f2b2757f83aaa5260e

C. JavaScriptでDrupal.behaviors.MYTHEMEを使用する（ https://www.drupal.org/project/gratis から）

  1. MYTHEME/script.jsを作成する
  2. MYTHEME.behaviour.menuTreeを追加します
  3. このコードを更新します： https://Gist.github.com/vijaycs85/346c14aedffcafe8945e
1
vijaycs85