Drupal 8中的主题视图 - 自定义样式插件-php教程-PHP中文网

首页

后端开发

php教程

Drupal 8中的主题视图 - 自定义样式插件

Christopher Nolan

Feb 15, 2025 pm 12:02 PM

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，标题，帮助文本，主题和显示类型。样式插件负责渲染清单，可以由大多数显示类型使用。

视图样式插件是负责渲染 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源代码中看到注释，这些源代码显示了使用了哪些模板文件，并建议您可以使用这些模板文件名称来覆盖它们。