drupal8视图区块css类分析

在twig打开的情况下查看设置的视图区块block.html.twig

• 最外层是 block

    <div class="views-element-container" id="block-views-block-banner-logo-block-1">

•  里面是container

    <div>

• 在里面是views_view
  • <div class="hero--lead hero__lead contextual-region js-view-dom-id-023ce415cad7f8732d95cf9203d1639bb4ff569a93eb79a16e229155e52429f8">
    • CSS类： 无
• views_view_unformatted
  • <div class="a1">

  • 格式

    格式： 没有格式化的列表 | 设置
    • 分组1号字段 可以按字段分组
    • 行类（class） 可以添加自己的css类
    • 添加视图的行类   将缺省行类（如 views-row）添加到输出中
• views_view_fields
  • 显示： 字段 | 设置
  • <div class="views-field views-field-field-bannertupian"><div class="field-content">

  • 字段

    • 内容: banner图片  也可点击字段设置

views_view_field

image_formatter

image

<img src="/sites/default/files/2021-06/hero-bg.png" alt="" typeof="foaf:Image" width="683" height="599">

 

 

 

<div class="views-element-container contextual-region" id="block-views-block-banner-logo-block-1">
    <div data-contextual-id="block:block=views_block__banner_logo_block_1:langcode=zh-hans|entity.view.edit_form:view=banner_logo:location=block&amp;name=banner_logo&amp;display_id=block_1&amp;langcode=zh-hans" data-contextual-token="OgCDZ-WzySKX7hhmkdRX-ldNWll8XO73WGYUnmcIQ5Y" class="contextual"><button class="trigger visually-hidden focusable" type="button" aria-pressed="false">开放  配置选项</button>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'links__contextual' -->
<!-- FILE NAME SUGGESTIONS:
   * links--contextual.html.twig
   x links.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->
<ul class="contextual-links" hidden=""><li class="block-configure"><a href="/admin/structure/block/manage/views_block__banner_logo_block_1?destination=/node">配置区块</a></li><li class="entityviewedit-form"><a href="/admin/structure/views/view/banner_logo/edit/block_1?destination=/node">编辑视图</a></li></ul>
<!-- END OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->

</div>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'container' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/form/container.html.twig' -->
<div>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view.html.twig' -->
<div class="hero--lead hero__lead contextual-region js-view-dom-id-023ce415cad7f8732d95cf9203d1639bb4ff569a93eb79a16e229155e52429f8">
  <div data-contextual-id="entity.view.edit_form:view=banner_logo:location=block&amp;name=banner_logo&amp;display_id=block_1&amp;langcode=zh-hans" data-contextual-token="4H7dn6y6JWE58A9lGvhve5i42fwX5IyrYtHG-0xVZLk" class="contextual"><button class="trigger visually-hidden focusable" type="button" aria-pressed="false">开放  配置选项</button>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'links__contextual' -->
<!-- FILE NAME SUGGESTIONS:
   * links--contextual.html.twig
   x links.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->
<ul class="contextual-links" hidden=""><li class="entityviewedit-form"><a href="/admin/structure/views/view/banner_logo/edit/block_1?destination=/node">编辑视图</a></li></ul>
<!-- END OUTPUT from 'core/themes/stable/templates/navigation/links.html.twig' -->

</div>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_unformatted' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-unformatted.html.twig' -->
    <div class="a1">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_fields' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-fields.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_field' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->
<img src="/sites/default/files/2021-06/hero-bg.png" alt="" typeof="foaf:Image" width="683" height="599">

<!-- END OUTPUT from 'core/themes/stable/templates/field/image.html.twig' -->

<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->
<!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
<!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-fields.html.twig' -->

</div>

<!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-unformatted.html.twig' -->
</div>

<!-- END OUTPUT from 'core/themes/stable/templates/views/views-view.html.twig' -->

</div>

<!-- END OUTPUT from 'core/themes/stable/templates/form/container.html.twig' -->
  </div>