Sous-thèmes
Les sous-thèmes, comme tout autre thème, ont une différence : ils héritent des ressources du thème parent. Il n’y a aucune limite dans la chaîne reliant les sous-thèmes à leurs parents. Un sous-thème peut être enfant d’un autre sous-thème, et il peut être ramifié et organisé selon vos besoins. C’est ce qui donne aux sous-thèmes un grand potentiel.
Pour créer un sous-thème, définissez-le comme n’importe quel autre thème et déclarez son thème de base avec la clé « base theme ». (Notez que cette clé ne contient pas de soulignement.)
Exemple de sous-thème : Fluffiness
Fluffiness est un exemple de sous-thème qui utilise Classy comme thème de base.
Voici la structure des dossiers, contenant les fichiers suivants :
themes/
└── fluffiness/
├── fluffiness.info.yml
└── fluffiness.libraries.yml
Le fichier d’information fluffiness.info.yml contient :
name: Fluffiness type: theme description: This is a fluffy sub theme of Classy core: 8.x # Définit le thème de base base theme: classy # Définit le groupe de bibliothèques dans lequel on peut ajouter css/js. libraries: - fluffiness/global-styling # Régions regions: header: Header featured: Featured content: Content sidebar_first: First sidebar sidebar_second: Second sidebar footer: Footer
Incluez le fichier fluffiness.libraries.yml pour ajouter du CSS/JS au groupe de styles globaux défini dans la clé libraries ci-dessus :
global-styling:
css:
component:
css/style.css: {}
Apprenez-en plus sur l’ajout de feuilles de styles CSS et JavaScript dans un thème Drupal 8.
Si vous souhaitez utiliser un autre nom que « fluffiness », remplacez simplement toutes les occurrences de « fluffiness » par votre propre nom (toutes les occurrences incluent aussi le nom du dossier). Par exemple :
themes/
└── my_custom_theme/
├── my_custom_theme.info.yml
└── my_custom_theme.libraries.yml
Le texte que vous saisissez dans la ligne « name: » du fichier info.yml peut être arbitraire et n’a pas besoin de correspondre exactement au nom du fichier de votre sous-thème. Par exemple :
name: My Custom Theme # (les autres lignes sont omises pour la brièveté)
Sous-thème d’un sous-thème
Quand vous créez un sous-thème d’un sous-thème, vous devez indiquer le sous-thème parent comme thème de base.
- Fluffiness : premier sous-thème de Classy
name: Fluffiness type: theme description: This is a fluffy sub theme of Classy core: 8.x # Définit le thème de base base theme: classy
- Shaved : sous-thème de Fluffiness (sous-thème d’un sous-thème de Classy)
name: Shaved type: theme description: This is a reduced fluff sub theme of Fluffiness core: 8.x # Définit le thème de base base theme: fluffiness
Notez que le paramètre base theme correspond au machine name du thème de base, tandis que le paramètre name est un nom descriptif.
Héritage des régions de thème
Les régions de thème ne sont pas héritées du thème de base indiqué. Si la clé regions: est laissée vide dans le fichier info.yml de votre sous-thème, ou ne contient pas toutes les régions du thème de base, alors les régions par défaut de Drupal seront utilisées comme alternatives pour placer les blocs dans votre sous-thème. Il est fortement recommandé de copier toutes les régions définies dans votre thème de base dans le fichier info.yml de votre sous-thème.
# Parce que les régions ne sont pas héritées, toutes les régions, # y compris les régions standard Drupal ainsi que celles du thème de base, # doivent être définies dans le sous-thème. Cet exemple montre un sous-thème # qui utilise un sous-ensemble des régions standard Drupal (1), # plus quelques régions personnalisées du thème de base (2), # et finalement trois régions "colophon" définies dans ce sous-thème (3). regions: # 1. Régions standard Drupal (définies et utilisées aussi par le thème de base). # 2. Régions copiées depuis le thème de base. # 3. Régions supplémentaires personnalisées du sous-thème. header: 'Header' # 1 primary_menu: 'Main menu' # 1 secondary_menu: 'Secondary menu' # 1 highlighted: 'Highlighted' # 1 help: 'Help' # 1 section_nav: 'Section Nav' # 2 breadcrumb: 'Breadcrumb' # 1 page_title: 'Page Title' # 2 local_tasks: 'Local Tasks' # 2 content: 'Content (Constrained)' # 1 content_fullwidth: 'Content (Edge-to-edge)' # 2 colophon_first: 'Colophon First Col' # 3 colophon_second: 'Colophon Second Col' # 3 colophon_third: 'Colophon Third Col' # 3 footer: 'Footer' # 1
Héritage du placement des blocs
Dans Drupal 8, les thèmes peuvent inclure un dossier config/install/ où des configurations préinstallées des blocs, y compris leur placement dans les régions, sont importées à l’activation du thème. Drupal peut hériter de ces configurations et du placement des blocs du thème de base, mais si les régions définies dans le fichier info.yml de votre sous-thème ne correspondent pas à celles disponibles dans le thème de base, des placements imprévus dans des régions aléatoires peuvent survenir.
Héritage des templates de blocs
Si un thème parent possède des templates de blocs personnalisés, ils ne seront pas automatiquement hérités car le sous-thème crée des copies de tous les blocs du thème parent en renommant leur préfixe avec le nom du sous-thème. Les templates Twig des blocs sont dérivés du nom du bloc, ce qui casse la relation entre ces templates et leurs blocs. Corriger ce problème requiert actuellement un « hack » dans le sous-thème. En suivant les exemples ci-dessus, créez un fichier shaved.theme dans le répertoire du sous-thème et insérez ce hook :
/**
* Implémente hook_theme_suggestions_HOOK_alter pour les blocs.
*/
function shaved_theme_suggestions_block_alter(&$suggestions, $variables) {
// Charge les suggestions de thème pour les blocs du thème parent.
foreach ($suggestions as &$suggestion) {
$suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
}
}
Pour vos propres sous-thèmes, remplacez « shaved » par le nom de votre sous-thème, et « fluffiness » par le nom de votre thème de base.
Différences avec Drupal 7
La différence la plus visible avec Drupal 7 est que les fichiers .info sont devenus des fichiers .info.yml qui utilisent la syntaxe YAML.