上海戴文 - Drupal开发 在线教育

你在这里

没有了semantic_views模块的Drupal 8 如何向views中的不同行添加不同的类,来制作响应式网站

主标签

drupal 7中可以用semantic views模块向views中的不同行添加不同的类,但是Drupal 8 没有这模块,怎么搞,只能复写对应的模板,

这里设定你的views机器名是myviews,用的格式是:没有格式化的列表

现在来复写views-view-unformatted.html.twig模块,Drupal 8 开启模板建议并不会给出views模板的建议,这应该是一个缺陷,将其从core/views/templatefs中复制出来,粘贴到你的主题的templates中

下面是原始代码

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
{% endfor %}

一开始我还四处搜寻如何修改这个模板,整个互联网都搜不到,最后我仔细看了一下,原来是因为修改太简单了,所以没其他人写出来,twig其实和其他编程函数一样,有数组,循环之类

直接把循环那一段注释掉,然后一个一个编辑rows数组中的每一行

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}

<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[0].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[1].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[2].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[3].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[4].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[5].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[6].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[7].content }}
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
    {{ rows[8].content }}
</div>



{#{% for row in rows %}#}
{#{%#}
{#set row_classes = [#}
{#default_row_class ? 'views-row',#}
{#]#}
{#%}#}

{#<div{{ row.attributes.addClass(row_classes) }}>#}
    {#{{ row.content }}#}
{#</div>#}
{#{% endfor %}#}

你的views定义了显示几行,你就写几行,是不是特别简单

 

tags: 
Drupal 版本: 

猜你喜欢