Une apparence personnalisée

Dans cette partie, nous allons nous intéresser à un tout autre aspect de Drupal: les thèmes (themes) et tout ce qui concerne l'apparence de votre site.

Je suppose que si je vous dis qu'un même contenu peut-être affiché de manière différente, vous pouvez vous le représenter n'est-ce pas ? Par exemple pour un même site, le logo peut-être en haut à gauche ou en haut à droite. Les pages peuvent être écrites en noir sur blanc avec un aspect général bleu futuriste. Au contraire, je peux écrire en marron sur beige avec un aspect parchemin médiéval. Dans les deux cas, le contenu sera le même ! Ce qui change c'est le thème.

 

 

Dans ces exemples, c'est la même page du même site qui est affiché selon trois (simples et pas terribles!) thèmes. Le contenu est le même, l'affichage est différent.

Avez-vous remarqué la barre de recherche dans les exemples au-dessus ? Dans le premier exemple bleu, elle est à gauche du contenu. Dans l'exemple noir du milieu, elle est à droite. Et enfin dans l'exemple orange, elle est carrément en haut à droite, au dessus du menu. Si elle bouge autant, c'est que la barre de recherche est affichée dans un bloc appelé à juste titre 'bloc de recherche' !

 

Voilà, le mot est dit, tout contenu dans Drupal est présenté sous la forme d'un bloc (block) qui sera affecté (ou non) à une région (region) du thème. Le menu, (dans l'exemple le menu principal qui contient deux liens) est affiché dans un bloc de menu principal. Les liens de navigation (menu navigation) sont affichés dans un "bloc de menu navigation". Même le contenu (ici un article) est au sein d'un bloc de contenu qui peut être affecté à une zone particulière.

 

Concrètement, les pages de vos sites seront un assemblage de blocs disposés dans des régions disponibles. C'est le thème qui définit ces régions. Certains thèmes auront de nombreuses régions et seront donc très souples dans leur usage, d'autres le seront moins.

L'un des concepts important à saisir dans Drupal, est la séparation claire à faire en le contenu et son affichage. Nous avons vu que les nœuds sont distingués par différents types de contenu, chaque type étant composé d'un assemblage de champs. Le contenu, c'est la valeur de ce champ. Non seulement il est possible de construire sa page en assemblant des blocs, mais il est également possible de modifier l'apparence de ces mêmes blocs, voir l'apparence de chaque élément ou groupe d'élément de votre site.

 

Un template est un fichier définissant comment un élément du site sera affiché à l'écran : il en détermine l'apparence. Un template est associé à chacun des éléments ou groupe d'éléments de votre site. Le template crée le code HTML qui permettra l'affichage de l'élément à l'écran et sa mise en forme CSS. Pour ceux qui ne comprendraient pas cette dernière phrase, c'est justement le but annoncé de Drupal, vous permettre de créer un site sans connaître le langage informatique. Le template va créer pour vous le code informatique nécessaire pour afficher chaque élément de votre site. Pour votre culture, sachez simplement que Drupal 8 utilise le système de template TWIG et que les fichiers templates ont pour extension .twig.

 

Par défaut, les éléments sont gérés par groupes de même nature. C'est à dire que par défaut, vous aurez un template prédéfini pour toutes les pages. Toutes les pages suivront ce template: il définit par exemple que le logo sera à gauche et que la région "contenu" sera en dessous de la région "menu",... Mais il est possible de surcharger (modifier) ce template pour certaines pages seulement. Par exemple il est possibe de définir un template propre au contenu de type petite annonce et dans lequel il n'y aura pas la région "barre latérale" par exemple. Mieux encore, vous pouvez définir un template pour "la petite annonce numéro 3 de votre site". La seule pour laquelle le logo va être placé à droite !

 

C'est donc cela un template, et il y en a pour tout. Par exemple pour les champs: par défaut, sur une page votre votre site, la valeur d'un champ est affichée sous la forme :

nom du champ : valeur du champ

Donc par exemple sur la page de profil d'un utilisateur on pourra voir :

date de naissance : 30/05/1987

âge : 26 ans

Mais vous pouvez décider que le champ "âge" des utilisateurs sera affiché complètement différemment. Par exemple :

Bon l'exemple ici est d'un intérêt limité, mais c'est une fonctionnalité très utile dans la réalité !!