Drupal 8 主题开发-在Twig模板中添加class

Drupal 8的自带classy模板已经考虑了建站时的各种操作场景对class属性的定义，如果不是真的要完全自定义主题，一般建议参考classy主题，不随意删除已经存在的attributes的class，但可以自己添加新的class。例如，如果想让不同的Content Type(内容类型)使用不同的背景色，则需要使用CSS选择器识别每种内容类型。默认情况下，节点node模板为每种内容类型都创建了一个class，我们只需要直接使用css选择器选择这个class,并为其设置样式表即可。

添加单个class

单个添加，只需要将class名称作为参数传递给函数attributes.addClass() 即可

<div {{ attributes.addClass('class-name') }}>
...
</div>
{# 这个addClasss可以连写 #}
{{ attributes.addClass('class-name1').addClass('class-name') }}

添加多个class，只需要在模板中set一个包含所有class名称的数组。

{%
  set classes = [
    'content',
    'node',
    'my-classname',
  ]
 %}

然后将数组通过addClass() 函数添加到attributes

<div {{ attributes.addClass(classes) }}>
...
</div>

如果不想创数组，也是可以偷懒的

{{ ttributes.addClass(array_classes, ['class-name-1', 'class-name-2']) }}
{# 或者这样 #}
{{ attributes.addClass(array_classes, 'class-name-1', 'class-name-2') }}

这将合并现有和新添加的classname到标签中。

移除class

如果需要移除class,可以使用attributes.removeClass() 函数

<div {{ attributes.addClass(classes).removeClass('class-name') }}>
...
</div>

系统样例

region模板

打开core主题classy模板core\themes\classy\templates\layout\region.html.twig, 该模板set了一个class数组

{%
  set classes = [
    'region',
    'region-' ~ region|clean_class,
  ]
%}

这里面第一个class名称regin比较好理解，第二个需要注意，我们分解说明一下

'region-' ~ region|clean_class,

'region-': 最终拼接到结果字符串中的前段
~ : 字符串连接符
region: region变量. 将会被实际的region名称替换掉
|: 管道符前面的内容将会被后面的过滤器规则过滤
clean_class: 通用的移除非法字符的过滤器
如果在header region中有block, 上面这行代码将最终输出为 region-header

<div class="region region-header">

node模板

打开core主题classy模板core\themes\classy\templates\content\node.html.twig

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}

注意第二行class

'node--type-' ~ node.bundle|clean_class,

Content Type内容类型是bundle的一种,所以这里会返回内容类型的机器名，如果当前node阶段是Article内容类型，则返回名称为'node--type-article'。

第三行则是根据当前 node节点是否设置首页推荐来决定是否输出后面的样式，第四行则是根据是否置顶来显示后面的样式，第六行则根据view mode如teaser来拼接

node.isPromoted() ? 'node--promoted',

classy内核自带主题，没有掺杂一些不必要的东西，但是一些比较通用的设置该有的都有了。还有一个stable主题，则什么样式都没有，纯输出。主题开发的时候应该多看看这两个主题的样例。

参考：

https://twig.symfony.com/doc/3.x/coding_standards.html