Créer un thème avec Drupal 8

Surcharger les templates de vue

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Une fois les templates de vue identifiés, apprenez à les surcharger, et donc à personnaliser complètement vos différentes vues.
08:59

Transcription

Nous allons commencer par surcharger le premier niveau. Pour ce faire, dans Templates, vous faites dans vos dossiers - on va bien sûr créer un dossier pour acceuillir nos vues spécifiques, c'est pas du tout obligatoire, mais c'est plus propre - Si on reprends nos conventions de nommage on va surcharger le premier niveau, donc il s'agit de Views-view, je prépare mon nom de fichier ici, ... - - ... nom machine de la vue ... donc c'est mes horloges .... ... - - nom machine de l'affichage, donc avait: page 1 ... ... .html.twig Donc voilà, là j'ai reconstitué le nom mountain plate, donc, je coupe, et je fais ici: nouveau fichier ... Là, on va juste mettre le mot «test» dedans ici comme il s'agit de modifications de fichier, on va aller vider le cache, je vais ouvrir un nouvel onglet pour ça, on efface les caches, ici on rafraichit, Donc on a notre test qui a été pris en compte. Notre nommage de vue 1er niveau a bien fonctionné. Ensuite on va aller récupérer notre fichier de vue, (on veut quand même avoir quelque chose de dynamique...) Donc va ... stag .. template ... Views ... views-view.html.twig .... on récupère ça, et on le colle ici, Ici on a notre template de vue au 1er niveau, ça peut nous servir par exemple, vous avez un pageur, donc si vous avez beaucoup de contenu affiché sur plusieurs pages, vous pouvez très bien coller un 2e pageur au dessus, ou mettre uniquement un pageur au dessus, voilà, ça c'est les modifications qui sont faisables depuis ce template là, sachant que «rows» correspond aux lignes de votre vue. Les lignes seront affichées par cette variable «rows». Donc on vérifie juste rapidement ... on a bien à nouveau notre template qui s'affiche, Alors ici on peut imaginer que comme on a beaucoup de ____ qui s'imbriquent, on souhaite simplifier simplement la structure et l'html, donc on va juste supprimer cette div de 1er niveau, Au niveau de l'affichage, on se rend compte de rien, mais notre code html est dorénavant plus propre. Ici, on va surcharger le 2e niveau, comme avant, on reconstitue notre nom de fichier, donc Views-view - unformatted puisqu'on est dans une liste non mise en forme, comme on a pu le voir ... // le nom machine de la vue ... ... qui est mes horloges, // page 1 pour l'affichage, Là, je ne l'ai pas précisé en premier lieu, mais biein entendu, on ne modifiera que cette vue, et que l'affichage, précisément, de cette vue. Voilà, on se rend dans notre dossier Views ... Donc au niveau de l'organisation, on peut même aller un cran en dessous, on peut faire un dossier, pour la vue les horloges, parce que si vous avez beaucoup de vues, et que vous commencez à surcharger beaucoup de choses, ça va vite être le bordel .... on peut trier par vue, donc encore un niveau en dessous. Donc là, sur le unformatted, on va copoier le code de base, dans un premier temps ... Voilà, on peut très bien ... supprimer cette div ... Ici, on voit qu'il y a bien la boucle qui est faite sur chaque ligne, on rafraichit les caches ... Ici on actualise ... On va aller vérifier ... mais, on a bien pris en compte nos modifications. on nous indique bien que la sortie provient de views-view unformatted mes horloges page 1.html.twig, qu'on vient juste de créer. Et on note effectivement que l'on a plus toutes les div qui s'imbriquent les unes dans les autres. Donc si on veut nettoyer un peu son code html on peut procéder comme ça. Ou, tout simplement, quand vous intégrez une maquette graphique, votre mark-up html doit correspondre exactement à ce que l'intégrateur vous a fourni, donc pour faire coller votre html il va falloir surcharger tous les niveaux de vue. Ensuite, le dernier élément, c'est les champs. Là, on ne va pas surcharger le dernier niveau, si on veut afficher les champs indépendemment les uns des autres, on va surcharger le 3e niveau. Donc là, on répète ... Voilà ... On va dans notre thème, on crée le fichier, on copie notre élément fields ... Ici, ce qu'on remarque c'est qu'on a une boucle faite sur chaque champ, donc sur la variable fields, et ensuite ici on a les séparateurs, on a des wrappers, et ici on a field.element type, et field.label element. En fait, si vous vous souvenez bien, on a configuré ces éléments dans l'administration de la vue. Donc en fait, le type d'élément par exemple, on avait choisi H2 ou H3, il me semble ... on va afficher à cet endroit, notre configuration de vue. ici on peut très bien supposer que on n'en a pas besoin on sait exactement ce qu'on veut faire. En fait, notre fichier va prendre le pas sur la configuration de la vue. Supposons que je veux afficher mon titre dans une div, avec une classe ... title ... Donc on va afficher la variable, Donc on prends fields, sauf qu'au lieu de boucler dessus, on va directement afficher le titre ... et son contenu. Si vous voulez avoir des informations sur le contenu de la variable/le champ, vous retournez en fait sur votre template que vous avez surchargé et vous regardez dans les commentaires. Qu'on on nous précise bien que fields est une liste de champs, chacun contient un contenu, le RAW, donc les données brut, la classe, etc etc. Là on retrouve nos éléments de configuration, qui peuvent être éventuellement réutilisés. La pour l'instant, si on va sur notre vue, on va juste afficher le titre. Donc on a bien effectivement uniquement le titre, qui est bien entouré par notre div classe=title. Voilà. Donc là, on fait la même chose, Si si on connait plus les champs, regardez on survole le lien, et on voit également apparaitre de la même façon qu'on a pu voir appraitre les id d'affichage et de vue, en bas, à gauche, tout à la fin, on voit apparaitre «nothing», c'est nom machine du champ, ici on avait title, comme on a surchargé avant. Donc voilà, fields.nothing ... Ici on retrouve notre vue, avec le format qu'on lui a imposé. ,On a capturé la sortie html des vues et on a généré notre propre affichage. A présent vous savez personnaliser complètement chaque élément des vues, et donc chaque élément de Drupal.

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 !