6.2. De quoi se compose un thème Drupal 8. Aperçu du thème Stark.

07/07/2025, by Ivan

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.

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes