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 Tran 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
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: asaleotestf@gmail.com
  • Telegram Messenger: https:/t.me/tommytran0401

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

 
Hướng dẫn hiển thị profile G+ trên kết quả tìm kiếm

Hướng dẫn hiển thị profile G+ trên kết quả tìm kiếm

Trước đây, khi Google chưa cho phép dùng profile G+ làm hình ảnh đại diện trên kết quả search, mọi người thường dùng Rich Snippets để làm hiển thị hình ảnh, logo trên kết quả tìm kiếm. Rất đơn giản, chỉ cần chèn vào website đoạn code sau :

Window, Window 7, Mac iOS 6, Mac OS, MacBook Air, MacBook Pro

Hướng dẫn thiết lập mạng riêng ảo (VPN) của riêng bạn trên Windows và Mac

Mạng riêng ảo (hay Virtual Private Network) là một mạng thường dành riêng để kết nối các máy tính trong nhà hay trong một tổ chức với nhau thông qua Internet

Hướng dẫn chính cho Drupal 8: Episode 2 - Mobile Improvements

Hướng dẫn chính cho Drupal 8: Episode 2 - Mobile Improvements

Successive posts will gradually get more technical, so feel free to skip to later parts (once they're published) if you're more on the geeky side.