Drupal 8のテーマビュー - カスタムスタイルプラグイン

ビューはDrupal 8 Coreにあります。私たちは皆、今ではそれを知っています。 TwigはDrupal 8の新しいテンプレートエンジンです。これも知っています。しかし、2番目を使用してビューをテーマにするために、最初のものとプログラム的に相互作用する方法を知っていますか？他のサブシステムのようなオーバーライドビューテンプレートは別として、ビュープラグイン（ディスプレイ、スタイル、行、フィールド）の形式でより強力な代替手段を利用できます。 この記事では、Drupal 8のビュー用のカスタムスタイルプラグインを作成する方法を調べます。Bootstrapタブマークアップを目標として使用し、ビュー結果にタブ付き出力を実装します。ビュー構成では、スタイル設定により、どのフィールドがタブナビゲーションコピーとして使用されるかを指定し、それぞれのタブパンに表示される残りのフィールドを残します。基本的に、各ビューの結果はタブを表します。そのため、この例は、数回以上の結果があるビューには適していません。主な目標は、Drupal 8で独自のビュースタイルプラグインを作成する方法を説明することです。

プロジェクトでBootstrapを使用する方法の詳細については説明しません。ただし、アセットのドキュメントページ、または匿名のユーザーがjQueryがページにロードされていることから利益を得ることができることを確認する方法に関するこの記事を確認できます。事前に書くコードを表示したい場合は、デモモジュール内のこのリポジトリで見つけることができます。

キーテイクアウト

• Drupal 8コアにはビューが含まれるようになりました。Twigは新しいテンプレートエンジンです。ビュープラグイン（ディスプレイ、スタイル、行、フィールド）は、オーバーライドビューテンプレートの強力な代替品を提供します。このガイドでは、Drupal 8のビュー用のカスタムスタイルプラグインを作成する方法を説明します。ブートストラップタブマークアップ。
• カスタムスタイルプラグインの作成には、モジュールのプラグイン/ビュー/スタイルフォルダー内でプラグインクラスを構築することが含まれます。このクラスは、StylePluginBaseクラスから拡張され、プラグインのID、タイトル、ヘルプ、テキスト、テーマ、表示タイプを定義する@ViewsStyle Annotationが含まれています。スタイルプラグインはリストのレンダリングを担当し、ほとんどのディスプレイタイプで使用できます。
カスタムスタイルプラグインの作成の最後の部分には、テーマ関数を定義し、Twigテンプレートファイルを作成することが含まれます。 .moduleファイル内で定義されているテーマ関数は、デフォルトで$ Viewオブジェクトと結果の$行をテンプレートに渡します。 Twigテンプレートファイルは、プラグインの出力のレンダリング方法を制御します。カスタムスタイルのプラグインが作成されたら、Drupal管理インターフェイスを介して有効になり、形式設定から選択してビューを使用して使用できます。
スタイルプラグインは何ですか？

ビュースタイルプラグインは、

リスト

をレンダリングする責任があります。コアスタイルのプラグインの注目すべき例は、ほとんどのディスプレイタイプ（ページ、ブロックなど）で使用できる独自のスタイルプラグインを作成し、フィールドロープラグインを使用しましょう。 ブートストラップタブスタイルプラグイン 最初のステップは、モジュールのプラグイン/ビュー/スタイルフォルダーにあるプラグインクラスを作成することです。 drupalプラグインのタイプは、Antationでいくつかの基本的な構成が渡されたIS ViewsStyleのインスタンスを作成しています。明らかなものは別として、私たちは言及する価値のあるテーマとdisplay_typesキーを持っています。最初のテーマは、このスタイルプラグインがデータをレンダリングするために使用するテーマ機能を宣言し、2番目はこのスタイルを使用できるディスプレイプラグインの種類を宣言します（この場合、それ以外の場合はカスタムタイプを指定しないすべてのディスプレイタイプ：通常）。このプラグインタイプのすべての利用可能な注釈構成の詳細については、DrupalviewSannotationViewsStyle Annotationクラスをご覧ください。

2つのクラスプロパティを使用すると、スタイルは行プラグインを使用しているが、グループ化が許可されていないことを宣言します。親クラスをチェックして、このように指定できる他のオプションの詳細を確認してください。たとえば、私たちが拡張しているクラスは、Styleプラグインでフィールドを使用できることを既に宣言しています。 前述のように、2つのメソッドを使用して、プラグインオプションを作成し、フォーム要素を作成して、どのフィールドがタブナビゲーションとして機能するかを指定できるようにします。現在のディスプレイハンドラー（$ this-> displayhandler）を使用して、サイトビルダーが追加した利用可能なすべてのビューフィールドをロードできます。そして、この新しいフォーム要素は、スタイル設定フォームで利用できます：

StylePluginBaseクラスから拡張しているため、これ以上のことは何もありません。マークアップ出力の場合、実行されたビューから関連する変数を受信するDEMO_BOOTSTRAP_TABSテーマに依存できます。必要に応じて、レンダリングメソッドのいずれかをオーバーライドして、より多くの変数を追加したり、テーマを変更したり、必要なものを変更したりできます。特に、テンプレートが受信する変数を処理するプリプロセッサを実装するため、デフォルトには優れています。

テーマ

通常のようにDEMO_BOOTSTRAP_TABSテーマを定義する時が来ました（.MODULEファイル内）：

スタイルプラグインは、$ Viewオブジェクトと結果の$行をデフォルトでテンプレートに渡します。これらの変数がテンプレートに送信される前に（必要に応じて）、これらの変数を少し処理するのはプリプロセッサ次第です。

<span>namespace Drupal<span>\demo\Plugin\views\style</span>;
</span><span>use Drupal<span>\Core\Form\FormStateInterface</span>;
</span><span>use Drupal<span>\views\Plugin\views\style\StylePluginBase</span>;
</span>
<span>/**
</span><span> * A Views style that renders markup for Bootstrap tabs.
</span><span> *
</span><span> * <span>@ingroup views_style_plugins
</span></span><span> *
</span><span> * @ViewsStyle(
</span><span> *   id = "bootstrap_tabs",
</span><span> *   title = @Translation("Bootstrap Tabs"),
</span><span> *   help = @Translation("Uses the Bootstrap Tabs component."),
</span><span> *   theme = "demo_bootstrap_tabs",
</span><span> *   display_types = <span>{"normal"}
</span></span><span> * )
</span><span> */
</span><span>class BootstrapTabs extends StylePluginBase {
</span>
  <span>/**
</span><span>   * Does this Style plugin allow Row plugins?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesRowPlugin = TRUE;
</span>
  <span>/**
</span><span>   * Does the Style plugin support grouping of rows?
</span><span>   *
</span><span>   * <span>@var <span>bool</span>
</span></span><span>   */
</span>  <span>protected $usesGrouping = FALSE;
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>protected function defineOptions() {
</span>    <span>$options = <span>parent::</span>defineOptions();
</span>    <span>$options['tab_nav_field'] = array('default' => '');
</span>    <span>return $options;
</span>  <span>}
</span>
  <span>/**
</span><span>   * <span>{@inheritdoc}
</span></span><span>   */
</span>  <span>public function buildOptionsForm(&$form, FormStateInterface $form_state) {
</span>    <span><span>parent::</span>buildOptionsForm($form, $form_state);
</span>    <span>$options = $this->displayHandler->getFieldLabels(TRUE);
</span>    <span>$form['tab_nav_field'] = array(
</span>      <span>'#title' => $this->t('The tab navigation field'),
</span>      <span>'#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.'),
</span>      <span>'#type' => 'select',
</span>      <span>'#default_value' => $this->options['tab_nav_field'],
</span>      <span>'#options' => $options,
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

では、ここで何が起こっているのですか？まず、使用するフィールド名のスタイルプラグインオプションを確認します（ビューを構成するときに選択されたもの）。そこにいない場合、私たちは戻りますが、Template_Preprocess_Views_View_Unformatted関数がすでにうまくいくというデフォルトのプレ前処理を少し前に行う前ではありません。だから私たちはそれに委任します。次に、ビューの結果をループして、タブナビゲーション用のコンテンツの配列を作成します。このために、デフォルトのビューViews_view_fieldテーマ関数を使用して、選択したフィールドをレンダリングします。最後に、この配列をテンプレートに渡し、フォーマットのないリストスタイルのデフォルトのプリプロセッサも実行します。

テンプレート

<span>/**
</span><span> * Implements hook_theme().
</span><span> */
</span><span>function demo_theme($existing, $type, $theme, $path) {
</span>  <span>return array(
</span>    <span>'demo_bootstrap_tabs' => array(
</span>      <span>'variables' => array('view' => NULL, 'rows' => NULL),
</span>      <span>'path' => drupal_get_path('module', 'demo') . '/templates',
</span>    <span>),
</span>  <span>);
</span><span>}
</span>

Drupal 8では、テーマ機能はなく、すべてがTwigテンプレートで処理されています。それでは、モジュールのテンプレートフォルダーでDemo-Bootstrap-Tabs.html.twigファイルがどのように見えるかを見てみましょう：

ご覧のとおり、これはブートストラップタブに必要なマークアップです。もちろん、関連するブートストラップスタイルとスクリプトが最初にテーマにロードされていることを確認せずに機能しません。

最初にレンダリングするのは、タブナビゲーションアイテム（NAV変数から）です。この配列をループしている間、ループインデックス値も使用して、最初のアイテムをアクティブとしてデフォルトし、一意のIDを使用して以下のタブコンテンツペインをターゲットにすることができます。アイテムの実際の値については、プリプロセッサで作成したレンダリングアレイを印刷するだけで、Drupalはそれをレンダリングします。そうは言っても、ここで使用するフィールドが比較的短いことを確認することはおそらく良い考えです。リンクとプレーンマークアップがなければ。タイトルはおそらくうまく機能するでしょう。しかし、これはそれに応じてビューを構成する問題です。 ナビゲーションの下で、実際のビュー行を印刷して、同じループインデックスを使用して最初の行をアクティブタブペーンとしてデフォルトし、上記のナビゲーションが可視性を制御できるように一意に識別します。コンテンツについては、row.content変数全体（Template_preprocess_views_view_unformatted内で準備されています）を印刷し、ビューにすべてのフィールドを含みます。また、ナビゲーションに使用したフィールドを含めない場合は、ビュー構成の表示からそれを除外することができます。ナビゲーションにまだ表示されます（そこに明示的に印刷するため）が、メインのタブペーンには表示されません。

結論

そしてそこに私たちはそれを持っています。ビュー結果をブートストラップタブとして出力するスタイルプラグインを表示します。今必要なのは、Bootstrapアセットがロードされていることを確認し、新しいスタイルプラグインを使用するようにビューを構成するだけです。これは多くの結果を持つビューを意図したものではなく、スタイルプラグインを作成する方法を示す例としてのみ機能します。 質問、コメント、または提案がある場合は、以下に残してください！

Drupal 8

のテーマビューに関するよくある質問

Drupal 8でカスタムスタイルのプラグインを作成するには、Drupal 8にカスタムスタイルのプラグインを作成するには、いくつかのステップが含まれます。まず、まだ新しいモジュールを持っていない場合は、新しいモジュールを作成する必要があります。次に、モジュールのSRC/プラグイン/ビュー/スタイルディレクトリで、カスタムスタイルプラグインのPHPファイルを作成します。ファイルには、StylePluginBaseクラスを拡張し、@ViewsStyleアノテーションを含むクラスを含める必要があります。注釈は、プラグインのID、タイトル、およびヘルプテキストを定義します。クラスで必要なメソッドを定義した後、Drupal管理インターフェイスを介して新しいスタイルプラグインを有効にできます。 Drupal 8は、通常、プラグイン定義、プラグインクラス、テンプレートファイルの3つの重要なコンポーネントで構成されています。プラグインの定義は、@viewsstyleアノテーションを介して提供され、プラグインのID、タイトル、ヘルプテキストが含まれています。プラグインクラスは、StylePluginBaseクラスを拡張し、プラグインの動作を制御するメソッドを定義します。テンプレートファイルは、プラグインの出力のレンダリング方法を制御するTwigファイルです。のデフォルトビューテンプレートをオーバーライドするにはどうすればよいですか？ファイルの名前は、パターンViews-view– [view-name] - [display-id] .html.twigに従う必要があります。このファイルでは、ビューをレンダリングするために使用する必要があるHTMLマークアップおよびTwigコードを定義できます。ファイルを作成した後、Drupal Cacheをクリアして変更を確認します。

>

ビューに変数をビューに追加するにはどうすればよいですか。テーマの.Themeファイルのプリプロセス関数を使用して行われます。関数は、pattermed theme_name_preprocess_views_view__view_name__display_idに従う必要があります。変数の配列である単一の引数を実行する必要があります。このアレイに新しい変数を追加でき、Twigテンプレートで利用可能になります。 Drupal 8にカスタムスタイルのプラグインを作成すると、Drupal管理インターフェイスを介してビューで使用できます。ビューを編集して、フォーマットセクションに移動します。フォーマット設定をクリックして、リストからカスタムスタイルのプラグインを選択します。ビューを保存した後、カスタムスタイルプラグインを使用してレンダリングされます。 Drupal 8のカスタムスタイルプラグインは、ビューをレンダリングする責任があります。入力として行の配列が必要で、レンダリング配列を返します。レンダリング配列には、使用する小枝テンプレートを指定する#Themeキー、およびテンプレートに渡す必要がある変数を含める必要があります。 🎜> Drupal 8のビューテンプレートをデバッグすると、Twigデバッグ機能を使用して実行できます。デバッグオプションをtrueに設定して、services.ymlファイルでTwigデバッグを有効にします。次に、テンプレートを使用するページを表示すると、どのテンプレートファイルが使用されているかを表示するHTMLソースコードにコメントが表示され、それらをオーバーライドするために使用できるテンプレートファイル名を提案します。 Drupal 8のビューテンプレートで条件論的ロジックを使用します。 Twigコードでは、IFキーワードを使用して条件をテストし、条件が真か偽かに応じて異なるマークアップまたはコードを含めることができます。 8？

Drupal 8のビューでページャーをカスタマイズすることは、Drupal管理インターフェイスを介して実行できます。ビューを編集して、ポケットベルセクションに移動します。ここでは、使用するページャーの種類を選択し、ページごとに表示するアイテムの数を設定し、他のポケットベル設定を構成できます。

以上がDrupal 8のテーマビュー - カスタムスタイルプラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。