12 \ December 2018 \ http://www.phparch.com

The Flexibility of Drupal 8

The Menu Links Attribute module also provides a method

for more technical users to further extend the form by

defining custom attributes. To do so, an administrative user

navigates to admin/config/menu_link_attributes/config. This

page provides a form for defining new attributes using YAML

syntax. Listing 1 shows the syntax used to define a style attri-

bute for adding inline CSS to a menu item.

Navigating back to the Edit menu link form, it has been

further extended with the style attribute, as shown in Figure

7. For the “Who We Are” item, a CSS rule is set to change the
   background color to orange.
   When Drupal renders the main navigation for users, the
   Menu Link Attributes module adds the additional markup
   resulting in the orange background for the “Who We Are”
   link, as shown in Figure 8.

Templates

Drupal 8 uses Twig as the templating engine to render

content. Twig is responsible for producing the HTML markup

rendered by the user’s browser. Therefore, changing Twig

templates is a direct way to alter the data presented to end

users. However, the templates can only change the display of

content. They cannot add or edit data in the system.

Creating and changing templates in Drupal 8 requires

development knowledge of HTML and Twig syntax. See the

documentation for more information about Twig^4.

The ability to create a module or theme is also needed.

Themes are a collection of templates, CSS and JavaScript files

that control the presentation of content.

Determining Twig Files

Rendering a single page in Drupal involves many Twig

templates. Each template is responsible for a single compo-

nent or section. Determining which template to alter can

be a challenge since a single page may use many different

templates.

Reviewing all of the templates on a page is possible using

the debugging output provided by Twig. To enable this a

value in the sites/default/services.yml file must be changed.

Changing the twig.config debug parameter to true, as shown

in the following code example, enables debugging. For secu-

rity reasons, it is crucial that debugging is only enabled in a

development environment, never in production.

4 Twig: https://twig.symfony.com

Listing 1

1. 
   

   Yaml to define a new attribute to be used with the Menu

   
   


2. 
   

   Link Attributes Drupal module.

   
   


3. attributes:


4. class:


5. label: ''


6. description: ''


7. target:


8. label: ''


9. description: ''


10. options:


11. _blank: 'New window (_blank)'


12. _self: 'Same window (_self)'


13. style:


14. label: ''


15. description: "Add in-line CSS rules"

Figure 6 Figure 7

Figure 8