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

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

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

 
Cấu hình Host-Only Networking với VirtualBox

Cấu hình Host-Only Networking với VirtualBox

I’ve been playing around with VirtualBox lately, and it’s pretty nifty. Initially I just used it to set up an Ubuntu machine so I could easily run GnuCash on my MacBook, but lately I’ve decided to start using it at work, too.

Yellow Pages, the Internet, and Browsers

Yellow Pages, the Internet, and Browsers

Some people might say that the yellow pages are the original business data base. Researchers of business history find these time capsules buried in such places as Baker Library at the Harvard Business School. They are a fascinating snapshot of what people once bought and sold.

Video độ nét cao quay bằng iPad mới

Video độ nét cao quay bằng iPad mới

Cùng thưởng thức đoạn video độ nét cao quay bằng camera iSight 5 megapixel ở mặt sau iPad thế hệ mới.