Installation et modules de Drupal 8
L'installation nous réserve une bonne surprise déjà, plus besoin de télécharger de manière séparée la version française, l'installer s'en charge pour nous (il faut juste créer le répertoire sites/default/files/translations) :
Au delà, c'est classique, nous choisissons l'installation standard. Là vous avez le temps d'aller prendre un café étant donné les 15000 lignes de traduction à insérer en base. Donc un café ou deux plus tard, vous entrez les données de votre nouveau site et vous pouvez aller voir les modules présents sur votre site, comme sur la version précédente, vous trouverez Block, Color, Comment, etc. Blog ou Dashboard ont disparu, ainsi que PHP Filter (dans la philosophie de renforcer la sécurité et d'éviter le bricolage dangereux). Parmi les nouveautés, vous trouverez :
- Breakpoints : permet de définir des points de rupture pour le theming responsive,
- CKEditor : la Rolls des éditeurs riches intégré au core,
- Configuration Manager : à l'instar de Features, cela permet d'exporter/importer de la configuration,
- Divers nouveaux champs : Datetime, Entity Reference, E-mail
- Edit : pour l'édition inline, une grande nouveauté mais dont l'expérience utilisateur reste à tester,
- History : pour historiser les contenus vus par les internautes,
- Migrate : pour migrer les contenus,
- Menu link : pour gérer les entrées de menu, séparées de la gestion même des menus donc,
- Picture : permet d'exploiter l'élément HTML5 du même nom
- Text Editor : une couche d'abstraction d'outils d'édition, comme le module Wysiwyg sous D7
- Tour : afin de créer des guides de site, pas testé mais si c'est comme Boostrap Tour, ça promet !
- Views & Views UI : le top des modules désormais intégré au core
L'architecture du système de fichiers sous Drupal 8
Avant d'aller plus loin, il faut remarquer que l'organisation des fichiers a changé dans D8, avec cette nouvelle architecture :
- core/ : contient le core, la règle numéro 1 du répertoire core est "Vous n'y touchez pas", la règle numéro 2 du répertoire core est "Vous n'y touchez pas"...
- modules/ : c'est là que vous mettrez vos modules
- profiles/ : les profils d'installation
- sites/ : les différents sites, avec leurs fichiers et parmi ceux-ci leurs configurations (oui oui, la config n'est plus base) que vous trouverez par exemple dans le répertoire sites/default/files/config_[UUID] avec deux répertoires active et staging (ça augure de bonnes choses pour les entreprises ça!)
- themes/ : c'est là que vous mettrez vos différents thèmes
Cett architecture est plus naturelle et évite de malencontreusement ajouter des modules au milieu des modules du core.
Premiers pas avec Twig
Nous n'allons pas présenter ce moteur en détail, c'est déjà largement fait ailleurs et nous nous intéresserons plutôt au cas pratique de l'étape de theming dans la réalisation d'un site sous Drupal 8. Quand même, s'il ne faut citer que deux références, alors ce seront la documentation officielle de Twig et un slideshare plutôt bien fait qui explique le choix de Twig pour Drupal 8.
Avec Twig, vous pouvez oublier les print et autre <?php ?> PHP, ils font place à une syntaxe spécifique et codifiée. Par exemple, pour afficher une variable si un test est réussi, nous utilisons
{% if test %}
{# ici un commentaire pour décrire la ligne suivante : affichage de maVariable #}
{{ maVariable }}
{% endif %}Par ailleurs, Twig gère les attributs de manière unifiée entre tableaux et objets, aussi fini les erreurs PHP parce que vous avez tenté d'accéder à un objet comme si c'était un tableau, avec Twig, vous utilisez le point pour accéder à un attribut, comme par exemple pour afficher la région header :
{{ page.header }}Autre chose très intéressante, c'est la possibilité de faire hériter ses templates, c'est bien expliqué sur cette documentation Symfony. L'idée étant de définir un template de base qui pourra être étendu pour particulariser des affichages, par exemple un template communs à tous les noeuds pourra être particularisé pour différents types de noeuds. L'héritage peut être dynamique et conditionné par une variable par exemple, ceci ouvre des possibilités, nous exposerons cela plus avant si nous rencontrons une application dans notre cas.
Le reste, c'est essentiellement de la syntaxe et des "raccourcis" permettant de gagner en simplicité du code (voir les filtres par exemple). Nous ne nous étendons pas plus que ça sur ces aspects techniques et si nous avons oublié un élément essentiel, nous y reviendrons plus tard.
Twig dans le cas d'un thème Drupal 8
Comme c'est souvent le cas, partons du cas où nous avons un thème HTML5/CSS3 déjà découpé. Sous Drupal 7, pour réaliser un thème, il fallait créer plusieurs éléments :
- le fichier montheme.info
- les fichiers de templates, comme par exemple html.tpl.php ou page.tpl.php
- le fichier template.php
- des fonctions de theming, comme theme_link
Sous D8, c'est à peu près la même chose, mais avec des noms différents :
- montheme.info → montheme.info.yml
- template.php → montheme.theme
- html.tpl.php → html.html.twig et page.tpl.php → page.html.twig, la syntaxe indique que ces templates sont des templates HTML gérés par Twig
- theme_link → link.html.twig on remplace donc une fonction par un fichier de template qui pourrait par exemple ressembler à ça :
<a href="{{ url }}" class="{{ attributes.class }}"{{ attributes }}>{{ text }}</a>Ok, c'est bien tout ça, mais les fichiers .yml et .twig, mon éditeur ne me les affiche pas très bien... Pas de panique, si vous utilisez Eclipse, il existe des plugins de support de Symfony et Twig qui vont mettre des couleurs sur tout ça, jetez donc un oeil ici : http://twig.dubture.com/installation/ et vous trouverez tout ce qu'il faut. Et si vous n'utilisez pas (encore) Eclipse... ramenez vous au cas précédent!
Le fichier d'information
A ce stade, nous avons les bases du langage Twig, nos fichiers de base et un environnement adapté pour les éditer. Zoomons un peu plus sur le fichier d'information et le format YAML, car ce format vous allez devoir le connaitre sous D8 puisque c'est dans ce format que résidera toute la config de votre futur site Drupal 8. Pour la référence, vous pouvez aller voir la page Wikipedia consacrée à YAML ou la page de documentation Symfony.
Dans le cas des thèmes, les deux points intéressants à retenir sont surtout ceux-ci :
- un couple clé/valeur est indiqué par cle: valeur (attention à l'espace qui est nécessaire !),
- l'indentation, sous forme d'espaces, signale une arborescence,
- les éléments de listes, ou collections, sont figurées par un tiret suivi d'un espace.
Hormis la syntaxe, la clé ckeditor_stylesheets apparait et permet de désigner les fichiers CSS qui seront utilisés par l'éditeur CKEditor.
Les informations présentes dans la version Drupal 7 sont toujours présentes ici, et seule la mise en forme est différente. Voici par exemple ce que nous obtenons dans notre cas :
name: Mon Thème
type: theme
description: Theme simple pour notre site de démo
version: VERSION
core: 8.x
engine: twig
# CSS
# -----------
stylesheets:
all:
- css/bootstrap.css
- css/style.css
- css/tahiticlic.css
ckeditor_stylesheets:
- css/ckeditor.css
# Régions
# --------------
regions:
navigation: Navigation
searchbox: Boite de Recherche
header_social: Header Social
header_newsletter: Header Newsletter
slider_left: Slider Left
slider_right: Slider Right
intro_left: Intro Left
intro_right: Intro Right
sidebar: Barre latérale
content_top: Content top
content: Content
content_bottom: Content bottom
footer: Footer
copyright: Copyright
social: Social
# JAVASCRIPTS
# -----------
scripts:
- js/js/modernizr.custom.63321.js
- js/jquery.elastislide.js
- js/bootstrap.js
- js/placeholder.js
- js/imagesloaded.pkgd.min.js
- js/masonry.pkgd.min.js
- js/jquery.swipebox.min.js
- js/farbtastic/farbtastic.js
- js/options.js
- js/plugins.js
- js/tahiticlic.js
Ce qui donne sous Eclipse avec l'extension qui va bien :
Les subtilités
Pour les blocs, si vous ne souhaitez pas de titre, c'est bien plus simple qu'avant et il suffit de décocher "Afficher le titre".
Au départ, vous allez créer vos différents fichiers et après avoir réglé les petites erreurs de typo, ça va fonctionner. Et là, vous allez vouloir modifier une zone d'affichage par exemple, facile, il suffit d'éditer le fichier twig. Oui mais... si vous faites juste ça vous ne verrez pas de changement et vous serez obligés de vider le cache pour que les modifications prennent effet. C'est dû au fait que Twig utilise lui aussi un système de cache et donc pour le développement, il faut se mettre en mode debug, pour ce faire dans le settings.php décommenter la ligne :
$settings['twig_cache'] = FALSE;
Vous pouvez également mettre en mode debug, ce qui aura l'avantage de commenter le code source, indiquant notamment les templates utilisés :
$settings['twig_debug'] = TRUE;
Et voici alors ce que cela donne dans le source, chose très intéressante, les suggestions de template sont indiquées :
En résumé
Voilà, rien d'insurmontable pour créer un thème Drupal 8, si ce n'est le formalisme qui change un peu. Le plus grand changement est certainement dans les fonctions de template qui deviennent des fichiers et une remontée des traitements dans la phase de preprocessing. Mais une fois ces deux points en tête, il ne sera pas plus compliqué de thémer vos sites sous Drupal 8.
Prochain épisode, la gestion du contenu sous Drupal 8.