この記事では、Drupal 8でビューのスタイルプラグインを作成する方法について説明します。 Bootstrapタブレイアウトを使用し、Views結果のタブ付き出力を実装します。 ビュー構成では、スタイル設定により、タブナビゲーションのコピーとして使用するフィールドを決定し、残りのフィールドを対応するタブに表示したままにすることができます。 一般に、各ビューの結果はタブになるため、この例は結果が多すぎるビューには適していません。 私たちの目標は、Drupal 8で独自のスタイルプラグインを作成するプロセスを示すことです。
プロジェクトでBootstrapを使用する方法については詳しく説明しません。 ただし、匿名ユーザーページでjQueryをロードする方法を説明したドキュメントまたは記事を読むことはできます。 また、事前に作成したコードを確認したい場合は、デモモジュールファイルのこのリポジトリで見つけることができます。
スタイルプラグインとは何ですか？
スタイルプラグインはリストの転送を担当します。 スタイルプラグインの鮮明な例は、 未フォーマットリスト 、 HTMLリスト 、 テーブルまたはグリッドです。 これらはDisplayプラグインによって使用され、リストの1つのアイテムを表すRowプラグインを使用します。
Drupal 8では、すべてのタイプのビュープラグインは新しいプラグインシステムを使用して構築され、共通の機能を備えています（それらはすべて同じPluginBaseから継承します ）。
ほとんどのタイプの表示（ページ、ブロックなど）で使用でき、フィールドプラグインを使用する同じスタイルプラグインを作成しましょう。
スタイルプラグインタブブートストラップ
最初のステップは、モジュールのPlugin / views / styleフォルダーにプラグインクラスを作成することです。
namespace Drupal\demo\Plugin\views\style; use Drupal\Core\Form\FormStateInterface; use Drupal\views\Plugin\views\style\StylePluginBase; /** * Views , Bootstrap . * * @ingroup views_style_plugins * * @ViewsStyle( * id = "bootstrap_tabs", * title = @Translation("Bootstrap Tabs"), * help = @Translation("Uses the Bootstrap Tabs component."), * theme = "demo_bootstrap_tabs", * display_types = {"normal"} * ) */ class BootstrapTabs extends StylePluginBase { /** * Style Row ? * * @var bool */ protected $usesRowPlugin = TRUE; /** * Style ? * * @var bool */ protected $usesGrouping = FALSE; /** * {@inheritdoc} */ protected function defineOptions() { $options = parent::defineOptions(); $options['tab_nav_field'] = array('default' => ''); return $options; } /** * {@inheritdoc} */ public function buildOptionsForm(&$form, FormStateInterface $form_state) { parent::buildOptionsForm($form, $form_state); $options = $this->displayHandler->getFieldLabels(TRUE); $form['tab_nav_field'] = array( '#title' => $this->t('The tab navigation field'), '#description' => $this->t('Select the field that will be used as the tab navigation. The rest of the fields will show up in the tab content.'), '#type' => 'select', '#default_value' => $this->options['tab_nav_field'], '#options' => $options, ); } }
作成するDrupalプラグインはViewsStyleであり、アノテーションに関するいくつかの基本データが送信されます。 最も明白なデータはもちろんのこと、言及する価値のあるthemeキーワードとdisplay_typesキーワードがあります。 テーマは、プラグインがデータ転送に使用するテーマ機能を通知し、display_typesは、このスタイルが使用できる表示プラグインの種類を通知します（この場合、定義されていない場合はすべての表示タイプ：通常）。 可能なすべての注釈構成について詳しく知りたい場合は、 注釈クラスのDrupal \ views \ Annotation \ ViewsStyleを確認してください。
クラスの2つのプロパティを使用して、プラグインが行プラグインを使用するが、グループ化は許可しないことを発表しました。 すべての親を確認し、他の同様のオプションを検討してください。 たとえば、継承するクラスは、スタイルプラグインでビューを使用できることを既に発表しています。
前に述べたように、2つの方法を使用して、タブナビゲーションとして使用するフィールドを決定できるプラグインオプションとフォーム要素を作成します。 現在の状態ハンドラー（ $ this-> displayHandler ）を使用して、サイトエンジンが追加した使用可能なすべてのビューフィールドをロードできます。 そして、この新しいフォーム要素はスタイル設定フォームで利用可能になります：
StylePluginBaseクラスから継承するため、他に何もする必要はありません。 マークアップを出力するには、テーマdemo_bootstrap_tabsに依存できます。このテーマは、実行されたビューから適切な変数を取得します。 本当にしたい場合は、メソッドを再定義し、変数を追加したり、件名を変更したりできます。 しかし、デフォルトのパラメーターは私たちにとって素晴らしいものです。特に、テンプレートが受け取る変数を処理するプリプロセッサーを実装しているためです。
テーマ
テーマ（ demo.bootstrap_tabs ）を定義する時がきました（通常は.moduleファイル内で）：
/** * Implements hook_theme(). */ function demo_theme($existing, $type, $theme, $path) { return array( 'demo_bootstrap_tabs' => array( 'variables' => array('view' => NULL, 'rows' => NULL), 'path' => drupal_get_path('module', 'demo') . '/templates', ), ); }
Styleプラグインはデフォルトで、$ビューオブジェクトと$行の結果をテンプレートに渡します。 これらの変数を（必要に応じて）テンプレートに渡す前に処理することは、プリプロセッサの仕事です。
/** * demo_bootstrap_tabs. * * : demo-bootstrap-tabs.html.twig. * * @param array $variables * : * - view: view. * - row: rows. row – . */ function template_preprocess_demo_bootstrap_tabs(&$variables) { $view = $variables['view']; $rows = $variables['rows']; $variables['nav'] = array(); // . $field = $view->style_plugin->options['tab_nav_field']; if (!$field || !isset($view->field[$field])) { template_preprocess_views_view_unformatted($variables); return; } $nav = array(); foreach ($rows as $id => $row) { $nav[$id] = array( '#theme' => 'views_view_field', '#view' => $view, '#field' => $view->field[$field], '#row' => $row['#row'], ); } template_preprocess_views_view_unformatted($variables); $variables['nav'] = $nav; }
ここで何が起こっていますか？ 最初に、フィールド名が使用されているかどうか（ビューの構成時に選択されたもの）について、スタイルプラグインの設定を確認します。 そうでない場合は、プリプロセッサがtemplate_preprocess_views_view_unformatted関数を実行した後にのみreturnを呼び出します。 さらに、ビューの結果によると、サイクルが経過し、その結果、タブナビゲーション用のコンテンツの配列が作成されます。 これを行うには、テーマ関数views_view_fieldを使用して、選択したフィールドを渡します。 最後に、この配列をテンプレートに渡し、フォーマットされていないリストスタイルのプリプロセッサを実行します。
模様
Drupal 8にはテーマがなくなり、すべてがTwigテンプレートで処理されるようになりました。 モジュールテンプレートフォルダでdemo-bootstrap-tabs.html.twigファイルがどのように見えるかを見てみましょう。
<div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> {% for tab in nav %} {% set active = '' %} {% if loop.index0 == 0 %} {% set active = 'active' %} {% endif %} <li role="presentation" class="{{ active }}"><a href="#tab-{{ loop.index0 }}" aria-controls="profile" role="tab" data-toggle="tab">{{ tab }}</a></li> {% endfor %} </ul> <!-- Tab panes --> <div class="tab-content"> {% for row in rows %} {% set active = '' %} {% if loop.index0 == 0 %} {% set active = 'active' %} {% endif %} <div role="tabpanel" class="tab-pane {{ active }}" id="tab-{{ loop.index0 }}">{{ row.content }}</div> {% endfor %} </div> </div>
ご覧のとおり、これはBootstrapタブに必要なマークアップです。 もちろん、適切なBootstrapスタイルとスクリプトをテーマにロードしていないと機能しません。
最初に渡すのは、タブナビゲーションアイテム（nav変数から）です。 ループがこの配列を反復処理するとき、最初の項目をアクティブなデフォルト値にし、一意のIDを使用してタブコンテンツウィンドウをターゲットにできるようにするために、ループインデックス値も利用できます。 ポイントの実際の値については、プリプロセッサで作成された転送された配列を出力するだけで、Drupalはその転送に従事します。 上記に基づいて、ここで使用するフィールドがリンクと基本的なマークアップなしで比較的短いことを確認することをお勧めします。 名前は正常に機能する場合があります。 しかし、ここでは適切なビュー構成にあります。
ナビゲーションの下部で、同じループインデックスを使用して現在の行を渡し、最初の行をデフォルトでアクティブなタブバーとして設定し、上で作成されたナビゲーションが表示を制御できるように一意にラベルを付けます。 コンテンツに関しては、row.content変数全体（ template_preprocess_views_view_unformatted内で準備された）を渡します。これは、ビューのすべてのフィールドを格納します。 また、ナビゲーションに使用したフィールドを含めたくない場合は、ビュー構成で表示から除外するだけです。 このフィールドはナビゲーションに表示されます（そこに配置したため）が、メインのタブバーには表示されません。
おわりに
まあ、それだけです。 ビューの結果をブートストラップタブの形式で表示するためのビュースタイルプラグイン。 ここで必要なのは、Bootstrapの依存関係がロードされていることを確認し、Styleプラグインを使用するようにViewを構成することです。 このメソッドは、多数の結果を伴うビューには適しておらず、スタイルプラグインを作成する例としてのみ機能することに注意してください。
この記事は、記事「 Drupal 8のテーマビュー-カスタムスタイルプラグイン 」の翻訳です。