Mikhail Ismajlov 09/09/2019

We have already seen that in the 8th Drupal we have Twig built in and how to use it. In this article, we will discuss how to work with Drupal templates, what templates are in the Stable theme, how to redefine Stable templates, and how to redefine templates of various Drupal entities.

So, let's start with the Stable theme templates, go to the templates folder of the Stable theme:

templates in Drupal 8

Templates are broken down according to functional attribute:

/core/themes/stable/templates/admin - templates for Views UI, pages and administration items, message and report templates.
/core/themes/stable/templates/block - block templates.
/core/themes/stable/templates/content - templates for a node, comment, taxonomy term, rss element, search results.
/core/themes/stable/templates/content-edit - templates for filters and editing forms.
/core/themes/stable/templates/dataset - forum templates, rss channels, tables, list ul.
/core/themes/stable/templates/field - field templates of different types.
/core/themes/stable/templates/form - templates of form elements (fields of various types).
/core/themes/stable/templates/layout - templates for the structure of the page.html.twig page, regions, the main html.html.twig template - where all other templates are embedded.
/core/themes/stable/templates/misc - templates for RSS, RDF markup icons, Drupal messages, bar progress.
/core/themes/stable/templates/navigation - templates for menus, books (book module), pager, toolbar, vertical tabs, breadcrumbs.
/core/themes/stable/templates/user - templates for the user’s page, username, signature by whom the forum post was posted.
/core/themes/stable/templates/views - templates of various elements of the Views module.

As you can see, the Stable theme provides a wide range of template to temize. In order to redefine these templates, you just need to copy the necessary template to your subtopic and change it there as you like. You can copy all the templates, but I advise you to copy the templates to a subtopic as necessary.

Overriding templates for content (template suggestions)

You can redefine not only existing templates, but add your own templates for individual nodes, taxonomy terms, blocks, etc. Here are some examples of template overrides.

HTML template

An HTML template includes the basic structure of an HTML page.

Main template: html.html.twig (base location: core/modules/system/templates/html.html.twig)

The following examples show how to override this template:

  1. html--internalviewpath.html.twig
  2. html--node--id.html.twig
  3. html.html.twig

 

internalviewpath is the internal path inside the Drupal node/15, taxonomy/term/46, user/2, and so on.

 

See more information in the html.html.twig documentation

Page Template

Override options: page--[front|internal/path].html.twig

Main template: page.html.twig (base location: core/modules/system/templates/page.html.twig)

The possible page templates are very diverse. The homepage template comes first in priority. All other templates depend on the internal path. The front page can be set on the page Configuration - Basic site settings - Front page:

/admin/config/system/site-information

Do not confuse the internal path with aliases, for example, the news node may have the path /news/node-title, but in fact the node has the internal path /node/node-id.

For the node edit page http://www.example.com/node/1/edit, you can use the following templates to override:

page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig

See more information in the page.html.twig documentation

Regions

Override Options: region--[region].html.twig

: region.html.twig (base location:core/modules/system/templates/region.html.twig)

The region template is used when the region has content created by the block system or through the hook_page_build () function. It is possible to specify the name of the regions in the theme file .info.yml.

See more information in the region.html.twig documentation.

Blocks

Override options: block--[module|--delta]].html.twig

Main template: block.html.twig (base location: core / modules / block / templates / block.html.twig)

  1. block--module--delta.html.twig
  2. block--module.html.twig
  3. block.html.twig

 

'module' is the name of the module that displays the given block, delta is the internal id of the block in the module.

 

For example, block--block--1.html.twig is the first block added by the user through the admin module block. If you have a custom module, you create a block with delta "my-block", then the template for this block will be block--custom--my-block.html.twig.

For the Views module, the block template is redefined as follows: take the name of the view "front_news" and the display id of the view "block_1", then the name of the template to override the block will be: block - views-block - front-news-block-1.html.twig

Note that underscores change by one hyphen.

In Drupal 8, you cannot specify a separate template for a block in a particular region, at least out of the box.

Also note that pattern names are case sensitive. If your module is called MyModule, then the template name for the block will be block--MyModule.html.twig.

See more information in the documentation for block.html.twig.

Materials (Nodes)

Override options: node--[type|nodeid]--[viewmode].html.twig

Main template: node.html.twig (base location: core/modules/node/templates/node.html.twig)

You can override the node template as follows:

  1. node--nodeid--viewmode.html.twig
  2. node--nodeid.html.twig
  3. node--type--viewmode.html.twig
  4. node--type.html.twig
  5. node--viewmode.html.twig
  6. node.html.twig

 

Viewmode is a node display display: Full, Teaser, RSS, Token and other displays. Type - this is the content type of your node News, Articles, Pages. Nodeid is the nid, id of your node.

See more information in node.html.twig documentation

Taxonomy Terms

Override options: taxonomy-term--[vocabulary-machine-name|tid].html.twig

Main template: taxonomy-term.html.twig (base location: core / modules / taxonomy / templates / node.html.twig)

You can override the taxonomy term template as follows:

  1. taxonomy-term--tid.html.twig
  2. taxonomy-term--vocabulary-machine-name.html.twig
  3. taxonomy-term.html.twig

  4.  

All underscores in the names of dictionaries should be replaced by hyphens.

See more information in the taxonomy-term.html.twig documentation

Fields

Override options: field--[type|name[--content-type]|content-type].html.twig

Main template: field.html.twig (base location: core/modules/system/templates/field.html.twig)

You can override templates as follows:

  1. field--field-name--content-type.html.twig
  2. field--content-type.html.twig
  3. field--field-name.html.twig
  4. field--field-type.html.twig
  5. field.html.twig

 

All underscores in the names of the type of material and field names are replaced by hyphens.

 

See more information in the field.html.twig documentation.

Comments

Override options: comment--node-[type].html.twig

Main template: comment.html.twig (base location:  core/modules/comment/templates/comment.html.twig)

You can set a separate template for comments for each type of material. For example, comment--node-article.html.twig.

See more information in the comment.html.twig documentation.

You can also specify a separate template for wrapping a comment.

Override options: comment-wrapper--node-[type].html.twig

Main template: comment-wrapper.html.twig (base location: core/modules/comment/templates/comment-wrapper.html.twig)

Views

All Views templates can be redefined using the machine view name, display id, display type (page, block or other) or a combination of machine view name, display id and display type.

At least two templates are used for each View. The first template is views-view.html.twig:

The second template is determined by the display style of the view (for example, an unformatted list, table, grid, HTML list). By default, the unformatted filter template is used (via tags) views-view-unformatted.html.twig.

If we display not ready entities (for example, a full node or its teaser) through Views, but display fields, then Views uses another field template, which we can also redefine the template for the views-view-fields.html.twig fields.

Below are the possible template names to override.

View Name - foobar (machine name)

Display format - unformatted (unformatted list, add possible options)

Record Display Style - fields

Display Name - page

views-view - foobar - page.html.twig
views-view - page.html.twig
views-view - foobar.html.twig
views-view.html.twig

views-view-unformatted - foobar - page.html.twig
views-view-unformatted - page.html.twig
views-view-unformatted - foobar.html.twig
views-view-unformatted.html.twig

views-view-fields - foobar - page.html.twig
views-view-fields - page.html.twig
views-view-fields - foobar.html.twig
views-view-fields.html.twig

Forum

Override options: forums--[[container|topic]--forumID].html.twig

Main template: forums.html.twig (base location: core/modules/forum/templates/forums.html.twig)

You can set templates for containers and forum topics separately:

forums--containers--forumID.html.twig
forums--forumID.html.twig
forums--containers.html.twig
forums.html.twig

and for forum topics:

forums--topics--forumID.html.twig
forums--forumID.html.twig
forums--topics.html.twig
forums.html.twig

See more information in the forums.html.twig documentation.

Maintenance mode

Override options: maintenance-page--[offline].html.twig

Main template: maintenance-page.html.twig (base location: core/modules/system/templates/maintenance-page.html.twig)

See more information in the documentation for maintenance-page.html.twig.

Searching results

Override Options: search-result--[searchType].html.twig

Main template: search-result.html.twig (base location: core/modules/search/templates/search-result.html.twig)

For example, if you use a search by nodes:

/search/node/Search+Term

then you can use the template "search-result - node.html.twig".

To search by users:

search/user/bob

Use the search-result template - user.html.twig.