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.

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:1

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).

http://redcrackle.com/blog/drupal-8/theme-views-templates
- 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.twig2
[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.twig3

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
1 2 3 4 5 6 7 8 9 10 11 12 13 14	`<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
1 2 3 4 5 6 7 8 9 10 11 12	`<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

Services:

Mobile Theming