Makina Blog

Le blog Makina-corpus

Démarrer un thème Drupal 8 en 10 minutes


Un thème Drupal 8 à télécharger pour être opérationnel immédiatement.

Drupal 8 intègre désormais le moteur de templates Twig pour sa couche de thème. Mais d'autres choses ont changé également. Cet article vise à vous aider à démarrer le plus efficacement possible. Cela correspond (en partie, bien sûr) à ce que nous présentons durant notre formation au développement Drupal 8.

Attention : nous ne présentons pas Twig dans cet article, mais juste son intégration à Drupal.

Préparez votre environnement de développement

Un des challenges pour les débutants en Drupal est d'identifier rapidement le fichier de template utilisé ou celui à modifier pour obtenir le rendu souhaité. Heureusement, Drupal permet d'automatiser le processus d'identification.

Pour cela, vous pouvez modifier le fichier sites/default/services.yml (s'il n'existe pas, renommez le fichier default.services.yml en services.yml) :

parameters:
 twig.config:
   debug: true

Une alternative si la console Drupal est installée est de passer le site en mode développement :

drupal site:mode dev

Créez votre thème

L'adage en vogue dans la communauté Drupal est "si vous hackez un fichier, vous tuez un chaton". Ce qui concrètement s'interprète en "on ne modifie jamais directement un fichier du cœur". Drupal a en effet des mécanismes qui permettent de surcharger le comportement du cœur.

Cela passe pour la couche graphique par la création d'un thème dédié.

Dans le dossier /themes, créez un nouveau dossier du nom que vous souhaitez (par exemple, le nom de votre client ou du site). Et créez ans ce dossier un fichier du même nom avec l'extension .info.yml dont voici un exemple de contenu :

name: Makina Corpus
description: Thème de base du site Makina Corpus
core: 8.x
type: theme
base theme: classy

La dernière ligne mérite une explication. Il est en effet possible d'hériter de n'importe quel thème. D'ailleurs, si vous n'héritez de rien, c'est comme si vous héritiez du thème stable de Drupal. Pour les débutants, nous recommandons d'utiliser plutôt le thème du cœur classy, qui est une "amélioration" de stable incluant des classes automatiques en fonction du type de contenu, de la page courante, …

Votre thème est désormais déclaré, vous devriez pouvoir le voir en cliquant sur "Apparence" dans le back-office Drupal. Vous pouvez l'activer dès maintenant, mais attendez un peu.

Créez votre mise en page

Une des choses fondamentales à faire lors de la création d'un thème Drupal est la mise en page générale de votre site, permettant ensuite d'organiser les blocs Drupal. Pour cela, il est nécessaire de faire deux choses :

  • Déclarer les régions de votre thème. Cela se fait directement dans le .info.yml de votre thème :
regions:
 header: 'Top Bar'
 navigation: 'Navigation'
 breadcrumb: 'Breadcrumb'
 content: 'Content'
 sidebar_first: 'Primary'
 sidebar_second: 'Secondary'
 footer: 'Footer'
 page_top: 'Page top'
 page_bottom: 'Page bottom'
  • Mettre en page ces régions en modifiant le fichier de template page.html.twig (en copiant celui du thème classy). Ici, il suffit d'écrire le contenu de votre <BODY> directement en HTML (la balise BODY elle-même est contenu, ainsi que la HEAD, dans le fichier html.html.twig), et de remplacer les zones où vous voulez positionner des blocs Drupal par un simple
{{ page.navigation }}

(correspondant bien sûr aux régions que vous avez déclaré ci-dessus). Vous trouverez un fichier theme.info.yml et un fichier page.html.twig complet avec les régions mentionnées précédemment dans l'archive accompagnant cet article.

Ajoutez une bibliothèque

Contrairement à Drupal 7, vous ne pouvez pas inclure directement une feuille de style (CSS) dans votre thème, tout fonctionne par des bibliothèques.

Vous devez donc déclarer une bibliothèque (fichier nom_theme.library.yml) contenant cette ou ces feuille(s) de style :

styles:
 css:
   theme:
     css/styles.css: {}
     css/print.css: { media: print }

Ensuite, vous devez inclure cette bibliothèque dans votre thème (grâce au fichier .info.yml) :

libraries:
 - 'makinacorpus/styles'

Vous pouvez dorénavant inclure des règles CSS dans le fichier en question, et votre thème est opérationnel. Il est temps de l'activer, à vous de jouer !

Enrichissez votre thème

Votre thème est fonctionnel. Dorénavant, si vous souhaitez modifier le balisage HTML d'une partie de votre page, inspectez l'élément (ou affichez la source). Vous devriez alors voir en commentaire le fichier utilisé par Drupal (c'est le résultat de notre première étape) :

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'html' -->
<!-- FILE NAME SUGGESTIONS:
   * html--front.html.twig
   * html--.html.twig
   x html.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/layout/html.html.twig' -->

Copiez le fichier mentionné à la dernière ligne dans votre thème (peu importe où), et modifiez-le. Vous pouvez éventuellement le renommer en suivant les suggestions indiquées dans le commentaire pour cibler plus précisément votre surcharge (le x indique celui utilisé actuellement, vous devez en prendre un au-dessus pour cibler plus précisément).

Voilà, vous surchargez le comportement de Drupal.

En cas de problème

Avant de vous laisser, voici 2 astuces de développement de votre thème Drupal.

D'abord, Drupal met beaucoup de choses en cache, donc si vous faites des modifications et qu'elles ne vous semblent pas prises en compte, commencez par vider les caches, soit dans le back-office (Configuration / Développement / Performance / Effacer tous les caches), soit en utilisant l'outil Drush (DRUpal SHell) via sa commande drush cr (cr comme cache-rebuild).

Ensuite, il peut vous arriver de souhaiter savoir ce que Twig peut vous fournir comme variables à utiliser. Dans ce cas, insérez dans votre template la ligne {{ dump(_context|keys) }}, qui vous affichera l'intégralité de ce que vous pouvez utiliser (utilisez ensuite plus précisément {{ dump(variable) }} pour chaque variable du contexte d'exécution).

Pour aller plus loin

Ici, nous avons simplifié à l'extrême pour vous permettre de démarrer le plus vite possible. Pour aller plus loin, il faudrait bien sûr jouer avec Gulp, Less, Bootstrap, …

Formations associées

Formations Drupal

Formation Drupal Développeur

À distance (FOAD) Du 2 au 4 avril 2024

Voir la formation

Formations Drupal

Formation Drupal Administrateur

Toulouse Du 22 au 24 mai 2024

Voir la formation

Actualités en lien

Image
Encart article DrupalCamp 2024
06/03/2024

Makina Corpus, parte­naire de la Drupal­Camp 2024

Nous sommes fiers d’an­non­cer que Makina Corpus est le spon­sor de la Drupal­Camp à Rennes. Notre expert vous y propose une confé­rence « migrer de Drupal 7 à Drupal 10 ».

Voir l'article
Image
DrupalCon Lille Sponsor
20/10/2023

DrupalCon Lille 2023 : quand Drupal prend (enfin ?) le virage de l'UX

Présentation rapide de sujets ergonomiques discutés lors de la première journée de la DrupalCon Lille 2023

Voir l'article
Image
DrupalCon 23 Encart
14/09/2023

Makina Corpus sponsorise la DrupalCon 2023 à Lille

La DrupalCon 2023 revient en France du 17 au 20 octobre et notre équipe y participe ! Pour cette nouvelle édition de la DruplaCon Fr, Makina Corpus s'engage auprès de Drupal et sponsorise l'événement 2023 à Lille.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus