6.2. De quoi se compose un thème Drupal 8. Aperçu du thème Stark.
Dans Drupal 7, vous pouviez rapidement et facilement créer un sous-thème basé sur Zen et commencer à construire votre site web. Depuis Drupal 8, il existe également plusieurs générateurs de thèmes pour créer vos propres thèmes. Mais avant de créer un sous-thème à partir de ceux-ci, vous devrez d'abord comprendre un peu où ils se trouvent.
Les développeurs Drupal suggèrent que nous prenions comme exemple le thème Stark. Ce thème a été ajouté à Drupal simplement pour vous familiariser avec la manière dont un thème est structuré. Voyons ce qu'il y a à l'intérieur de ce thème :
Fichier Stark.info.yml
Nous commençons la revue avec le fichier stark.info.yml. Auparavant, dans Drupal 7, les données du thème étaient stockées dans des fichiers .info, mais Drupal 8 utilise le format YML partout, donc le fichier .info devient maintenant info.yml au format YML. Dans le format YML, les clés et valeurs sont séparées par deux-points.
Nom du thème :
name: Stark
Le type de projet peut être un thème ou un module. Ici, nous avons un thème.
type: theme
Description affichée sur la page du thème :
description: 'Un thème volontairement simple sans style pour démontrer le HTML et CSS par défaut de Drupal. Apprenez comment construire un thème personnalisé à partir de Stark dans le Guide du Thème.'
Regroupement des projets Drupal pour plus de commodité, par exemple, lorsque des modules sont inclus, ils seront regroupés sous des onglets :
package: Core
La version pour les modules contrib est définie automatiquement, donc ici, la variable VERSION est utilisée, et la ligne elle-même est commentée. En réalité, la version est indiquée ci-dessous :
# version: VERSION
La version du noyau Drupal est également commentée et insérée automatiquement par drupal.org :
Pour Drupal 8.8 et versions supérieures :
core: 8.x
core_version_requirement: ^8 || ^9
Pour Drupal 8.8 et versions inférieures :
# core: 8.x
Indique s'il utilise un thème de base ou non, false signifie qu'il n'en utilise pas :
base theme: false
Le bloc avec la version du thème et la version du noyau est inséré automatiquement par drupal.org :
# Information ajoutée par le script de packaging Drupal.org le 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380
Fichier stark.libraries.yml
Ici, nous incluons les fichiers CSS et JS du thème :
global-styling:
version: VERSION
css:
base:
css/layout.css: {}
Nous pouvons aussi inclure des fichiers JavaScript :
global-styling:
version: VERSION
css:
base:
css/layout.css: {}
js:
js/custom.js: {}
Il est aussi important de noter que jQuery est désormais optionnel et peut ne pas être chargé sur la page. Si vous utilisez jQuery dans votre script personnalisé, vous devez l'ajouter au thème :
global-styling:
version: VERSION
css:
base:
css/layout.css: {}
js:
js/custom.js: {}
dependencies:
- core/jquery
De plus, vous pouvez aussi définir pour les fichiers CSS lesquels doivent toujours être affichés et lesquels uniquement dans la version imprimable :
global-styling:
version: VERSION
css:
base:
css/layout.css: {}
css/style.css: {}
css/colors.css: {}
css/print.css: { media: print }
js:
js/custom.js: {}
dependencies:
- core/jquery
Fichiers de description README.txt, screenshot.png
Ces fichiers montrent à quoi ressemble le thème et comment l’installer, s’il y a des particularités d’installation ou d’utilisation.
Fichier Logo.svg
Le fichier logo est automatiquement lié au design du thème s’il se trouve à la racine du site. Vous pouvez aussi définir votre logo via les paramètres du thème.
Dossier Config et fichier stark.schema.yml
Un autre fichier YML du thème dans lequel les réglages du thème sont stockés. Pour le thème Stark, il contient juste le titre pour la page des réglages du thème Stark.
Dossiers css, js
Ces dossiers contiennent les fichiers CSS et JavaScript personnalisés. N’oubliez pas qu’il ne suffit pas de placer le fichier dans un dossier pour l’inclure. Chaque fichier doit être connecté séparément via stark.libraries.yml.
Fichier stark.breakpoints.yml
Ce fichier définit les tailles d’écran pour les versions mobiles du site. C’est une nouveauté de Drupal, que nous détaillerons dans un prochain article.
stark.mobile:
label: mobile
mediaQuery: '(min-width: 0px)'
weight: 0
multipliers:
- 1x
stark.narrow:
label: narrow
mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
weight: 1
multipliers:
- 1x
stark.wide:
label: wide
mediaQuery: 'all and (min-width: 960px)'
weight: 2
multipliers:
- 1x
Voici un thème pour vous familiariser avec Stark. Dans le prochain article, nous verrons comment créer votre propre thème basé sur le thème Stable.