Principe

Préliminaires

• installer si elles ne le sont pas les extensions css_content_styles, static_info_tables.
• télécharger sur le TER et installer l'extension templavoila 0.4.0. NE PAS UTILISER L'IMPORT DU MODULE D'EXTENSION. À Enable features cocher Enable Page Template Selector. (C'est une veille version mais qui marche. Je n'arrive pas à faire fonctionner à partir de 1.1, ni 1.3. Le contenu est incomplètement rendu (il manque les balises de fin), des portions du gabarit manquent et les parties du header ne sont pas reprises !)

Méthode automatique

• dans fileadmin/templates, déposer un gabarit HTML et une feuille CSS
• dans le module web/template voila, cliquez sur l'assistant
• choisissez le gabarit HTML précédent, renseignez le nom du site et son rédacteur (attention, un nouvel utilisateur Typo3 est créé avec un mot de passe par défaut).
  
• effectuer le mapping des éléments
• choisissez les parties du header à reprendre
• validez le code TypoScript pour le menu

Méthode pas à pas

• créer une page racine LSVoila et un élément de contenu.
  
• créer pour cette page le gabarit suivant :
  

  # Default PAGE object:
  page = PAGE
  page.typeNum = 0
  page.10 = USER
  page.10.userFunc = tx_templavoila_pi1->main_page

• à l'intérieur de cette page, créer un un sysfolder LSFolder (d'abord une page puis changer son type) et l'associer au site en éditant la propriété General Record Storage page de la page racine.

Conception de la structure de données (DS) et de l'objet template (TO)

• dans fileadmin/linguastream, éditer linguastream.html en mode templavoila :
  
  1. ajouter un nouveau champ pour définir le menu
     
     
  2. ajouter un champ pour accueillir le contenu
     
     
  3. mapper ces éléments sur le gabarit HTML : pointer la souris sur l'élément HTML (ici la bonne DIV) qui accueillera le contenu.
     
  4. vérifier en mode preview
     
     
  5. sauvegarder la composition
     
     
• le DS et le TO sont accessibles dans le module web/list dossier système. Leur structure hiérarchique est visible mais on éditable en mode web/templavoila (cliquer sur le dossier système).
• Dans le module web/list du dossier système, éditer le TO et ajouter les parties du header link et body issues du modèle HTML. (je n'arrive pas à reprendre l'icon de la barre d'adresse)
  
  
• éditer les propriétés de la page racine
  
1. en renseignant Page Template Structure et Subpages - Page Template Structure.
   
2. Toujours dans les propriétés de la page, ajouter l'élément de contenu. (Avec Templavoila, le contenu des pages n'est pas nécessairement affiché, sauf s'il est spécifié dans la liste des contenus. C'est un peu lourd comme mécanisme, mais cela permet d'accéder directement aux contenus des autres pages.)
3. Sauvegarder et renseigner les nouvelles propriétés Use Template Design et Subpages - Use Template Design.
4. Ajouter le gabarit de l'extension css_styled_content.
• ajouter le code du menu au gabarit (repris du TP précédent):
  

  # le menu
  lib.menu_1 = HMENU
  lib.menu_1.1 = TMENU
  lib.menu_1.1 {
      # on enrobe les éléments NOrmaux avec <li>
      NO.allWrap = <li> | </li>
      # on active la gestion des éléments sélectionnés
      ACT = 1
      # qu'on enrobe avec la bonne classe
      ACT.allWrap = <li class="selected"> | </li>
    }
  }
  # le tout enrobé dans <ul>
  lib.menu_1.wrap = <ul> | </ul>

En cas d'erreur

• le style par défaut css_styled_content est inséré.
• le setup template du site fait bien appel au rendu de templavoila.

• le dossier système est bien attaché à la page (sinon vous ne pouvez pas y sauvegarder le DS/TO).
• le mapping du template HTML est correct.
  
• les bonnes sections du header sont correctement reprises (l'ai eu des problèmes avec ce fonctionnement - le lien vers la feuille de style n'était pas inséré, les sections n'étaient pas reprises - même en faisant correctement set/save. Cela provenait d'un bug de ma version de templavoila, corrigé à partir de la 1.2.).
  
• les templates voilà sont bien affectés à la page, structure et design.
• le contenu que vous souhaitez afficher est référencé dans la propriété content de la page. Pour éviter l'insert manuel du contenu dans la page, prendre l'habitude d'éditer en mode templavoilà.
• les caches sont vidés (c'est nécessaire lorsque l'on travaille sur le style).
  

Pour aller plus loin