6.6. Working with templates in Drupal. What are the templates in the core of Drupal.
We have already seen that in 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 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:
- html--internalviewpath.html.twig
- html--node--id.html.twig
- 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)
- block--module--delta.html.twig
- block--module.html.twig
- 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 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:
- node--nodeid--viewmode.html.twig
- node--nodeid.html.twig
- node--type--viewmode.html.twig
- node--type.html.twig
- node--viewmode.html.twig
- 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:
- taxonomy-term--tid.html.twig
- taxonomy-term--vocabulary-machine-name.html.twig
- taxonomy-term.html.twig
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:
- field--field-name--content-type.html.twig
- field--content-type.html.twig
- field--field-name.html.twig
- field--field-type.html.twig
- 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.