首頁 >後端開發 >php教程 >Drupal 8中的主題視圖 - 自定義樣式插件

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

Christopher Nolan原創: 2025-02-15 12:02:12350瀏覽

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

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

鑰匙要點

Drupal 8 Core現在包括視圖，Twig是新的模板引擎。視圖插件（顯示，樣式，行和字段）為覆蓋視圖模板提供了強大的替代方案，本指南說明瞭如何為Drupal 8中的視圖創建自定義樣式插件。這將用於實現選項卡式輸出，以用於使用視圖結果。 Bootstrap選項卡標記。
的創建自定義樣式插件涉及在模塊的插件/視圖/樣式文件夾中構建插件類。該類從樣式Pluginbase類延伸，並包括@viewSstyle註釋，該註釋定義了插件的ID，標題，幫助文本，主題和顯示類型。樣式插件負責渲染清單，可以由大多數顯示類型使用。

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

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

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

bootstrap tabs樣式插件

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

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

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

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

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

>由於我們從樣式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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用Laravel Spark創辦業務下一篇：用Laravel Spark創辦業務

看更多