访问 Drupal 8 视图模板中的各个字段

Question

我在做一些我认为应该是相对简单的 drupal 8 视图的事情时遇到了麻烦。

我有一个名为“国家/地区”的内容类型。我想在我的主页上的视图块中显示 3 个最新的国家节点。每个国家/地区都在容器 div 上显示为“views-row”类。我正在使用views--view--unformatted--countries--block_1.tpl 来模板化输出。

我想输出如下标记：

<a class="view-row-1" href="/link/to/node">
    <img src="source-of-teaser-image.png">
    <h3>Title of node</h3>
</a>

<a class="view-row-2" href="/link/to/node">
    <img src="source-of-teaser-image.png">
    <h3>Title of node</h3>
</a>

<a class="view-row-3" href="/link/to/node">
    <img src="source-of-teaser-image.png">
    <h3>Title of node</h3>
</a>

我遇到的问题是访问模板中的各个字段。如果我使用查看模式，我可以访问各个字段。如果我在视图中选择“显示字段”，我可以为“视图结果计数器”和“路径”添加一个字段，这将允许我添加“view-row-N”类并将 a 标签链接到节点，但我无法单独访问这些字段。我有 {{row.content}} 变量，但任何进一步挖掘变量的尝试（例如 row.content.field_name）都没有给我任何结果，并且调用 {{dump(row.content)}} 会使网站崩溃。

我无法将其输出为视图模式，原因有两个。我无法在视图模式下访问“查看结果计数器”或“路径”字段，即使我有这些变量，某些字段也会嵌套在其他字段中（图像和标题嵌套在 中）

我觉得这真的应该这么简单

<a class="view-row-{{ row.content.view_result_counter }}" href="{{ row.content.path }}">

等等，但我已经尝试了我能想到的一切。我完全走错了路吗？到目前为止，我和 Twig 相处得并不融洽……

Answer 1

使用内容/视图模式适用于您的情况。

1/ 在“views-view-unformatted.html.twig”中，您可以在“for”循环中使用“loop.index”来获取当前行的索引并将其添加到“row_classes”变量中。

2/在节点的树枝模板中，您可以使用类似的东西：

<a href="{{ path('entity.node.canonical', {'node': node.id}) }}">
    {{ content.field_img }}
    {{ node.getTitle()}}
</a>

3/您可能会获得额外的 html，但您可以通过覆盖相关模板来摆脱其中的大部分。

Answer 2

我不确定这是否是您所期望的，但您可以覆盖字段模板：

1. 启用 Twig 调试：https://www.drupal.org/node/1903374
2. 在浏览器中检查您的页面（如果站点处于调试模式，则 html 中有 cmets 以及每个元素的模板路径）。 例如，这是字段模板：core/themes/stable/templates/views/views-view-fields.html.twig
3. 将所需模板复制到您的主题文件夹中
4. 添加或修改标记。

您可以使用{{ dump(variable) }} 或{{ kint(variable) }} 调试模板

Answer 3

我想出了一个使用 kint 的方法。

在您的 views-view-unformatted.html.twig 中使用以下代码显示您的各个字段：

{% for row in rows %}

{{ row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ YOUR_FIELD_NAME }}'] }}

{% endfor %}

Answer 4

在您的情况下，您应该使用 views-view-fields--countries--block_1.html.twig 而不是 views-view-unformatted--countries--block_1.html。树枝文件。

视图字段模板将迭代所有结果行。您的 views-view-fields--countries--block_1.html.twig 应包含以下代码 -

<div>
  <a class="view-row" href="{{variable-to-print-path }}">
   <img src="{{ image-path }}">
   <h3>{{ fields.title.content</h3>
  </a>
</div>

您可以使用 kint 函数检查字段数组 - {{ kint(fields) }}

从 kint 函数的输出中检查图像路径和锚点路径变量。

如果您想在 views-view-unformatted--countries--block_1.html 中执行此操作。 twig，然后您可以访问如下所示的字段值 -

{% for row in rows %}
  {% set photo = file_url(row['content']['#row']._entity.field_page_photo.entity.fileuri) %}          
  <li><img src={{ photo }} class="img-responsive img-circle"></li>
{% endfor %}

Answer 5

解决方案很简单，使用视图字段模板。

我在主题/模板文件夹下创建了一个新模板：

views-view-fields--VIEW-NAME.html.twig

现在您可以像这样访问您的字段值：

{{ fields.field_NAME.content }}

Answer 6

如果您想访问 Views Twig 模板中的各个字段以及行信息， 在您的自定义主题中覆盖视图字段模板：

views-view-fields--VIEW-NAME.html.twig

要获取同一文件中的行索引，请使用：

{{ row.index }}