Ce sont dans les espaces client que le rédacteur pourra insérer les rangées de contenus de son choix. Dans les propriétés du modèle de page, l'administrateur du site pourra ensuite proposer des rangées par défaut. On peut également créer des groupes de rangées et ne les autoriser que dans certains modèles, mais en ce qui concerne le développement du modèle de page, le travail se limite à définir les zones qui afficheront les différentes rangées de contenus.
Pour cela rien de plus simple, il suffit de faire appel à l'élément <atm-clientspace />. Cet élément a deux attributs obligatoires : module et id. Le premier va indiquer à quel module est relié cette zone et le second va permettre d'identifier chaque espace client, ce qui sera utile aussi pour la compatibilité entre modèles.
Le module le plus utilisé dans Automne est le module de gestion de pages, aussi appelé module standard. On écrira donc par exemple pour la zone de contenu principal :
<atm-clientspace module="standard" id="main-content" />
Nous vous recommandons de choisir des identifiants avec une bonne sémantique afin de savoir quelle type d'information ils contiennent. Ce sera utile pour la compatibilité entre modèles.
Dans notre exemple il y a deux endroits où j'ai prévu d'avoir du contenu, une zone qui contiendra le contenu principal et une autre qui contiendra du contenu annexe que je vais définir ainsi :
<atm-clientspace module="standard" id="aside" />
Il ne nous reste plus qu'à insérer nos deux espaces client dans notre modèle :
<!DOCTYPE html>
<html lang="fr">
<head>
<title><atm-title /> - <atm-website name="title" /></title>
<meta charset="UTF-8" />
<atm-css-tags files="/css/reset.css,/css/base.css,/css/fonts.css" media="all" />
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="all" />
<![endif]-->
<atm-css-tags files="/css/print.css" media="print"/>
<atm-css-tags files="/css/mobile.css" media="handeld"/>
<atm-js-tags files="/js/jquery-1.4.2.js,/js/myscript.js"/>
<atm-meta-tags />
</head>
<body>
<div id="header">
<atm-linx type="recursivelinks">
<selection>
<!-- On démarre à la racine du site -->
<start>
<nodespec type="relative" value="root"/>
</start>
<!-- On ne veut afficher que 2 niveaux de l'arborescence -->
<condition property="lvl" operator="<=">
<value type="data">2</value>
</condition>
</selection>
<!-- Je laisse le menu fermé par défaut et je n'affiche pas la page raçine du site -->
<display mode="close" root="0"><htmltemplate>
<!-- Ici le modèle HTML dans lequel les variables seront remplacées par les URLs et le titre de page-->
<li><a href="{{href}}">{{title}}</a></li></htmltemplate>{{sublevel}}
<!-- Le modèle employé pour la récursivité -->
<subleveltemplate><ul>{{sublevel}}</ul></subleveltemplate></display>
</atm-linx>
</div>
<div id="main-content">
<div id="breadcrumbs">Vous êtes ici :
<!-- Le type de liens à créer -->
<atm-linx type="desclinks">
<selection>
<!-- La page de départ sera la racine du site -->
<start>
<nodespec type="relative" value="root"/>
</start>
<!-- On s'arrête à la page en cours -->
<stop>
<nodespec type="relative" value="self"/>
</stop>
</selection>
<display>
<!-- J'affiche un lien -->
<htmltemplate>
<a href="{{href}}">{{title}}</a>
</htmltemplate>
</display>
</atm-linx>
</div>
<atm-clientspace module="standard" id="main-content" />
</div>
<div class="aside">
<atm-clientspace module="standard" id="aside" />
</div>
<div id="footer">
<atm-linx type="sublinks">
<selection>
<!-- Je sélectionne la page dont l'identifiant est 10 -->
<start>
<nodespec type="node" value="10" />
</start>
</selection>
<display>
<!-- J'utilise une simple liste à puces comme modèle HTML -->
<htmltemplate>
<li>
<a href="{{href}}">{{title}}</a>
</li>
</htmltemplate>
<subleveltemplate>
<ul class="links">{{sublevel}}</ul>
</subleveltemplate>
</display>
</atm-linx>
</div>
<address>
<!-- Indique la date de dernière publication ainsi que l'auteur de la modification -->
<atm-last-update format="d/m/Y H:i:s"><small>Dernière mise à jour : {{date}} par {{firstname}} {{lastname}}</small></atm-last-update>
</address>
</body>
</html>
Il existe d'autres balises XML comme <atm-last-update> inséré dans le bas de page qui vous permettent d'aller plus loin dans les fonctionnalités que peut offrir un modèle de page.
Nous obtenons ainsi un modèle de page très générique que je vais pouvoir décliner facilement soit en modifiant la langue utilisée dans le modèle, les feuilles de styles, les identifiants de page appelés ou les espace clients présents.
La prochaine étape consiste à développer ses propres rangées de contenu ou adapter les rangées existantes pour personnaliser vos pages.
J'espère que ce tutoriel vous aura aidé à mieux comprendre comment développer vos propres modèles de page avec Automne. Et si vous avez des questions, n'oubliez pas que le forum est là pour vous aider :)
English