Les Espaces clients

Définition

Les espaces clients permettent de définir dans les modèles de pages des zones dans lesquelles il sera possible de mettre du contenu différent pour chaque page. Typiquement un formulaire sur une page de contact et un texte sur une page de présentation. Le duo Modèles de pages / Espaces clients vous permet de facilement et rapidement avoir un site riche en contenu et cohérent graphiquement.

Un modèle de page peut comporter autant d'espace client que vous le souhaitez.

Exemples

Exemple d'une page en édition avec un modèle possédant 2 espaces clients (encadrés en vert) :

Interface rédacteur  

Exemple d'une page en édition. Dans cet espace client sont disposées plusieurs rangées. Il est possible d'en rajouter d'autres, de les supprimer, ou de modifier leur contenu :

   Glisser-déposer d'une rangée de contenu

Ce qu'il faut retenir

 

Dans une page on distinguera :

La forme  : Chaque page utilise modèle de page, dans lequel est défini la présentation ainsi que les différentes zones qui pourront être administrées par l'utilisateur dans Automne. Chacune de ces zones peut contenir une ou plusieurs rangées.

Le contenu : Le contenu sera inséré par les contributeurs, en ajoutant et en éditant des rangées ou en ajoutant de nouveaux éléments dans les modules.

Ajouter une zone de contenu modifiable

La balise <atm-clientspace />

Dans un modèle de page, les espaces clients sont définis par l'élément atm-clientspace.

On remarque qu'il s'agit d'un tag autofermant, possédant 2 attributs :

  • module : il s'agit du nom de code du module. Généralement on utilise le module "standard", qui est le module principal d'Automne : gestion des pages. Mais il est possible d'indiquer tout autre module.
  • id : il s'agit de l'identifiant de l'espace client au sein du modèle de page. Il doit être unique. Lorsque vous insérez des rangées de contenu dans cet espace client, Automne associe les rangées à cet identifiant unique.

Ce qui nous donne par exemple : <atm-clientspace module="standard" id="main-content" />

Nous vous conseillons de nommer vos espaces clients selon leur fonction dans le modèle :
  •  "main-content" pour la zone de contenu principale ;
  •  "secondary-content" pour la zone de contenu secondaire ;
  •  "footer" pour le pied de page ;
  • etc.

La raison principale est que pour basculer d'un modèle de page à un autre il est nécessaire que les modèles soient compatibles.

Deux modèles de page sont compatibles seulement s'ils possèdent des espaces clients dont les identifiants sont identiques.

Si une page est associée à un modèle de page qui possède 2 espaces clients et que l'on bascule vers un modèle qui n'en possède qu'1 seul, il s'en suivra une perte des données du second espace client.

En nommant ainsi les espaces clients, vous êtes sûrs que les données appartenant à la zone de contenu principale soient conservées en cas de basculement de modèle.

Régénération d'une page

Techniquement, lors de la régénération d'une page, Automne va rechercher les rangées associées à cette page et à l'espace client, et remplace l'espace client par le contenu correspondant.

Concrètement voici comment définir 2 espaces clients dans un modèle de page :

<!DOCTYPE html>
<html lang="{page:self:language}">
<head>
    <meta charset="UTF-8" />
    <title><atm-website name="title" /> : <atm-title /></title>
    ...
    <atm-meta-tags />
</head>
<body>
<div id="page">
    <section class="main">
        <atm-clientspace module="standard" id="main-content" />
    </section>
    ...
    <aside class="complementary">
        <atm-clientspace module="standard" id="secondary-content" />
    </aside>
</div>
...
</body>
</html>

Page précédente


Ajouter une contribution :

Les contributions servent à compléter la documentation en détaillant des points précis ou pour donner des exemples. Elles sont modérées et peuvent être supprimées sans préavis.
Pour poser des questions, merci d'employer le forum et pour rapporter un bug, le BugTracker est à votre disposition.








Vous pouvez employer les balises bbcode suivantes :
  • [code-xml] votre code ... [/code-xml] : Pour mettre en forme du code XML / XHTML
  • [code-php] votre code ... [/code-php] : Pour mettre en forme du code PHP
  • [code-js] votre code ... [/code-js] : Pour mettre en forme du code Javascript

Date de votre contribution : 22/10/2017   01:13:56

Haut