TYPO3 : ​Intégration avec FLUID Template

Afficher différentes pages

Testez gratuitement nos 1326 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous aurez très souvent besoin de plusieurs vues pour les pages de votre site. Définissez ici différents templates (1 colonne, 2 colonnes, etc.) et liez-les au backend.
04:55

Transcription

Après avoir vu comment modifier le conteneur global de notre site avec les layouts, voyons maintenant comment modifier la disposition de nos contenus grâce aux templates. Pour cet exemple, je vais générer un affichage différent pour ma page d'accueil et mes sous-pages. Donc pour ça, je vais commencer par créer un nouveau template. Donc, clic droit, Nouveau fichier... ... que je vais appeler « Home.html ». Dedans, je vais récupérer le contenu de mon template par défaut... ... Ctrl + C... ... que je vais coller dans mon template Home... Donc, je supprime la section TitleOnly qui n'est pas utile pour cet exemple. et nous allons maintenant partir du principe que nous avons besoin de deux colonnes pour la page d'accueil. Donc, je vais créer une première colonne... ... que je vais faire flotter à gauche... ... avec une taille de 50 %. Je vais également lui appliquer une couleur de fond pour bien la différencier. Voilà. Donc, Ctrl + D pour dupliquer cette colonne. ... « Colonne droite »... ... et dans la seconde colonne... ... je vais mettre le texte... ... « Colonne gauche ». Donc, je vais ajouter du texte dans ma colonne de gauche... ... et je vais faire de même... ... pour la colonne de droite. Voilà, je sauvegarde. Maintenant que j'ai créé mon template, je vais devoir dire à Typo3 quel template utiliser. Donc, rappelez-vous que lorsque nous avons initialisé notre premier template Fluid, nous avions dit à Typo3 d'utiliser le template par défaut. Donc, nous allons maintenant devoir lui dire d'utiliser le template nommé Home. Donc pour ça, nous allons retourner dans la configuration de la page. Donc, dans Configuration/TypoScript/Configuration... ... page.setupts... ... et ici, je vais simplement modifier le nom du template à utiliser. Donc, « Home », je sauvegarde. Je peux maintenant aller voir le résultat. Je vide les caches, et je recharge. Voilà, je vois bien apparaître mes deux colonnes. Donc, maintenant vous allez me dire : « oui, mais en faisant ça, j'ai modifié l'apparence de toutes mes pages et pas uniquement la page d'accueil. » Donc, effectivement, voyons maintenant comment associer un template à un affichage backend. Donc , j'ai pour cela créé deux types d'affichages backend. Donc, un affichage deux colonnes pour la page d'accueil, et un affichage une colonne pour les sous-pages. Donc, si je me rends sur ma page d'accueil en mode liste, je vais retrouver mes deux backend layouts, donc, Home et Default, que je vais devoir associer à mes templates. On notera bien ici les identifiants de ces backend layouts. Donc, le backend layout par défaut a l'identifiant 1, et le backend layout Home a l'identifiant 2. Donc, je vais maintenant retourner dans mon TypoScript, et modifier la sélection de mon template par une sélection conditionnelle. Pour cela, je vais utiliser un petit snippet. Donc, vous retrouverez ce snippet dans les fichiers d'exercices. Et donc, je vais remplacer mon template par ce snippet. Ce morceau de TypoScript va simplement regarder de manière récursive quel est l'identifiant du backend layout utilisé. Si aucun identifiant ne correspond à la sélection, il va afficher le template par défaut. Donc, je vais maintenant ajouter à la sélection mon template Home. Je reprends pour cela l'identifiant de mon template qui est 2... ... et j'utilise un objet TEXT... ... « 2 = TEXT »... ... et « 2.value »... ... « = » le nom de mon template. Je sauvegarde. Je peux maintenant aller voir le résultat. Je vide les caches, et je vais afficher ma page d'accueil. Donc, sur ma page d'accueil, je retrouve bien mes deux colonnes, et si j'affiche une sous-page... ... ici, je retrouve bien une seule colonne. Vous pouvez maintenant simplement créer d'autres affichages backend et les associer à un template en ajoutant les lignes TypoScript correspondantes. Par exemple, « 3 = TEXT »... ... et « 3.value »... ... « = 3Colonne ». Il vous suffira maintenant de créer le template associé et de sélectionner une nouvelle apparence pour vos pages.

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
Date de parution :16 juin 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 !