Préparation de l'environnement

Je pars du principe qu’un site TYPO3 correctement configuré lors de l’installation mais vierge est disponible.

Extensions à installer

Media (DAM) [dam]
Gérer les documents ou images de son site en y ajoutant des méta-données. Pensez à activer l’ancien module de gestion des fichiers. Il est le seul à permettre l’édition en ligne de fichiers texte.
Media>Categories [dam_catedit]
Création de catégories hiérarchiques pour le DAM.
MM DAM - FEFileList [mm_dam_filelist]
Pour afficher une liste de fichiers à télécharger, d’après les catégories du DAM.
MM ECL - ExtensionClassLibrary [mm_bccmsbase]
Nécessaire pour faire fonctionner l’extension mm_dam_filelist.
RealURL: URLs like normal websites [realurl]
Création automatique d’URL hiérarchisées.
TemplaVoila! [templavoila]
Création d’un modèle de site TYPO3 à l’aide d’un design HTML quelconque.
Ecodev: feeds services (RSS/ATOM) [ecorss]
Création de flux RSS et Atom à partir des modifications des pages d’un site TYPO3.
Google Sitemap [dd_googlesitemap]
Création automatique d’un fichier XML de sitemap.

Structurer son site

Nous allons maintenant créer la structure initiale du site.

  • Créer une page nommée « configuration » (ou autre) à la racine, sous le globe. Cette page va servir à stocker certaines paramètres de configuration. La page en soi peut être transformée en raccourci vers la « vraie » page d'accueil.
  • Créer une page de type SysFolder nommée « Storage Folder » sous la page « configuration »
  • Pour toutes les pages de premier niveau du site, il faudra éditer la section General Storage Folder pour le faire pointer vers le répertoire système « Storage Folder »

Voici pour les préparatifs. Nous pouvons uploader le modèle du site dans fileadmin/templates/mon_modele. Voici une proposition de structure pour le contenu de ce répertoire :

Le répertoire src peut être utilisé pour stocker le design Photoshop par exemple ou d’autres fichiers de travail.

Astuce pour le code TypoScript

Le répertoire ts est utilisé pour stocker la configuration TypoScript (plus élégant que de taper le code directement dans la partie Template). Voilà par exemple à quoi ressemble la partie Setup de mon Template :

## Static configuration for all my sites
 
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/config.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/css_styled_content.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/tx-ml_links.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/tx-timtabsociable.txt">
 
## Template-specific configuration
 
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/2008/ts/config.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/2008/ts/templavoila.txt">

De la même façon, et comme expliqué dans mon article sur la configuration de l'éditeur htmlArea, le premier noeud de mon arbre TYPO3 est une page « inutilisée » qui me sert à stocker les paramètres généreaux de mon site, comme le code TypoScript pour les pages.

Je ne tape pas non plus directement le contenu mais référence d’une façon similaire à ci-dessus du code stocké dans des fichiers .txt stockés dans le répertoire de mon modèle. De cette façon, non seulement la gestion est facilitée, mais le code peut très facilement être réutilisé pour un autre site.

Astuce pour TemplaVoila!

TemplaVoila! permet d’associer des icônes à ses modèles de mise en page et les Flexible Content que l’on définit. J’aime bien les stocker dans le répertoire typo3 avant de les associer dans TemplaVoila!.

Par expérience, je trouve très pratique de créer une feuille de style CSS unique dans le design général du site et d’y référencer les autres feuilles de style. Si une nouvelle feuille de style est nécessaire, nul besoin de modifier la configuration de TemplaVoila!, il suffit de rajouter une ligne dans le fichier CSS principal. Le contenu de ce fichier sera par exemple : 

@import url(layout.css);
@import url(sidebar.css);