Twigテンプレートのレンダリングメニュー


7

admin/structure/menuメニューを作成しました。このメニュー(machinename:付きmy_menu)を小枝テンプレートでレンダリングすることは可能ですか?どういうわけか:

{{ my_menu }}

回答:


7

メニューの簡素化はあなたが望むもののように聞こえます。

Simple_menuモジュールはTwigExtensionを使用して、Drupalのメインメニュー(またはそのほかの任意のメニュー)にアクセスし、配列をレンダリングして、twigテンプレートからアクセスできるようにします。小枝テンプレートでメニューのレンダー配列を完全に制御できる多くの利点の1つは、メニューのマークアップをカスタマイズして、メニューにアクセスして標準に準拠できるようにすることです。

// Get menu items
{% set items = simplify_menu('main') %}

// Iterate menu tree
<ul>
  {% for menu_item in items.menu_tree %}
    <li class="{{ item_class }} navigation__item">
      <a href="{{ menu_item.url }}" class="{{ link_class }}">{{ menu_item.text }}</a>
    </li>
  {% endfor %}
</ul>

それ以外の場合はmenu-*、ブロックからメニューをレンダリングするときに使用する小枝テンプレートがいくつかあります。DrupalでTwigデバッグ設定をオンにして、提案を確認します。

ただし、それを正確に理解するには、メニューのテーマについてかなりの知識が必要です(上記の例のようにフラットなメニュー構造ではなく、子アイテムを処理するなど)。つまり、ブロックでメニューを特定の地域。次に、menu.html.twigベーステーマ(上品または安定)から検査して、マークアップを変更する場合のオプションを確認します。

menu.html.twigDrupalによってレンダリングされるすべてのメニューに影響するので、それだけでなく、適切なtwigテンプレートの提案を使用してください...これがデフォルトのテンプレートです。

メニューブロックをインストールすることをお勧めします。これにより、テーマ設定と小枝ファイルの提案に柔軟性が追加されます。また、メニューのツリー(サイドバーのセクションベースのナビゲーションなど)を簡単にレンダリングできます。


ありがとう。上記の質問をしたのは、ネストされた小枝テンプレートでメニュー(ブロックメニュー)をレンダリングできないためです。ここで私の質問を参照してください。多分あなたは答えを持っています..?
meez

メニューを簡略化すると、どのような小枝テンプレートからでもメニューを呼び出すことができます。
Kevin

Simplify Menuをインストールして有効にしました。追加し{% set items = simplify_menu('main') %}たheader.twigファイルに(この場合)メインナビゲーションメニューが表示されませんか?
meez

残りの例に従いましたか?そのようにするか、メニューを保持するブロックを呼び出してレンダリングし、変数を作成する必要があります。それは彼らが通常ではないだろう他の小枝のテンプレートに代わり注入メニューで、正直、ブロックシステムに任せるのがベストです。
ケビン

わかりました。残りの例を実行すると、うまくいきます。しかし、あなたが提案するように、それをブロックシステムに任せる方が良いです。Simplify Menuでこれを行うにはどうすればよいですか?1) admin / structure / blockで、メニューをリージョンに配置してから無効にしました(これでブロックIDがわかりました)。2)header.twigが試しました{{ simplify_menu('crmnavigation') }}が、ブロックをロードしていませんか?header.twigSimplify Menuを使用して、ブロックとその中のメニューをどのようにロードするか知っていますか?
meez

3

optimize_menuモジュールを有効にしてから、メニューをレンダリングするpage.html.twigまたはその他のtwigテンプレートに以下のコードを追加します。

<nav class="navigation__main" role="navigation">
  {% set item_class = 'navigation__item' %}
  {% set link_class = 'navigation__link' %}
  <ul class="navigation__items">
    {% set items = simplify_menu('main') %}
      {% for menu_item in items.menu_tree %}
          <li class="{{ item_class }}"><a href="{{ menu_item.url }}" class="{{ link_class }}">{{ menu_item.text }}</a></li>
      {% endfor %}
  </ul>
</nav>

これ'main'は、メニューページのメニューの編集ボタンにカーソルを合わせ、ブラウザの下部に表示されるURLを確認することで確認できるメニューIDです。


3

まだ別のアプローチを探している人のために、私はTwig Tweakモジュールをより安定した、よりグローバルなユースケースとして使用することをお勧めします。チートシートをチェックしてください

twig tweakを使用してメニューをレンダリングするには、次の操作を実行できます。

{# Expand menu items to display the entire menu tree. #}    
{{ drupal_menu('menu_machine_name') }}

{# Specify menu level and depth. #}
{{ drupal_menu('admin', 2, 3) }}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.