Structure des dossiers des thèmes Drupal 8
Un thème est un ensemble de fichiers qui définissent le niveau de présentation. Vous pouvez également créer un ou plusieurs sous-thèmes ou variantes de thème. Seul un fichier .info.yml est obligatoire, mais la plupart des thèmes et sous-thèmes utilisent d'autres fichiers. Cette page énumère les fichiers et dossiers que l’on trouve typiquement dans un thème ou sous-thème.
Emplacement des thèmes
Vous devez placer les thèmes dans le dossier themes de votre installation Drupal. Notez que les thèmes principaux de Drupal, comme Bartik et Seven, se trouvent dans core/themes de votre installation.
Il est recommandé de placer les thèmes contrib dans le sous-dossier contrib et vos thèmes personnalisés dans le dossier custom.
Chaque thème individuel est contenu dans un répertoire nommé d’après le thème lui-même, par exemple fluffiness. Le nom doit être en minuscules, commencer par une lettre et utiliser le caractère de soulignement (_) à la place des espaces.
La structure (partielle) de votre installation Drupal peut ressembler à ceci :
|-core | |-modules | |-themes | | |-bartik | | |-seven .. |-modules |-themes | |-contrib | | |-zen | | |-basic | | |-bluemarine | |-custom | | |-fluffiness
Structure d’un dossier thème
Voici un exemple de fichiers et dossiers que l’on retrouve dans une structure de dossier de thème typique :
|-fluffiness.breakpoints.yml |-fluffiness.info.yml |-fluffiness.libraries.yml |-fluffiness.theme |-config | |-install | | |-fluffiness.settings.yml | |-schema | | |-fluffiness.schema.yml |-css | |-style.css |-js | |-fluffiness.js |-images | |-buttons.png |-logo.svg |-screenshot.png |-templates | |-maintenance-page.html.twig | |-node.html.twig
Voici la description des fichiers les plus courants que vous pouvez trouver dans un thème :
*.info.yml
Un thème doit contenir un fichier .info.yml pour définir le thème. Parmi d’autres choses, les fichiers .info.yml définissent les métadonnées, les bibliothèques et les régions de blocs. C’est le seul fichier obligatoire du thème.
*.libraries.yml
Le fichier .libraries.yml sert à définir les bibliothèques JavaScript et CSS qui peuvent être chargées par le thème.
*.breakpoints.yml
Les points de rupture définissent où le design adaptatif doit changer pour s’adapter aux différents appareils. Les points de rupture sont définis dans le fichier .breakpoints.yml.
*.theme
Le fichier .theme est un fichier PHP qui contient toute la logique conditionnelle et le prétraitement des données. Il peut aussi étendre les réglages de base du thème. Créer des réglages avancés pour le thème.
CSS/
Il est recommandé de stocker les fichiers .css dans un sous-dossier css. Les thèmes principaux de Drupal 8 organisent les fichiers CSS selon la méthodologie SMACSS. Pour que le thème charge les fichiers CSS, ils doivent être définis dans le fichier .libraries.yml et peuvent être surchargés ou supprimés dans le fichier .info.yml.
JS/
Les fichiers JavaScript spécifiques au thème sont stockés dans le dossier js. Pour que le thème charge les fichiers JavaScript, ils doivent être définis dans le fichier .libraries.yml.
images/
Il est recommandé de stocker les images dans un sous-dossier images.
screenshot.png
Si un fichier screenshot.png est présent dans le dossier du thème, il sera utilisé dans la page « Apparence ». Vous pouvez aussi définir la capture d’écran dans le fichier .info.yml.
logo.svg
Si un fichier vectoriel SVG du logo du thème est présent dans le dossier, il peut être utilisé dans l’en-tête du site. Les logos peuvent également être téléchargés via Apparence > Paramètres.
templates/
Les templates fournissent le balisage HTML et une partie de la logique de présentation. Contrairement à Drupal 7, les fichiers de template Drupal 8 (fichiers *.html.twig) doivent être stockés dans un sous-dossier templates. En suivant les conventions de nommage, Drupal remplace les templates par défaut par ceux que vous fournissez, vous permettant de surcharger le balisage par défaut. Vous pouvez aussi organiser vos templates en sous-dossiers, par exemple tous les templates de blocs dans templates/blocks et ceux des vues dans templates/views.
Thème principal Bartik : structure du dossier
À titre d’exemple, voici la structure du dossier Bartik, situé dans core/themes/bartik :
|-bartik.breakpoints.yml |-bartik.info.yml |-bartik.libraries.yml |-bartik.theme |-color | |-color.inc | |-preview.css | |-preview.html | |-preview.js |-config | |-schema | | |-bartik.schema.yml |-css | |-colors.css | |-layout.css | |-maintenance-page.css | |-print.css |-images | |-add.png | |-required.svg | |-tabs-border.png |-logo.svg |-screenshot.png |-templates | |-block--search-form-block.html.twig | |-block--system-branding-block.html.twig | |-block--system-menu-block.html.twig | |-block.html.twig | |-comment.html.twig | |-field--taxonomy-term-reference.html.twig | |-maintenance-page.html.twig | |-node.html.twig | |-page.html.twig | |-status-messages.html.twig