Aller au contenu principal


.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.
Dernière MAJ :
30 nov 2023
Billet créé le :
17 nov 2020

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.

information complémentaire disponible en cliquant ici

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: {}

 

Remarquer la présence des fichiers "medium.css" et "large.css" qui contiennent les Media Queries permettant la construction d'un "design responsive" :
@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".

Attention, sur le site ces fonctions doivent être appelées lorsque l'on agit sur l'objet identifié "edit-pass" (le champ saisie du mot de passe du formulaire : cf. le template "input.html.twig"), il faut donc remplacer les $('#Pwd') par $('#edit-pass') dans le script. On doit par exemple lire  $('#edit-pass').hideShowPassword({})