Créer un thème avec Drupal 8

Ajouter une librairie pour une page spécifique

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les librairies (comme les JS) ne sont pas forcément utiles sur toutes les pages de votre site. En utilisant une méthode de préprocess, vous allez pouvoir définir sur quelles pages ajouter votre librairie.
07:08

Transcription

Lors de l’intégration et de la création d'un thème il peut être utile, dans certains cas, de vouloir ajouter des librairies uniquement sur certaines pages ou sur certains types de pages. Donc, ici on va supposer qu'on souhaite ajouter un css particulier pour les pages de type nœud. On est sur une page globale et si on va ici, on est sur une page de type nœud. Pour ajouter des css à un type de page en particulier, il va falloir créer ce qu'on appelle les fonctions de préprocess et ces fonctions de préprocess seront stockées dans un fichier qui s'appellera formation.theme. On prend le nom du thème avec l’extension points thème derrière. Pour créer le fichier on fait nouveau fichier, on l'appelle formation.theme. Voilà. Ce fichier est un fichier php et on va pouvoir y stocker toutes sortes de logiques. En fait les fonctions de préprocess sont bien des fonctions php qui commencent toujours par le nom du thème-- --puis preprocess-- --et finalement, le nom du hook à utiliser. Ici on va utiliser le hook node et dollar variables. Voilà, on termine juste la fonction. Pour repérer les différents hook, ce qu'on peut faire, c'est aller voir dans core, themes, bartick, bartick.theme. On a, par exemple, l'HTML pour gérer toutes les pages, donc le global ; pour gérer le title, uniquement pour la page maintenance, on trouve des exemples. On peut gérer des fonctions de préprocess uniquement pour les blocks, etc. En fait, dans les différents thèmes qui sont inclus dans core, vous pouvez vous aider et pouvez facilement trouver des exemples qui vous aideront. On va ajouter variables, on va attacher une librairie. On ajoute un nouvel élément au tableau. On voit ici, grâce à la variable dollar, que ce tableau de variables est passé en référence. En fait, on ne va pas faire ça puisque sinon on irait complètement effacer les anciennes librairies qui auraient éventuellement été ajoutées par d'autres modules ou thèmes. On va effectivement ajouter au tableau, on fait formation/node-css. Ici, qu'est-ce qu'on vient de faire ? On vient d'ajouter une librairie, uniquement pour les pages de type node. Notre librairie, on l'a bien ajoutée, on ne l'a pas encore créée. On va dans notre fichier librairie, on va faire node-css. Une fois qu'on a importé une première feuille de style, il est facile de créer d'autres librairies et d'en ajouter d'autres, il suffit de copier. Voilà, on a ajouté css/node.css. Maintenant, il faut encore créer le fichier. Donc nouveau, feuille de style en cascade css, node.css, ok. On supprime les commentaires. Là ce qu'on va faire, simplement pour voir que cela a bien fonctionné, on va à nouveau aller modifier le core et, dans le core, on va rajouter une bordure. Voilà une assez grosse bordure rouge. Pour vérifier que ça fonctionne bien, on efface les caches. On rafraîchit ici. Voilà, on a notre bordure rouge qui apparaît et vous allez noter que si on va sur notre page d’accueil, on n'a pas cette bordure rouge qui s'affiche. Donc c'est vraiment à utiliser le plus possible pour ne pas avoir des fichiers complètement inutiles sur certaines pages. Il vous sera même, dans la fonction de préprocess, possible d'ajouter une logique. Pour commencer, ce qu'on peut chercher à faire, c'est afficher le contenu de variables pour avoir toutes les informations et, après, pouvoir y appliquer la logique souhaitée. On va utiliser la méthode dsm. On a deux méthodes de debug qui sont dsm et krumo qui sont liées au module devel. Cela revient exactement même que kint. Notez que kint est utilisé dans les templates, dsm et krumo sont utilisés directement dans le code php. Krumo permet d'afficher à l'écran n'importe quelle variable. Dsm, c'est la même chose, mais il va l'afficher dans la zone de message. En fait, si une sortie directe est impossible, dsm va afficher la variable dès que possible. En fait, dsm est à préférer. On va afficher notre valeur de variables. Voilà, donc ici on rafraîchit. On nous sort bien un tableau. On a un tableau qui contient plusieurs éléments. On retrouve nos différentes valeurs, vous pouvez aller inspecter complètement les différents éléments que vous trouvez dans ce tableau. On a les valeurs, on a les méthodes disponibles etc, comme on a pu avoir avec kint dans les templates. Donc, après avoir inspecté le contenu de variables, on sait qu'on doit aller chercher dans n id value pour récupérer la valeur du nœud. Il manque un petit morceau : node, voilà forcément. On a bien la valeur quatre qui apparaît. On peut imaginer toutes sortes de logiques, ici on va faire une logique qui n'est pas forcément utile, mais on va faire : si la valeur est égale à 4, alors seulement dans ce cas, on va ajouter la librairie node-css et donc, par conséquent, afficher cette fameuse bordure rouge. Ici on rafraîchit ; la bordure rouge doit logiquement toujours s'afficher, ce qui est bien le cas. Maintenant, il faut aller voir un autre nœud. On va faire plus simple, on va taper directement ici un identifient de nœud, donc on a le node 3 et on voit bien qu'on n'a pas la bordure rouge, donc notre logique-là a bien été appliquée.

Créer un thème avec Drupal 8

Créez votre propre thème personnalisé Drupal avec Twig, le nouveau moteur de template. Gérez les ressources, personnalisez Drupal de façon avancée grâce aux vues, etc.

1h48 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :17 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !