使用字段值作为Twig属性

我需要在页面模板中将字段值设置为CSS类。我该怎么做？

{{attributes.addClass('class-name')}} 是手动设置类的方法。

我有一个列表字段，可让用户为网站的一部分设置背景色。在Drupal 7中，我使用了此代码。

<div class="<?php print render($content['field_background']); ?>">

在Drupal 8中，我可以使用打印字段{{ content.field_background }}，但是<div class="{{ content.field_background }}">不起作用。

这可以通过几种方式完成，您可以使用Twig在节点模板中完成全部操作，也可以创建预处理功能并创建变量以供在节点模板中使用。了解数组中内容的关键是使用Devel Kint。否则，您将不知道数组中的内容。

首先安装Drupal 8的Devel模块随附的Kint，然后选择您的节点模板（但这可以在任何类型的模板中完成）并像这样检查content变量（最好在模板的底部）。

{{ kint (content) }}

由此，我们将在页面上打印调试信息，并且如果您扩展数组，您将看到大量信息。马上，我看到了我的背景值，可以构造一条路径将其打印为

{{ content.field_background[0]['#markup'] }}

现在，您可以将其打印为div中的背景样式或类

<div style="background-color: {{ '#' }}{{ content.field_background[0]['#markup'] }};" class="color-{{ content.field_background[0]['#markup'] }}">
<h2>Hello</h2>
</div>

我已经对此进行了测试，并且效果很好，div渲染了我在节点编辑的字段列表中选择的背景色。

现在这并不理想，因此我们可能希望在主题的.theme文件的preprocess_node中为此创建一个变量。

function MYTHEME_preprocess_node(&$vars) {
  $vars['bgcolor'] = '#' . $vars['content']['field_background'][0]['#markup'];
}

现在，我已经创建了一个var，将其打印出来要干净得多：

 <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>

上面的一个注释，您可能应该用if语句包装它，以检查它是否为空。

这将在您喜欢的地方工作或构建if语句

   {% if bgcolor %}
    <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>
    {% endif %}

在节点模板中，字段位于中{{ content }}。在页面模板中，没有content变量，而是有一个包含region的页面变量{{ page.region }}。

由于您询问的是页面模板，因此我们无法使用content。

但是您可以在两个模板中使用{{node}}。当页面显示节点时，节点对象始终位于节点模板和页面模板中。

因此，这应该在两个模板中均有效：

<div class="{{ node.field_background.value|clean_class }}">