TYPO3 : ​Intégration avec FLUID Template

Intégrer une en-tête et un pied de page

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Intégrez maintenant l'en-tête et le pied de page de votre site. Vous allez ainsi vous servir des partials.
09:36

Transcription

Nous allons maintenant passer à l'intégration du template et du pied de page de notre site. Pour cela, nous allons créer deux nouveaux partials, dans l'onglet Resources/Private/Partials, et dans le dossier Area, je vais créer un partial... ... Menu... ... .html... ... et un partial... ... Footer... ... pour pied de page... ... .html. Je vais ensuite retourner dans mes templates statiques, et copier le code de mon menu. Donc, vous pouvez vous rendre dans le template Content comme dans le template Home puisque le menu et le pied de page sont exactement identiques. Donc, je vais copier ici mon entête qui correspond à mon menu, et je vais le coller dans mon partial Menu.html. Je sauvegarde. Je vais maintenant faire de même pour le pied de page. Donc, je vais descendre dans mon template, et je vais copier ici le pied de page, et je le colle donc dans mon partial pied de page. Je sauvegarde. Pour l'instant, nous allons utiliser des données statiques et vérifier si l'affichage est correct. Rendons-nous maintenant dans notre layout. Donc, layout Default, et appelons les deux partials Menu et Footer. Donc, pour cela, nous utilisons le viewhelper « f:render »... ... « partial=Area »... ... puisque je me trouve dans le dossier Area... ... « /Menu »... Donc, je mets bien évidemment le menu au-dessus de ma section template Je vais faire de même pour le pied de page que je vais mettre en dessous de ma section Templates. ... « f:render »... ... « partial=Area »... ... « /Footer »... Je vais maintenant sauvegarder, et aller vérifier le résultat. Donc, je recharge ma page, et je vois bien apparaître ici mon menu et mon pied de page. Je remarque ici que mon Footer ne s'affiche pas exactement comme il le devrait. Donc, je vais vérifier dans le template statique Content, et je vois effectivement que le Footer est censé prendre moins de place. Il doit donc manquer un conteneur. Je vais donc retourner vérifier dans le template statique, et je vais repérer mon Footer. Effectivement, je vois ici une balise fermante qui n'apparaît pas dans mon template Typo3. Je vais maintenant regarder où s'ouvre cette balise. Donc, je remonte et elle s'ouvre ici. Donc, juste avant le début de mes contenus et juste après mon menu. Je vais donc récupérer cette balise, et la copier dans mon layout, entre mon menu et ma zone de contenu. Je vais fermer la div, et je réindente ensuite mon code. Je peux maintenant sauvegarder, et retourner vérifier l'affichage. Votre footer s'affiche maintenant correctement. Donc, ces deux éléments ont pour le moment été intégrés de manière statique. Voyons comment les rendre dynamiques. Commençons donc par le menu principal. Je vais retourner dans mon partial de menu, et repérer la partie qui concerne l'affichage de mes pages. Donc visiblement, je vois ici « Accueil », « À propos » et « Contact ». Donc, je vais essayer de supprimer cette partie pour voir si mon menu disparaît bien. Je sauvegarde. Je revérifie mon affichage. Effectivement, c'est bien ce menu. Je vais donc devoir remplacer ce morceau de code HTML par une librairie TypoScript qui va générer un menu. Donc, pour cela, j'ai au préalable créé un menu en TypoScript, qui se trouve dans le dossier TypoScript/Library, et je trouve ici mon menu principal. C'est donc cette librairie que je vais devoir inclure dans mon fichier template. Je copie donc le chemin de cette librairie, puis je retourne dans mon fichier template, et je vais remplacer ici ce code, par l'appel de mon menu. Pour cela, je vais utiliser le viewhelper cObject qui va me permettre d'appeler un objet TypoScript... ... avec la propriété « typoscriptObjectPath= »... ... le chemin de ma librairie. Je ferme la balise, et je sauvegarde. Nous allons maintenant vérifier l'affichage complet. Je recharge. Et voilà, j'ai maintenant un menu dynamique. Je peux donc cliquer sur les différentes pages et naviguer dans mon site. Il reste maintenant un élément à rendre dynamique dans ce menu. C'est cet élément Formation qui va être le titre de mon site. Je vais donc repérer cet élément dans mon template. Il se trouve ici. Je vois ici que c'est un lien et j'aimerais que ce lien pointe sur ma page d'accueil. Je vais donc utiliser le viewhelper « f:link »... ... « f:link »... ... et je veux que ce lien pointe sur une page de mon instance Typo3... ... donc, je vais ajouter « .page ». Ici, je vais lui donner l'identifiant de la page sur laquelle je veux qu'il pointe, donc, « page.uid= »... ... et maintenant, je vais vérifier l'identifiant de ma page d'accueil. Je vois que c'est l'identifiant 1. Je vais donc saisir 1. Je peux maintenant ajouter la classe navbar-brand à mon lien... ... puis saisir le titre « Formation ». Je sauvegarde, et je vais vérifier l'affichage. Donc, je recharge, et je vois bien ici que mon lien pointe sur la page 1. Nous pouvons maintenant passer au pied de page dans lequel nous allons intégrer le copyright, un petit menu, et ce lien pour retourner en haut de page. Donc, rendons-nous dans le partial Footer, et la première chose que je repère ici, c'est le texte « Retourner en haut ». De manière générale, vous allez devoir remplacer tous les labels statiques par des labels de langues. Ceci n'est bien sûr pas obligatoire, mais ça vous permettra ensuite de traduire votre site très simplement. Donc, pour cela, je vais commencer par créer mon label de langue. Donc, je vais me rendre dans le dossier Resources/Private/Language, et je vais modifier le fichier locallang.xlf. Ici, je repère une première traduction. Donc, que je vais modifier puisque c'est une traduction d'exemple. Je vais donc remplacer son identifiant par « go_to_top »... ... et ici, le label « Go to top ». Par défaut, on va utiliser l'anglais. Je vais donc sauvegarder, récupérer ce morceau de code, et aller maintenant dans mon fichier de langue française. Je vois ici le langage source et le langage cible. Je colle donc, mon label, et je vais ajouter le langage cible... ... donc que je vais appeler ici « Retourner... ... en haut ». Je peux maintenant supprimer la traduction d'exemple. Je sauvegarde et je retourne maintenant dans mon fichier Footer.html. Ici, je vais remplacer mon label par un viewhelper de traduction. Donc, ce viewhelper s'appelle « f:translate ».. Il faut lui donner ici la clé de ma traduction. Donc, je vous rappelle ici que nous l'avons appelé « go_to_top »... ... ainsi que l'extension dans laquelle il va devoir trouver le fichier de langue... ... donc, « extensionName="skin_formation" ». Je sauvegarde, et maintenant je vais aller vérifier l'affichage. Donc, je vois ici que rien n'apparaît. C'est normal puisque par défaut les fichiers de langues sont en cache. Nous allons donc nous rendre dans le backend de Typo3, pour vider complètement les caches. Donc, dans le module Install, dans Important actions, Je vais cliquer sur Clear all cache. Je vais maintenant recharger ma page, et je vois bien apparaître mon label. Vous pourrez ensuite intégrer de la même manière le copyright, mais voyons maintenant comment ajouter ce menu. Donc, j'ai également créé un menu par défaut qui va s'appeler footer. Il va donc suffire d'appeler cette librairie dans mon partial footer. Je vais donc simplement remplacer ces deux liens... ... par le viewhelper « f:cObject »... ... avec la propriété « typoscriptObjectPath »... ... « ="lib.menu.footer" ». Je ferme ma balise, et je peux sauvegarder. Nous allons maintenant vérifier l'affichage. Je constate que mon menu est maintenant dynamique puisque j'arrive sur la page id 6 ainsi que la page id 7. Pour vérifier, je vais également modifier mon backend. Donc, je vais ajouter une page dans le menu, que je vais appeler Test. J'active cette page. Et je recharge. Je vois bien ici apparaître ma page de test. C'est terminé. Vous avez maintenant intégré votre entête et votre pied de page.

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 !