Hướng dân overriding default templates trong Drupal 8

Hướng dân overriding default templates trong Drupal 8

In this post, you will learn how to theme Drupal 8 views by overriding default views templates and use our own markup to build an accordion (based on bootstrap 3 accordion). We will begin by identifying a custom theme for our newly installed Drupal 8 site and add bootstrap 3 css and javascript files.

>> Docker làm virtualization cho Project Development và Testing trong Drupal

>> Những lý do tại sao sử dụng Panels trong Drupal CMS

This is all we need to create a new theme.

├── demotheme.info.yml
├── demotheme.libraries.yml
├── css
│   ├── bootstrap-theme.min.css
│   └── bootstrap.min.css
└── js
    └── bootstrap.min.js

Then we will create a new view from "admin/structure/views/add" to show latest added articles.

  • View basic information: We will name our view "Articles Accordion" (machine name: "articles_accordion").
  • View settings: Choose (Show: Content), (of type: Article) and (sorted by: Newly first).
  • Page settings: Check "Create a page" and set "Page title" and "Path" to your liking. Under "Page display settings" choose (Display format: Unformatted list), (of: fields).
  • Click "Save and edit"

Here is a screenshot for our view initial settings:

screenshot

After saving the view we will click on "Content: Title" and uncheck "Link to the Content", then add the "Body" field.

Here is a screenshot for the view final settings:

screenshot

Understanding Views Templates

Views default templates are located under "/core/modules/views/templates/" folder.

Each view uses minimum of two templates:

  • The first template is "views-view.html.twig". This template is used for all views and contains the layout for the view. (view content, header, footer, exposed form and attachments)
  • The second template is the style template. The default used template will vary based on the applied view style (grid, table, html list or unformatted).
    • Grid: views-view-grid.html.twig
    • Table: views-view-table.html.twig
    • HTML List: views-view-list.html.twig
    • Unformatted: views-view-unformatted.html.twig
  • The third template is "views-view-fields.html.twig". This template is used only if the view row style is set to "Fields". This template is responsible for looping through available fields and print fields wrappers, labels and markup.
  • The fourth template is "views-view-field.html.twig". This template is used only if the view row style is set to "Fields". This is the last template and is responsible for printing each field markup.

Naming Views Templates

Each type of the view templates above can be overridden with a variety of names. The template name is a concatenation of (base template name, view machine name, view display type and view display id - separated by 2 hyphens "--").

The following are the possible template names sorted by precedence:

  • [base template name]--[view machine name]--[view display id].html.twig
  • [base template name]--[view machine name]--[view display type].html.twig
  • [base template name]--[view display type].html.twig
  • [base template name]--[view machine name].html.twig
  • [base template name].html.twig

For example; If we want to override "views-view.html.twig" template for our view, the following template names are valid:

  • [base template name]--[view machine name].html.twig
  • views-view--articles-accordion--page.html.twig
  • views-view--page.html.twig
  • views-view--articles-accordion.html.twig
  • views-view.html.twig

Building Our Bootstrap Accordion

To build our version of bootstrap accordion, we will need to override "views-view-unformatted.html.twig" (because this is the style in use) and "views-view-fields.html.twig".

The easiest way to get started is to copy the templates from /core/modules/views/templates folder into our theme folder and then rename "views-view-unformatted.html.twig" to "views-view-unformatted--articles-accordion--page-1.html.twig" and "views-view-fields.html.twig" to "views-view-fields--articles-accordion--page.html.twig"

views-view-unformatted--articles-accordion--page-1.html.twig

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    {% for row in rows %}

        {%

            set row_classes = [

                default_row_class ? 'views-row',

                'panel',

                'panel-default',

            ]

        %}

        <div {{="" row.attributes.addclass(row_classes)="" }}="">

            {{ row.content }}

        </div>

    {% endfor %}

</div>

views-view-fields--articles-accordion--page.html.twig

<div class="panel-heading" role="tab" id="heading-{{ row.index }}">

    <h4 class="panel-title">

        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ row.index }}" aria-controls="collapse-{{ row.index }}" aria-expanded="true">

            {{ fields.title.content }}

        </a>

    </h4>

</div>

<div id="collapse-{{ row.index }}" aria-labelledby="heading-{{ row.index }}" class="panel-collapse collapse {% if row.index==0 %}in{% endif %}" role="tabpanel">

    <div class="panel-body">

        {{ fields.body.content }}

    </div>

</div>
 

This is how how our accordion looks like.

screenshot

 
Bạn thấy bài viết này như thế nào?: 
Average: 5 (1 vote)
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
iCloud Apple ID Security Flaw Plaguing Some Users

iCloud Apple ID Security Flaw Plaguing Some Users

One of iOS 5′s marquee features is the ability to backup and restore devices from iCloud without the need for iTunes or any of those pesky wires.

Khoá học PBN có lượng học viên toàn các siêu cao thủ SEO, MMO

Khoá học PBN có lượng học viên toàn các siêu cao thủ SEO, MMO

Khoá học có lượng học viên toàn các siêu cao thủ SEO, MMO

Targeted content để focused vào thông tin user giúp sales products

Targeted content để focused vào thông tin user giúp sales products

Most, if not all, large ecommerce sites have some form of targeted content implemented to make the site more relevant to its visitors.

Công ty diệt chuột T&C

 

Diet con trung