TYPO3 : ​Intégration avec FLUID Template

Comprendre les templates, les layouts et les partials

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez le réel intérêt de FLUID avec les templates layouts et partials. Grâce à ces méthodes, gagnez du temps et évitez les redites de code.
07:38

Transcription

Les templates, layouts et partials vont vous permettre plusieurs choses. Le premier point va être de pouvoir fragmenter votre site en plusieurs sous-parties. Ces sous-parties vont être dynamiques et réutilisables grâce aux partials Le second point va concerner les modes d'affichage de votre site. Grâce aux templates et layouts, vous allez pouvoir réaliser différents modes d'affichage. Par exemple, vous allez pouvoir réaliser un template composé d'une zone de contenu avec un menu à droite, puis un second template composé de deux zones de contenu, un troisième template composé de trois zones de contenu, etc. Vous l'avez compris, les possibilités sont infinies. Voyons maintenant comment tout ça s'organise. Dans un premier temps, vous avez le layout. Donc, le layout correspond à la zone située entre les balises body début et fin de votre fichier HTML. Il va donc encadrer tout le contenu de votre site. Ensuite, c'est le template qui va venir se greffer au layout. Ce template va contenir vos différentes zones de contenu. C'est lui que nous allons pouvoir modifier afin d'obtenir différents modes d'affichage. Une colonne, deux colonnes, trois colonnes, etc. Par dessus tout ça vont venir s'ajouter différents partials. Ces partials vont être des morceaux de code réutilisables partout dans vos templates et layouts. Ils peuvent, par exemple, contenir un menu principal, un pied de page ou encore un menu secondaire. Maintenant que vous avez compris la théorie, passons à la pratique. Donc, nous avions défini tout à l'heure le chemin vers nos templates. Nous allons faire de même pour les layouts. Donc, « layoutRootPaths.10 = »... ... le chemin vers mes layouts... ... « EXT:skin_formation »... ... « / »... ... « Resources »... ... « /Private »... ... « /Layouts ». Et je fais de même pour les partials... ... « /Partials ». Donc, j'ai oublié ici le « .10 ». Voilà, donc, je sauvegarde. Et je vais maintenant pouvoir créer mon premier layout. Donc, je vais faire clic droit sur le dossier « Nouveau fichier »... ... et je vais l'appeler « Default »... ... puisque ça va être mon layout par défaut, « .html ». Donc, je vais mettre ici pour l'exemple... ... une balise div... ... avec un style... ... « background:red »... ... et dans cette balise div, je vais appeler une section de mon template. Donc, je vous expliquerai par la suite ce que sont exactement les sections. Donc pour cela, je vais faire un « f:render »... ... « » « section »... ... « = », et encore une fois « Default », puisque je vais créer une section par défaut. Voilà, je sauvegarde. Donc, tout ça est sympathique. seulement, j'appelle ici une section qui n'existe pas dans mon template. Donc, je vais tout de suite allez créer cette section. Donc, je retourne dans mon template, et je vais encadrer tout mon contenu par une section. Je tape « f:section »... ... « » « name », « = »... ... et donc, je l'ai appelé « Default »... ... et je referme la balise. On va indenter un petit peu tout ça. Voilà. Je peux sauvegarder. Je vais maintenant aller voir ce qu'il se passe en frontend. Donc, comme d'habitude, je vide les caches. Je recharge la page. Et là, rien ne s'affiche, pourquoi ? Donc, ce qu'il faut savoir, c'est que c'est le template qui est appelé en premier, ensuite, ça va être le layout, et donc, je vais devoir dire à mon template quel layout utiliser. Donc, pour cela, je vais ajouter l'instruction... ... « f »... ... « : »... ... « layout »... ... « name »... ... « = »... ... « Default »... ... et je sauvegarde. Je peux maintenant retourner voir mon frontend. Je vide les caches, et j'actualise. Voilà, mon template apparaît avec un background rouge. Donc voici, pour résumer, le processus qui va être appliqué. Donc, le template va être appelé en premier, Typo3 va repérer l'instruction « f:layout name="Default" ». Il va donc directement se rendre dans le layout Default, puis ici, il va trouver l'instruction de rendu « section="Default" ». Il va donc rendre la section de mon template qui va s'appeler Default. Et donc là je retourne dans mon template, et je retrouve la section Default. Donc, je vais vous montrer maintenant l'intérêt que peuvent avoir les layouts. Pour cela, je vais définir un nouveau layout. Je vais simplement copier mon layout par défaut, Ctrl + V pour le coller dans le dossier, et je vais l'appeler Green puisque j'aurai un background vert, cette fois. Ensuite, je vais simplement modifier le background. Voilà. Je sauvegarde, et je vais retourner dans mon template, et modifier le nom du layout à utiliser. Je sauvegarde, et je retourne sur mon frontend. Je vide les caches, et je recharge. Et voilà, la couleur de mon background a changé. Donc, comme vous le voyez, les layouts vont vous permettre de modifier l'apparence globale de votre site. Nous allons maintenant passer aux sections. Donc, je vous en ai parlé tout à l'heure, mais je n'ai pas détaillé. Donc, reprenons. Nous appelons ici la section par défaut de notre template, mais je peux par exemple vouloir afficher uniquement un titre et un sous-titre. Donc, j'appelle ici la section Default de mon template, mais je peux avoir envie d'afficher un mode légèrement différent de mon template sans pour autant avoir à le redéfinir complètement. Je vais donc retourner dans mon template et créer une nouvelle section... ... que je vais nommer... ... « TitleOnly »... ... titre seulement... ... et dedans, je vais uniquement intégrer mon titre. Donc, je copie, et je sauvegarde. Maintenant, je vais dire à mon layout de ne plus utiliser la section Default, mais d'utiliser la section TitleOnly, et je sauvegarde. Je vais maintenant retourner dans mon layout, et lui dire d'utiliser la section TitleOnly. Je peux sauvegarder et retourner sur mon frontend. Je vide les caches, et je recharge. Voilà, ma page affiche maintenant uniquement un titre.

TYPO3 : ​Intégration avec FLUID Template

Apprenez à intégrer avec FLUID, le langage officiel de templating de TYPO3. Passez de la méthode classique des markers vers FLUID, et abordez les bonnes pratiques.

1h36 (24 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
TYPO3 6
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :16 juin 2016
Durée :1h36 (24 vidéos)

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 !