Ajout de css et js
Dans drupal 7 on les déclarait dans le theme.info - maintenant c'est dans *.libraries.yml.
Pour optimiser, drupal ne charge pas les assets (=js et css) pour les pages si on ne les demande pas (notement jQuery). Les assets qui doivent etre chargés pour toutes les pages doivent etre déclarées dans *.libraries.yml
En pratique, on a 3 étapes:
- mettre js et css avec le bon nom et bon endroit (SMACSS, séparer les css "Base", "Layout" et "Component"... cf css-file-organization-for-drupal-8)
- définir une librairie (qui contient css, js ou les 2)
- "Attacher" la librairie à toutes les pages, à un/des templatesTwig spécifiés, ou sur un élément rendu par une fonction preprocess.
définir une/des librairies
Par ex: pour un theme nommé fluffiness (c'est aussi le nom du dossier), fluffiness/fluffiness.libraries.yml
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
Si ce .js a besoin de JQuery sur toutes les pages, alors il faut déclarer cette dépendansce (JQuery est maintenant dans le core) :
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
dependencies:
- core/jquery
Si une autre lib a besoin de ce cuddly-slider il faut déclarer (syntaxe): nomtheme/nom-lib => fluffiness/cuddly-slider
Beaucoup (la pluspart) de thèmes utilisent une syntaxe de librairie style globale (pour les css) qui ont besoin d'etre chargé sur chaque page (où le thème est actif):
global-styling:
version: 1.x
css:
theme:
css/layout.css: {}
css/style.css: {}
css/colors.css: {}
css/print.css: { media: print }
Note: on peux maintenant déclarer media: print (impossible dans drupal 7) en bas des déclaration des assets.
ordre de chargement des assets
par défaut, les js sont chargé en pied de page, sinon, c'est chargé dans l'ordre des déclarations.
Si on a besoin d'avoir le js en en-tete (cas où un element critique de l'UI ne peux etre affiché tant que le js correspondant n'a pas été chargé): ajouter header: true :
js-header:
header: true
js:
header.js: {}
js-footer:
js:
footer.js: {}
Surcharger et étendre les librairies
Sur le web
https://www.drupal.org/docs/develop/standards/css/css-file-organization-for-drupal-8