Création d’un thème pour Drupal 8

Aujourd’hui, présentation d’un thème pour Drupal 8. C’est mon premier thème sur ce CMS et il est basé sur Bootstrap pour être responsif. Le but est de faire une petite présentation rapide de ce qu’il contient et comment l’utiliser. Il m’a permis de tester la dernière version de cet excellent CMS et de travailler avec Twig, le moteur de template PHP utilisé également dans Symfony.

Vous pouvez télécharger le code du thème sur ce dépôt Git Hub.

Fichier de configuration

Le fichier de configuration du thème est le fichier hugo.info.yml. C’est là que sont indiquées les données principales relatives au thème :

• le nom du thème,
• le thème parent (je pars pour ce thème du thème standard de Drupal 8 Classy)
• la version de Drupal compatible,
• les librairies : les fichiers (CSS et/ou Javascript) nécessaire au thème et qui seront chargés sur l’ensemble du site,
• les régions (zone où ils sera possible d’ajouter du contenus : blocs, contenu des pages, menus…).

Fonctionnalités

Voici une listes des éléments que j’ai créé sur mon site test en utilisant, donc, les templates Twig et Drupal :

• une section blog qui remontent les articles (utilisation du module Views, désormais intégré au coeur de Drupal depuis la v8)
• des catégories pour mes articles (les catégories sont une nouvelle taxonomy Drupal)
• un bloc remontant les articles récents (utilisation de Views en filtrant avec mon champ catégories)
• un type de contenu multimédia : en fait un simple article avec la possibilité d’ajouter une série d’images quseront affiché dans un diaporama (le diaporama est un caroussel Bootstrap)
• utilisation des contenus livres, pour créer des séries de pages (pour un tutoriel par exemple)
• une page d’accueil qui affiche des blocs personnalisé et le dernier article paru
• la possibilité pour les articles de changer l’image d’entête. Un champ entête est ajouté au type de contenu article et le template Twig se charge de récupérer l’image et l’afficher (sur ce point pas sûr que ce soit la meilleure méthode qui soit utilisé).

Arborescence

L’organisation des fichiers du thème est très simple :

• css : les fichiers CSS à modifier pour changer l’apparence du thème
• fonts : les fichiers de polices utiliser (glyphicons de Bootstrap notamment)
• images : les images utilisées dans le thème (simplement des images de fond pour les entêtes des pages, page d’accueil et blog)
• js : les fichiers Javascript (Bootstrap, jQuery et le fichier d’initialisation du caroussel, appelé seulement sur les pages contenant un diaporama)
• templates : les fichiers twig que j’ai créé pour mon thème

Intégration

C’est mon premier thème et certains éléments pourraient certainement être mieux intégrés (notamment dans les templates Twig). Comme Drupal vient de sortir dans une première version, il est encore tôt et beaucoup de modules ne sont pas encore portés pour Drupal 8, donc certains éléments que j’ai géré via des blocs et les templates de pages auraient certainement pu être créés avec des modules. Je pense notamment au modules Panels, qui sera bientôt porté sur Drupal 8 et qui permet de créer des affichages personnalisé pour les pages avec plein de conditions, de filtres et de contextes différents.

Conclusion

C’est un premier essai qui a été concluant pour moi avec Drupal 8, il manque bien sûr encore de nombreux modules nécessaires, mais la flexibilité de l’outil, la facilité d’intégration et de debuggage d’un thème avec Twig sont de sérieux atouts.

Drupal n’est pas aussi simple et rapide à mettre en place que WordPress, qui fera l’affaire dans bien des cas (site vitrines, site brochures, blogs…).

Mais, si ‘on veut disposer d’un outil flexible pour créer des contenus personnalisés (autre que le standard page/article de WordPress), si on veut intégrer des fonctionnalités avancées (interfaçage avec d’autres applications par exemple) et que le site nécessite une infrastructure solide (beaucoup de visites), Drupal est largement devant.