.libraries.yml

Le fichier d'extension .libraries.yml qui se trouve à la racine du dossier des thèmes personnalisés d'un site sous drupal, répertorie l' ensemble des feuilles de styles et des scripts qui sont utilisées pour réaliser les pages du site.

Il doit respecter la syntaxe YAML.

Il se décompose généralement en deux parties :

  • la composition du style
  • la composition du script
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.

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 il est présenté ci-dessous :

  • la section base indique le fichier ou sont stylisées les balises généralistes ( body, h1...)
  • la section component liste les fichiers qui stylise chacun des composants des pages

global-styling:
  version: 1.1
  css:
    base:
        css/style.css: {}
    component:
        css/component/dh-sf.css: {}
        css/component/page-title.css: {}
        css/component/breadcrumb.css: {}
        css/component/search-form.css: {}
        css/component/clipboard.css: {}
        css/component/tooltip.css: {}
        css/component/dh.css: {}
        css/jquery.mCustomScrollbar.min.css: { minified: true }
        https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes
               /cupertino/jquery-ui.css: { type: external, minified: true }

image

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

 

Mots Clé Système