web-dev-qa-db-ja.com

プライマリメニューのためだけにmenu.html.twigをオーバーライドする

Drupal 8 Beta 1には、カスタムテーマに組み込んでカスタマイズできる、使用する多くのNiceテンプレートがあります。コアのmenu.html.twigをカスタムテーマに組み込み、実際にそこでマークアップをカスタマイズできます。ただし、このテンプレートは、オーバーライドしたいプライマリメニューだけでなく、すべてのDrupalメニューをオーバーライドします。

Devel moduleをDrupal 8に試してみたところ、内部で何が起こっているのかについての洞察が得られるかもしれません。しかし、モジュールはまだ流動的な状態のようで、大きなエラーが発生しました。 Drupal 7のテンプレート候補のgotoモジュールはDevel Themer（Theme Developer）ですが、Drupal 8バージョンはありません。

また、テンプレート名で具体的に取得してmenu--primary.html.twigを試しましたが、それも機能しませんでした。

次に、テンプレートの中で、変更したい部分のifをラップしてみました：

{% if primary_menu %}
   <ul{{ attributes.addClass('foobar-menu') }}>
{% endif %}

...しかし、そこにも喜びはありません。だから私はこれを行う方法についての考えがありません。

routes8theming
5
Danny Englander

ここで私自身の質問に答えると、これは小枝をデバッグしたい人にはおそらく役立つでしょう。

  1. モジュールページまたはDrushでdevel Kint（Develモジュールの一部）をアクティブ化する

  2. _site /sites/default/services.yml_で、次の設定を変更します。

    _parameters: twig.config: debug: true cache: false auto_reload: true_

  3. 次に、デバッグするテンプレートに次のコードを配置します。

    {{ kint() }}

Drupal 7.で古いスタイルkpr(get_defined_vars());を実行した場合と同じように出力される変数のニースツリーが表示されます。

{{ kint() }} printout of vars

  1. デバッグプリントアウトから、メニューの名前が単にmainであることがわかります。
  2. 次に、カスタムテーマのテンプレートフォルダー内のオーバーライドされたテンプレートを_menu--main.html.twig_に変更します
  3. ちなみに、テンプレートはメインのメインメニューにのみ固有のものです。
  4. あなたの心の内容に合わせてテーマとしてカスタマイズしてください。
  5. このプロセス全体を通して、キャッシュをクリアし、完了したらデバッグコードを変更/削除することを忘れないでください。

これに加えて、デバッグがアクティブな場合、Chromeは可能なテンプレート提案をラdevel_themerで出力するため、必ずしもKintを使用する必要はありません。

enter image description here

11
Danny Englander

OPがメインメニューではなくプライマリメニューを意味する場合に備えて、リージョンには任意のメニュー、または複数のメニューを割り当てることができることを覚えておく必要があります。

そのため、特定の領域に配置されているメニューにテーマを付ける場合は、テーマフックの提案を追加する必要があります。ここに私がそれをした方法があります：

.themeまたは.moduleファイルで：

 _
use \Drupal\block\Entity\Block;

/**
 * Implements hook_theme_suggestions_HOOK_alter() for block templates.
 */
function TEMPLATE_theme_suggestions_block_alter(array &$suggestions, array $variables) {
  $base_plugin_id = $variables['elements']['#base_plugin_id'];
  $system_menu_block = $base_plugin_id == 'system_menu_block';

  if ($system_menu_block) {
    $id = $variables['elements']['#id'];
    $block = Block::load($id);
    $region = $block->get('region');
    $suggestions[] = 'block__' . $region . '__menu';
  }
}
_

これで、すべてのシステムメニューブロックに新しいテーマフックの提案があります。

TEMPLATE_preprocess_block__REGION__menu()

次のようなテーマフックの提案を使用します。

 _
/**
 * Implements template_preprocess_block() for the primary menu region.
 */
function TEMPLATE_preprocess_block__primary_menu__menu(&$variables) {
  $variables['content']['#theme'] = 'menu__primary';
}
_

最後に、上記で割り当てた_#theme_変数を使用してテンプレートファイルを作成します。

_menu--primary.html.twig_

したがって、_sidebar_first_領域がある場合は、次を使用します。

 _
/**
 * Implements template_preprocess_block() for the sidebar_first region.
 */
function TEMPLATE_preprocess_block__sidebar_first__menu(&$variables) {
  $variables['content']['#theme'] = 'menu__sidebar_first';
}
_

そして：

_menu--sidebar-first.html.twig_

1
Richard Buchanan