Templates provide HTML markup and some presentation logic. Contrary to Drupal 7, in Drupal 8 template files (*.html.twig files) must be stored in the 'templates' subfolder.
You can instantiate new template files in the root of your custom theme folder simply by giving them the same name as one of the template files in core.
Core theme Bartik template folder structure -
|-templates
| |-block--search-form-block.html.twig
| |-block--system-branding-block.html.twig
| |-block--system-menu-block.html.twig
| |-block.html.twig
| |-comment.html.twig
| |-field--taxonomy-term-reference.html.twig
| |-maintenance-page.html.twig
| |-node.html.twig
| |-page.html.twig
| |-status-messages.html.twig
HTML (<head> template ) -The HTML template provides markup for the basic structure of the HTML-page including the <head>, <title> and <body> tags.
Base template: html.html.twig (base location: core/modules/system/templates/html.html.twig)
The following are some examples of how you may override the base template:
html--[internalviewpath].html.twig
html--node--[nodeid].html.twig
html.html.twig
Page template -
Pattern: page--[front|internal/path].html.twig
Base template: page.html.twig (base location: core/modules/system/templates/page.html.twig)
Regions -
Pattern: region--[region].html.twig
Base template: region.html.twig (base location: core/modules/system/templates/region.html.twig)
Blocks -
Pattern: block--[module|--[delta].html.twig
Base template: block.html.twig (base location: core/modules/block/templates/block.html.twig)
Nodes -
Pattern: node--[content-type|nodeid]--[viewmode].html.twig
Base template: node.html.twig (base location: core/modules/node/templates/node.html.twig)
Theme hook suggestions are made based on these factors, listed from the most specific template to the least. Drupal will use the most specific template it finds:
node--[nodeid]--[viewmode].html.twig
node--[nodeid].html.twig
node--[content-type]--[viewmode].html.twig
node--[content-type].html.twig
node--[viewmode].html.twig
node.html.twig
Taxonomy Term -
Pattern: taxonomy-term--[vocabulary-machine-name|tid].html.twig
Base template: taxonomy-term.html.twig (base location: core/modules/taxonomy/templates/taxonomy-term.html.twig)
Theme hook suggestions are made based on these factors, listed from the most specific template to the least. Drupal will use the most specific template it finds:
taxonomy-term--[tid].html.twig
taxonomy-term--[vocabulary-machine-name].html.twig
taxonomy-term.html.twig
Fields -
Pattern: field--[[type|name]|[entity-type]--[field-name|content-type]].html.twig
Base template: field.html.twig (base location: core/modules/system/templates/field.html.twig)
Theme hook suggestions are made based on these factors, listed from the most specific template to the least. Drupal will use the most specific template it finds:
field--node--[field-name]--[content-type].html.twig
field--node--[field-name].html.twig
field--node--[content-type].html.twig
field--[field-name].html.twig
field--[field-type].html.twig
field.html.twig
Note that underscores (_) in a Field's machine name are replaced by hyphens (-). Also remember to include "field-" in custom field names, e.g: field--field-phone.html.twig.
Theme hook suggestions -
ometimes you want to make changes to a template file, but only for some of the places that it's used. A common example is making changes to the node template file for only nodes of a specific type. Drupal's theme layer allows you to target specific use cases of a template file by following a specific naming convention. When rendering an article node Drupal will first look for the node--article.html.twig template file and use it if it exists. If it doesn't, Drupal will fall back to the default node.html.twig template. The process by which Drupal determines what possible names a template file could use is called theme hook suggestions.
Theme hook suggestions allow you to implement targeted overrides in your theme for template files with a specific naming convention.
All layers from core, modules, theme engines and themes can provide the suggestions. You can add or modify suggestions using the hooks:
hook_theme_suggestions_HOOK(array $variables)
hook_theme_suggestions_alter(array &$suggestions, array $variables, $hook)
hook_theme_suggestions_HOOK_alter(array &$suggestions, array $variables)
1 comment:
Thank you for discussing this very useful article. I heard something new from you. Keep blogging. php training in jalandhar
Post a Comment