http://www.phparch.com \ December 2018 \ 13The Flexibility of Drupal 8parameters:
twig.config:
debug: trueWhen debugging is enabled, the rendered page markup
outputs HTML comments that contain template information.
This information includes:
- The template file rendering the content (indicated with
a *) - The location of the templates file in the codebase
- Name suggestions for overriding the template
Listing 2 shows an example of the Tw ig debug HTML
comment rendered in the page markup for developers.
A developer can use this debug information to determine
how to replace and alter the template files used for rendering.
Changing a Menu Item using a Template
Returning to the menu item example, the debugging
markup reveals menu--main.html.twig renders the main
navigation menu. This template file is from the current
active Umami theme. We can create a custom version of this
template. In this example, the custom theme is called “Savory.”
Custom themes go in the themes/custom/ directory. A theme
uses a *.info.yml file to define itself to Drupal.
The following is the savory.info.yml file for a custom theme
called Savory.name: Savory
type: theme
base theme: umami
description: 'A custom child theme of Umami for the demo site.'
version: VERSION
core: 8.xInstead of building an entirely new theme, this custom
theme defines the Umami theme as its base. It inherits and
uses all of the templates, CSS and styling from Umami, which
reduces the work required. Rather than building an entire
theme from scratch, it is only necessary to redefine the
templates identified by the debugging markup.
Following the file name suggestion from the debugging
markup, create a copy of the menu--main.html.twig file and
save it in the themes/custom/savory/templates/ directory. The
template loops through and renders all items in the main
navigation menu. The following code snippet is the custom
conditional logic that alters the output.
Custom logic added to menu--main.html.twig checks if the
menu item title is "Articles" and if so changes the title and
adds inline CSS for a background color.{% if item.title == 'Articles' %}
{% set item = item|merge({'title':'Great Reads'|t}) %}
{% set item = item|merge({
'attributes': item.attributes.setAttribute('style',
'background: #66f')
}) %}
{% endif %}With the custom theme and template defined, the theme
needs to be set as the active theme. The admin toolbar is used
to navigate to the Theme management page. This is done by
clicking on Manage and then Appearance. Figure 9 shows
the first section of this page that lists the current active themes.
The second half of the page lists other available themes not yet
installed or activated.
Clicking the Install and set as default link for the custom
Savory theme makes it the active theme so that Drupal uses
the Savory theme to render content for end users. Savory
tells Drupal to use templates from the base Umami theme
for rendering unless explicitly overridden. As seen in Figure
10, the main menu uses the Twig template from the Savory
theme. The “Articles” menu item now renders with a blue
background and the text “Great Reads”.Listing 2