Preparing the environment

I take for granted that an empty TYPO3 website is available. The only requirement I set is that it should be well configured.

Installing Extensions

Media (DAM) [dam]
Manage documents or pictures from your website and add metadata. Do not forget to reactive the old page management mechanism as it allows you to edit files from within Typo3.
Media>Categories [dam_catedit]
Create hierarchical categories for DAM.
MM DAM - FEFileList [mm_dam_filelist]
Enable DAM categories-related download lists of files.
MM ECL - ExtensionClassLibrary [mm_bccmsbase]
Needed in order to get extension mm_dam_filelist working,
RealURL: URLs like normal websites [realurl]
Automatic search-engine optimized URL.
TemplaVoila! [templavoila]
Create a TYPO3 website template out of a standard HTML design.
Ecodev: feeds services (RSS/Atom) [ecorss]
RSS and Atom feed creation based on page modification on a TYPO3 website.
Google sitemap [dd_googlesitemap]
Fully automated creation of a sitemap XML file.

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 :

Folder src may be used to store the Photoshop design of your website for instance, or any other working files.

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);
Flattr