.libraries.yml
Les fichiers d'extension .libraries.yml répertorient l'ensemble des feuilles de styles et des scripts qui sont utilisés pour gérer l'affichage des pages d'un site sous Drupal. Ils se trouvent :
à la racine du dossier du thème dans le dossier "custom" des thèmes personnalisés. Pour mon site, il s'agit pour le thème "dhv4" du fichier "dhv4.libraries.yml" ;
- à la racine du dossier du module.
Ils doivent respecter la syntaxe YAML.
Ils se décomposent généralement en deux parties :
la structure CSS pour composer le style du site ;
la structure "script" pour installer les scripts.
Il est possible d'utiliser :
des fichiers minimisés en utilisant le paramètre minified initialisé à true ;
des bibliothèques externes grâce au paramètre type initialisé à external.
Les portions de code qui illustrent ce billet figurent dans le fichier "dhv4.libraries.yml" du thème de ce site.
1 la structure CSS
Elle débute par le mot-clé "global-styling" pour signifier que le style doit s'appliquer à l'ensemble des pages.
La section css liste les fichiers (sous la forme chemin/nom ou chemin est relatif à la racine du thème - voir l'image ci-dessous) à compiler pour former le style. Pour améliorer la lisibilité (et la maintenance), il est recommandé de décomposer votre style comme cela est présenté ci-dessous :
la section "base" indique le fichier où sont stylisées les balises généralistes (body, h1...) ;
la section "component" liste les fichiers qui stylisent chacun des composants des pages.
global-styling:
css:
base:
css/style.css: {}
component:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css: { type: external, minified: true }
css/component/dh-sf.css: {}
css/component/medium.css: {}
css/component/large.css: {}
css/jquery.mCustomScrollbar.min.css: { minified: true }
css/jquery.custom-scrollbar.css: { }
css/component/page-header.css: {}
css/component/views.css: {}
css/component/search-form.css: {}
css/component/clipboard.css: {}
css/component/tooltip.css: {}
css/component/dh.css: {}
css/component/menu-main.css: {}
css/component/status.css: {}
css/component/nav-book.css: {}
css/component/hideshow.css: {}
css/layout/twocol_section.css: {}
- @media screen and (min-width: 780px) and (max-width: 979px){ } dans "medium.css" ;
- @media screen and (min-width: 980px){} dans "large.css".
2. La structure Script
Elle est voisine de la structure css.
Elle débute par le mot-clé "global-scripting" pour signifier que le script doit s'appliquer à l'ensemble des pages.
La section "js" liste les fichiers (sous la forme chemin/nom ou chemin est relatif à la racine du thème) à compiler pour former le script.
La section "dependencies" liste les bibliothèques dont dépendent les scripts listes dans la section js.
global-scripts:
version: 1.2
js:
js/dh.js: {}
js/jquery.mCustomScrollbar.concat.min.js: { minified: true }
https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js: { type: external, minified: true }
dependencies:
- jquery_ui/core
- jquery_ui_tooltip/tooltip
- jquery_ui_tabs/tabs
- jquery_ui_accordion/accordion
3. Exemple d'adaptation à ses besoins :
Sur ce site, j'utilise la bibliothèque JQuery "HideShowPassword" pour cacher/montrer le mot de passe dans le formulaire de connexion des utilisateurs. La page "Montrer-cacher le mot de passe" de ce site en décrit le fonctionnement.
Pour intégrer les codes JS et CSS à mon site, j'ai modifié le fichier "dhv4.libraries.yml" du thème "dhv4" de mon site en ajoutant :
dans la section CSS, la ligne "css/component/hideshow.css { }" :
Ce fichier "hideshow.css" est une copie de "example.wink.css" vu dans la page "Montrer-cacher le mot de passe" ;
Il est stocké dans le dossier "css/component" de mon thème.
dans la section JS, la ligne "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js: { type: external, minified: true }" ;
elle a le même rôle que <script src= "https://cdnjs.cloudflare.com/aj.... > du fichier de l'onglet HTML de la page "Montrer-cacher le mot de passe".
Le fichier "dh.js" de mon site contenant toutes mes fonctions JS, je l'ai donc modifié en y ajoutant les fonctions "hideShowPassword()" et "on()" du script "index.js" vu dans la page "Montrer-cacher le mot de passe".
