Drupal 8中的主題視圖 - 自定義樣式插件

>視圖在Drupal 8核心中。我們都知道到現在。 Twig是Drupal 8中的新型模板引擎。我們也知道。但是，我們知道如何與第一個相互作用，以便使用第二個來主題A視圖？除了使用任何其他子系統（如其他子系統）之類的覆蓋視圖模板外，我們還以視圖插件的形式（顯示，樣式，行和字段）提供了更強大的替代方法。 在本文中，我們將研究如何為Drupal 8中的視圖創建自定義樣式插件。我們將使用“ Bootstrap”選項卡標記作為目標，並實現選項卡式輸出以進行視圖結果。在視圖配置中，樣式設置將允許我們指定哪個字段將用作標籤導航副本，而將其餘的字段顯示在相應的選項卡窗格中。基本上，每個視圖結果將代表一個選項卡 - 因此此示例不適合具有多個結果的視圖。主要目標是說明我們如何在Drupal 8中創建自己的視圖樣式插件

>我們將不會介紹如何在項目中使用Bootstrap的詳細信息。但是，您可以在資產上查看文檔頁面，甚至可以查看有關如何確保匿名用戶可以從頁面上加載的jQuery中受益的本文。而且，如果您想查看我們提前編寫的代碼，則可以在演示模塊中的此存儲庫中找到它。

鑰匙要點

• Drupal 8 Core現在包括視圖，Twig是新的模板引擎。視圖插件（顯示，樣式，行和字段）為覆蓋視圖模板提供了強大的替代方案，本指南說明瞭如何為Drupal 8中的視圖創建自定義樣式插件。這將用於實現選項卡式輸出，以用於使用視圖結果。 Bootstrap選項卡標記。
• 的創建自定義樣式插件涉及在模塊的插件/視圖/樣式文件夾中構建插件類。該類從樣式Pluginbase類延伸，並包括@viewSstyle註釋，該註釋定義了插件的ID，標題，幫助文本，主題和顯示類型。樣式插件負責渲染清單，可以由大多數顯示類型使用。
創建自定義樣式插件的最後一部分涉及定義主題功能並創建樹枝模板文件。在.module文件中定義的主題函數將$ view對象和結果$行傳遞給模板。 TWIG模板文件控制插件的輸出的渲染方式。創建自定義樣式插件後，可以通過Drupal Admin接口啟用它，並通過從格式設置中選擇它。
什麼是樣式插件？

視圖樣式插件是負責渲染 listing

的插件。核心樣式插件的顯著示例是

>未形式的列表， html list ， table> table or grid 。它們由顯示插件使用，然後使用代表列表中一個項目的行插件。 > 在Drupal 8中，所有視圖插件類型均使用新插件系統構建，並共享一些共同的功能（它們始終從相同的視圖插件延伸）。 >現在，讓我們創建自己的這種樣式插件，大多數顯示類型（頁面，塊等）可以使用，並使用字段行插件。

bootstrap tabs樣式插件

的第一步是創建位於模塊的插件/視圖/樣式文件夾中的插件類：

> Drupal插件類型我們正在創建一個IS ViewStyle實例，並在註釋中傳遞了一些基本配置。撇開明顯的內容，我們有值得一提的主題和display_types鍵。第一個聲明該樣式插件將用於渲染數據的主題功能，而第二個則聲明了哪種顯示插件可以使用該樣式的樣式（在我們的情況下，所有顯示類型否則沒有指定自定義類型：正常類型）。有關此插件類型的所有可用註釋配置的更多信息，請查看drupalviewsannotationviewsstyle註釋類。

>

使用兩個類屬性，我們聲明我們的樣式使用行插件，但不允許分組。確保您查看父級課程，以了解有關可以指定其他選項的更多信息。例如，我們正在擴展的類已經聲明，可以將視圖字段與樣式插件一起使用。

>

>如前所述，使用兩種方法，我們創建一個插件選項並表單元素，以便能夠指定哪個字段應充當標籤導航。使用當前的顯示處理程序（$ this-> DisplayHandler），我們可以加載網站構建器已添加的所有可用視圖字段。這個新的表單元素將在樣式設置表單上可用：

>由於我們從樣式Pluginbase類延伸，因此無需做任何其他事情。對於標記輸出，我們可以依靠Demo_bootstrap_tabs主題，該主題從執行視圖接收相關變量。如果需要的話，我們可以覆蓋任何渲染方法，並添加更多變量，更改主題或我們需要的任何內容。我們對默認值良好，尤其是因為我們將實施預處理器來處理模板收到的變量。

。

主題

是時候定義demo_bootstrap_tabs主題（在.module文件中）：

>

<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>

樣式插件將$ view對象和結果$行傳遞到模板。在將這些變量發送到模板之前，由預處理器進行一些處理（如果需要的話）：

<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>

>那麼這裡發生了什麼？首先，我們檢查使用要使用的字段名稱的樣式插件選項（配置視圖時選擇的字段名稱）。如果一個人不存在，我們會返回，但是在進行一些默認的預處理之前，請勿將Template_preProcess_views_views_view_unformatted函數的功能做得很好。所以我們委派了它。然後，我們循環瀏覽視圖結果，並為我們的標籤導航構建一系列內容。為此，我們使用默認視圖views_view_field主題函數來渲染所選字段。最後，我們將此數組傳遞到模板，還運行了未形式的列表樣式的默認預處理器。

模板

在Drupal 8中，沒有更多的主題功能，現在在樹枝模板中處理了一切。因此，讓我們看看Demo-Bootstrap-tabs.html.twig文件在我們的模塊的模板文件夾中看起來像：

：

如您所見，這是Bootstrap選項卡的必要標記。當然，它不會工作，而不確保首先將相關的引導樣式和腳本加載到您的主題中。

<span>/**
</span><span> * Prepares variables for views demo_bootstrap_tabs template.
</span><span> *
</span><span> * Template: demo-bootstrap-tabs.html.twig.
</span><span> *
</span><span> * <span>@param <span>array</span> $variables
</span></span><span> *   An associative array containing:
</span><span> *   - view: The view object.
</span><span> *   - rows: An array of row items. Each row is an array of content.
</span><span> */
</span><span>function template_preprocess_demo_bootstrap_tabs(&$variables) {
</span>  <span>$view = $variables['view'];
</span>  <span>$rows = $variables['rows'];
</span>  <span>$variables['nav'] = array();
</span>
  <span>// Prepare the tab navigation.
</span>  <span>$field = $view->style_plugin->options['tab_nav_field'];
</span>  <span>if (!$field || !isset($view->field[$field])) {
</span>    <span>template_preprocess_views_view_unformatted($variables);
</span>    <span>return;
</span>  <span>}
</span>
  <span>$nav = array();
</span>  <span>foreach ($rows as $id => $row) {
</span>    <span>$nav[$id] = array(
</span>      <span>'#theme' => 'views_view_field',
</span>      <span>'#view' => $view,
</span>      <span>'#field' => $view->field[$field],
</span>      <span>'#row' => $row['#row'],
</span>    <span>);
</span>  <span>}
</span>
  <span>template_preprocess_views_view_unformatted($variables);
</span>  <span>$variables['nav'] = $nav;
</span><span>}
</span>

>

>我們渲染的第一件事是標籤導航項目（來自我們的NAV變量）。在循環瀏覽此數組時，我們還利用循環索引值，以默認第一個項目為活動，並能夠使用唯一的ID來定位下面的選項卡內容窗格。對於項目的實際價值，我們只需打印我們在預處理器和Drupal中創建的渲染陣列就可以解決渲染。話雖如此，確保您在這裡使用的字段相對較短，而沒有鏈接和平淡的標記，這可能是一個好主意。標題可能會很好。但這是相應地配置視圖的問題。

在導航下方，我們使用相同的循環索引打印實際的視圖行，將第一行默認為“活動”選項卡窗格並唯一識別它們，以便上述導航可以控制其可見性。至於內容，我們打印整個行。 CONTENT變量（在template_preprocess_views_view_unformatted內部準備），其中包含我們視圖中的所有字段。而且，如果我們要

>不包括我們用於導航的字段，則可以將其從視圖配置中的顯示中排除。它仍將出現在導航中（因為我們明確將其在此處打印），但不在主塔窗格中。 。 結論

>我們有它。視圖樣式插件以輸出視圖結果作為bootstrap選項卡。我們現在所需要的只是確保已加載Bootstrap資產，並只需配置我們的視圖以使用新樣式插件即可。請記住，這並不是要用於有很多結果的視圖，它僅作為演示如何創建樣式插件的示例。

如果您有疑問，評論或建議，請在下面留下！

>

在Drupal 8

中經常詢問有關主題視圖的問題

>如何在Drupal 8中創建自定義樣式插件？首先，如果您還沒有一個新模塊，則需要創建一個新的模塊。然後，在模塊的SRC/插件/視圖/樣式目錄中，為您的自定義樣式插件創建PHP文件。該文件應包含擴展stylepluginbase類的類，並包含@viewSstyle註釋。註釋為您的插件定義ID，標題和幫助文本。定義了課程中必要的方法後，您可以通過Drupal Admin接口啟用新樣式插件。

>

>自定義樣式插件的關鍵組件是什麼？ Drupal 8通常由三個關鍵組件組成：插件定義，插件類和模板文件。插件定義是通過@ViewSstyle註釋提供的，並包括插件的ID，標題和幫助文本。插件類擴展了樣式Pluginbase類，並定義了控制插件表現的方法。模板文件是一個小樹枝文件，可以控制插件的輸出的渲染方式。

>如何覆蓋Drupal 8中的默認視圖模板？文件的名稱應遵循模式視圖視圖 - [view-name] - [display-id] .html.twig。在此文件中，您可以定義應用來呈現視圖的HTML標記和TWIG代碼。創建文件後，清除Drupal Cache以查看您的更改。

>如何將變量添加到drupal 8？

>>

中的視圖模板中，將變量添加到Drupal 8中的視圖模板中可以通過主題的.Theme文件中的預處理函數完成。該函數應遵循模式them_name_preprocess_views_views_view_view_view_name__display_id，它應該採用一個參數，這是一個變量數組。您可以在此數組中添加新變量，並且它們將在您的樹枝模板中可用。

>我如何在Drupal 8中使用帶有視圖的自定義樣式插件？在Drupal 8中創建了自定義樣式插件，您可以通過Drupal Admin接口將其與視圖一起使用。編輯視圖，然後轉到格式部分。單擊格式設置，然後從列表中選擇您的自定義樣式插件。保存視圖後，它將使用您的自定義樣式插件進行渲染。

>在自定義樣式插件中render（）方法的目的是什麼？ Drupal 8中的自定義樣式插件負責呈現視圖。它採用一排行作為輸入，並返回渲染數組。渲染陣列應包括#theme鍵，該鍵指定要使用的樹枝模板，以及應將任何變量傳遞給模板。

>如何調試Drupal 8中的視圖模板？ Drupal 8中的視圖模板可以使用TWIG調試功能完成。通過將調試選項設置為true，在您的services.yml文件中啟用twig調試。然後，當您查看使用模板的頁面時，您將在HTML源代碼中看到註釋，這些源代碼顯示了使用了哪些模板文件，並建議您可以使用這些模板文件名稱來覆蓋它們。

>我在Drupal 8中的視圖模板中使用條件邏輯，可以使用Twig的If語句實現Drupal 8中的視圖模板中的條件邏輯。在您的樹枝代碼中，您可以使用IF關鍵字來測試條件，然後根據條件是對還是錯誤。 8？

>可以通過Drupal Admin界面在Drupal 8中的視圖中自定義Pager。編輯視圖，然後轉到Pager部分。在這裡，您可以選擇要使用的尋呼機的類型，設置每個頁面顯示的項目數，並配置其他Pager設置。

>

>如何在Drupal 8中創建響應式視圖？

>在Drupal 8中創建響應視圖涉及在您的視圖模板中使用響應設計技術。這可能包括使用CSS媒體查詢在不同的屏幕尺寸下調整視圖的佈局和外觀，以及使用寬度和高度的柔性單元，而不是固定單元，而不是像像素等固定單元。

以上是Drupal 8中的主題視圖 - 自定義樣式插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！