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