MINI TUTORIEL : Mise en place d’un template simple avec TemplaVoilà.

Sommaire

1 – Créer un template HTML simple	2

2 – Uploads	2

3 – Mettre en place les prérequis :	2

a) Aller dans le module « Extension Manager » et installer les extensions nécessaires :	2

b) Créer un gabarit dans la page home ou root ou première page du site :	4

c) Mettre le TypoScript suivant dans le gabarit créé ci-dessus :	6

d) Indiquer que vous allez utiliser CSS Styled Content pour l'affichage :	6

e) Lier la page root qui contient le gabarit et la page qui contient les objets DS et TO de TemplaVoilà :	7

4 – Lier le template HTML avec TemplaVoilà :	9

a) Aller dans fileadmin ou fichier :	9

b) Cliquer pour faire apparaître le menu contextuel sur le fichier HTML :	9

c) Vous arrivez sur la fenêtre de mapping :	10

5 – Mapping des zones avec TemplaVoilà :	10

a) Créer le map CO root :	10

b) Créer une première zone :	12

c) Créer une zone de contenu :	16

d) Créer une zone TypoScript Object path :	16

6 - Enregistrer le template	17

a) Cliquer sur SAVE pour charger l'ensemble du template avant de l'enregistrer :	17

b) Après avoir cliqué sur « SAVE », une nouvelle fenetre apparaît : vous allez pouvoir créer le template :	18

7- Mapping des tag du header de la page HTML	18

8- Enregistrement de la Data Structure et du Template Object	18

9- Lier les templates TemplaVoilà à une structure de page Typo3	18

1 – Créer un template HTML simple

Créer un template HTML simple avec peu de tableaux imbriqués, en utilisant les balises préconisées par le W3C, le XHML et en respectant les standards d'accessibilité. La feuille de style CSS associée doit aussi être réalisée préalablement.

2 – Uploads

Uploader dans fileadmin ou dans un répertoire de fileadmin le fichier HTML.

Pour se faire, vous avez deux possibilités :

Passer par Typo3

Passer par votre FTP ou FSCP

3 – Mettre en place les prérequis :

a) Aller dans le module « Extension Manager » et installer les extensions nécessaires :

1- Outils : Gestionnaire d'extension :

2- Se connecter au serveur d'extension monde TER (Typo3 Extension Repositery) :

3- Rechercher les extensions :

Static info tables

CSS styled Content

TemplaVoilà

Puis les installer en cliquant sur le lien :

Exemple de l'installation d'une extension :

Une fois les extensions installées, vous devez avoir dans « Loaded extensions » :

Les extensions suivantes disponibles :

b) Créer un gabarit dans la page home ou root ou première page du site :

Passer en mode list :

Créer un nouvel enregistrement de type gabarit :

Ensuite vous obtenez la fenêtre de création :

c) Mettre le TypoScript suivant dans le gabarit créé ci-dessus :

d) Indiquer que vous allez utiliser CSS Styled Content pour l'affichage :

e) Lier la page root qui contient le gabarit et la page qui contient les objets DS et TO de TemplaVoilà :

1 – Créer une page de type « SysFolder » ou « Dossier Système » :

2 – Ajouter cette page dans le champ « General records » ou enregistrements généraux :

Une fois la page « Sysfolder » ou « Dossier Système » créée, accéder au header de la page root :

Puis spécifier les enregistrements généraux :

Et ensuite lier cette page :

Vous allez ensuite avoir :

4 – Lier le template HTML avec TemplaVoilà :

a) Aller dans fileadmin ou fichier :

Puis aller dans le répertoire où vous avez posté votre fichier template HTML :

b) Cliquer pour faire apparaître le menu contextuel sur le fichier HTML :

Puis cliquer sur l’option TemplaVoilà :

c) Vous arrivez sur la fenêtre de mapping :

5 – Mapping des zones avec TemplaVoilà :

a) Créer le map CO root :

1- Cliquer sur le bouton MAP :

2- Une fenetre apparaît avec le fichier HTML et toutes les balises HTML, cliquer sur le « body » pour spécifié à TemplaVoila le point de démarrage du template :

3- Après avoir cliquer sur la balise « body », spécifier de quel manière on travaille : ici pour le root, on souhaite travailler dans l'ensemble du code HTML qui est compris entre les balises « body » avec inclusion des tags HTML :

4- Cliquer sur le bouton Set, pour construire le mapping :

Une fois le mapping root créé, on va pouvoir créer les différentes zones de contenu.
Vous devez obtenir la ligne suivante apres création de « la zone root » :

b) Créer une première zone :

1- Spécifier un nom de zone :

2- Cliquer sur «Add» pour ajouter cette nouvelle zone et une nouvelle fenêtre apparaît :

3- Complèter :

- Mapping Type : choisir si votre zone est un élement classique, un conteneur d'élement classique ou un attribut :

Dans un premier temps nous allons créer une zone simple de type « Element »

- Titre: donner un titre à la zone : donner un titre qui est en rapport avec la zone car ensuite c'est ce nom qui sera utilisé pour le champ dans les formulaires de saisie de l'utilisateur final.

- Mapping Instruction : résumé explicatif de la zone, idem au titre.

- Sample Data: résumé pour la prévisualisation du template
et des zones Editing Type : type de la zone (il existe plusieurs types)

Pour cette première zone nous allons utiliser le type Plain input field,
qui permet de faire un champ texte simple.

- [Advanced] Mapping rules : règles de mapping

Deux règles sont disponibles :

*:inner : permet de se placer entre les balises mais elles ne sont pas excluse. Tout ce qui se trouve entre les balises est supprimer par le contenu qui sera positionné.

*:outher: idem mais les balises sont exclues, celles-ci et tout ce qui se trouve entre, sera remplacé par le contenu.

Pour notre première zone, on utlisera la règle *:inner :

4- Ajouter cette zone, puis la mapper avec le template HTML :

5- Comme pour la zone root sélectionner la zone de contenu où vous souhaitez voir apparaître votre contenu :

Le carré rouge indique la zone et le rond le clic à effectuer pour spécifier cette zone. Après avoir sélectionné la zone, cliquer sur le bouton set afin de charger cette nouvelle zone créée.

c) Créer une zone de contenu :

L'opération est identique à la précédente, seuls le type et les zones d'informations doivent changer, sélectionner « Content elements » :

d) Créer une zone TypoScript Object path :

L'opération est identique à la précédente, seuls le type et les zones d'informations doivent changer, sélectionner « TypoScript Object Path » :

Attention, après avoir sélectionnér ce type, un nouveau champ apparaît :

Il permet de spécifier le nom de l'objet TS qui fournit du contenu :

Pour ajouter un menu par exemple, ajouter ce code TypoScript au gabarit de la page principale :

On retrouve bien le même nom d'objet « monmenu » dans le TS du gabarit de la page principale
et dans le champ Object Path de la zone TemplaVoila.

6 - Enregistrer le template

Enregistrer le template et créer de deux object : Template Object TO et Data Structure DS (cf. documentation simplifiée pour connaître les notions TO et DS)

a) Cliquer sur SAVE pour charger l'ensemble du template avant de l'enregistrer :

b) Après avoir cliqué sur « SAVE », une nouvelle fenetre apparaît : vous allez pouvoir créer le template :

7- Mapping des tag du header de la page HTML

8- Enregistrement de la Data Structure et du Template Object

9- Lier les templates TemplaVoilà à une structure de page Typo3

nico gara

2005-02-09T11:05:56