Enterprise Drupal 8 Development by Todd Tomlinson

Author:Todd Tomlinson
Language: eng
Format: epub
Publisher: Apress, Berkeley, CA

annoying-cow:

version: 1.x

js:

js/annoying-cow.js: {}

Finally, we update the libraries section of the davinci.info.yml file to load the annoying-cow library .

libraries:

- davinci/global-styling

- davinci/annoying-cow

After saving all the files and rebuilding cache, reload the homepage. The annoying cow is shown in Figure 5-9.

Figure 5-9.Demonstrating that the added JavaScript works

Adding JavaScript and CSS Libraries to Template Files

In the previous examples, we added CSS and JavaScript to the Davinci module on a global basis, meaning that every page will load the CSS and the JavaScript that we added through the libraries section of the davinci.info.yml file. This approach works but isn’t the optimal solution, as not all CSS or JavaScript is required on every page.

To resolve the issue, Twig provides the ability to load libraries on a per-template basis through the attach_library function in the form of {{ attach_library('library_name') }}. In the case of the Davinci theme, we could add the node.css file, which is loaded only when the node.html.twig template is used to render a node. We first need to add a new library to the davinci.libraries.yml file to define the library:

node-styling:

version: 1.x

css:

theme:

css/theme/node.css: {}

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.