在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和我到目前为止并不合拍...

- Kaizen9001

Answer 1

我已想出一种使用kint的方法。

在你的views-view-unformatted.html.twig内部，使用以下代码显示你的单个字段：

{% for row in rows %}

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

{% endfor %}

- Ibrahim Samir

---

+1 赞同此答案和问题 - 此答案（和问题）可以帮助那些需要在视图结果行/字段中输出标记（例如 <script>）/ js 的人 - 这些被过滤掉是出于“安全原因”。但是，一些明智的人已经争论（在我看来），只有授权管理员才能首先管理视图！请参见 https://www.drupal.org/project/views/issues/853880 https://www.drupal.org/project/views/issues/417956 和 https://www.drupal.org/forum/support/post-installation/2009-10-16/using-views-field-rewrite-to-include-javascript 再次感谢。 - therobyouknow

@ibrahim-samir 这段代码中，我们如何获取URL而不是整个样式渲染呢？在这段代码中，我想要获取 field_slack_team_link 字段的值，它位于 <a href="[link]" target=""><img src="sites/default/files/2023-08/slack.png" alt="values" class="box-image" /></a> 中。 - Harikris

@Kaizen9001 如何在使用此代码时获取URL而不是整个样式渲染？在这段代码中，我想要获取字段 field_slack_team_link 的值，即 <a href="[link]" target=""><img src="sites/default/files/2023-08/slack.png" alt="values" class="box-image" /></a> 中的值。 - undefined

Answer 2

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

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

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

- fadehelix

Answer 3

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

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

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

{{ row.index }}

- Heena Suman

Answer 4

在您的情况下，使用内容/视图模式是有效的。

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

2/ 在节点的twig模板中，您可以使用类似以下的代码：

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

3/你可能会得到额外的HTML代码，但是你可以通过覆盖相关的模板来摆脱大部分不需要的代码。

- progzy

Answer 5

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

Views字段模板将迭代结果的所有行。 您的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 %}

- Renuka Kulkarni

Answer 6

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

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

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

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

{{ fields.field_NAME.content }}

- Viswa

Answer 7

获取媒体图片的URL

{{ file_url(row.content['#row']._entity.field_media_image.entity.field_media_image.entity.uri.value) }}

标题

{{ row.content['#row']._entity.title[0].value }}

正文（截断140个字符，删除HTML标签）

{{ row.content['#row']._entity.body[0].value|striptags|truncate(140, true, '...')|raw|nl2br }}

在视图模板中的URL节点

{{ path('entity.node.canonical', { 'node': row.content['#row']._entity.nid[0].value } ) }}

- Nikola