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中文网其他相关文章！