Définition XML

La définition XML d'un modèle de page est constituée de la manière suivante :

  • Du code XHTML qui sera repris dans les pages du site utilisant ce modèle.
  • Du code XML permettant de définir les zones logiques sur lesquelles travaillera Automne.

Il y a plusieurs sortes de balises XML dans les modèles de pages :

  • Tags atm-linx : permettent de créer les liens de navigation entre les différentes pages d'Automne.
  • Tags de travail XML génériques : Ces tags ne sont pas spécifiques aux modèles et peuvent aussi être employés dans des rangées.
  • atm-clientspace : Ces balises, dont l'utilisation est décrite ci-dessous permettent de définir les différentes zones de contenu administrables via Automne.
  • Balises XML spécifiques : Ces tags ne peuvent être employés que dans des modèles de pages. Vous en trouverez la description ci-dessous.

Un modèle peut contenir les tags XML spécifiques suivants :

Exécuter du code avant le chargement de la page

<atm-header></atm-header>

Spécifier une redirection

<atm-redirect url="URL" />

Cette balise permet d'effectuer une redirection de type 301 ou 302.

Exemples :

<atm-redirect url="{page:codename:URL}" type="302" />

<atm-redirect url="http://example.com" type="301" />

Zones modifiables dans le modèle de page :

Ce tag permet de spécifier dans quelles zones de votre modèle viendront s'insérer les rangées de contenu dynamique propres à chaque pages.

<atm-clientspace id="identifiant" module="codename" />

Tag auto-fermé. Il possède les attributs suivants :

  • id : identifiant unique de l'espace client dans le modèle. Vous pouvez y mettre n'importe quelle valeur alphanumérique du moment qu'elle soit unique parmi tous les tags atm-clientspace du modèle.
  • module : permet de définir quel module fournira le contenu de cet espace client. Par défaut, si vous souhaitez pouvoir insérer des rangées de contenu dans cet espace client, vous devez y spécifier la valeur "standard".

Ce tag permet de définir la position d'un espace client dans la page. C'est ce tag qui vous permettra de pouvoir insérer des rangées de contenu dans les pages qui seront crées à partir de ce modèle.

Exemple :

<atm-clientspace id="left-column" module="standard" />

Méta données de la page :

<atm-meta-tags />

Tag auto-fermé : Il sera remplacé par les champs de méta-données de la page.

Ce tag est obligatoire, il doit se trouver juste avant la balise <head> de votre modèle de page car il permet de gérer certaines fonctionnalités propres à Automne. C'est par exemple cette balise qui permet d'activer les fonctions d'édition des pages. Il permet aussi d'ajouter automatiquement les fichiers Javascript et les feuilles de styles CSS fournies par les différents modules qui seront employés dans les pages.

Cette balise génèrera les méta données suivantes :

Nom Meta Données Valeurs Possibles
Description <meta name="description" content=" " /> Libre
Keywords <meta name="keywords" content=" " /> Libre
Category <meta name="category" content=" " /> Libre
Robots <meta name="robots" content=" " /> ( all, index, follow, noindex, nofollow )
Language <meta name="language" content=" " /> Libre
Author <meta name="author" content=" " /> Libre
Copyright <meta name="copyright" content=" " /> Libre
Cache du navigateur <meta http-equiv="pragma" content="no-cache" /> S'applique uniquement si cette option est cochée
Generator <meta name="generator" content="Automne" /> Automatique
Base <base href="http://www.automne-cms.org/" /> Automatique

Cette balise <atm-meta-tags /> affichera aussi toutes les meta-données libres comme des liens vers vos flux RSS de modules que vous aurez ajouté dans les propriétés de page ou dans les propriétés de site.

A partir de la version 4.2, on peut désactiver l'ajout automatique de certains meta-données, si on veut pouvoir les générer plus précisement dans le modèle de page. Cela peut s'avérer utile pour les pages dynamiques comme pour des actualités.

Exemple (sans le bloc de recherche du module actualités) :

<!-- Si on est on affiche le détail d'une actualité on récupère les infos dans les champs du module -->
<block module="pnews" id="getNews">
      <atm-search what="{Actualites}" name="getNews">
      <atm-search-param search="getNews" type="item" value="{request:int:news}" mandatory="true" />
        <atm-result search="getNews">
            <title>{Actualite:Titre:label} - <atm-website name="title" /></title>
            <meta name="description" content="{helper:io::ellipsis:{Actualite:Introduction:txtvalue']}|150|&hellip;|0|0}" />
        </atm-result>
&lt;!-- sinon on recup&egrave;re les informations de la page en cours --&gt;<br>
        <atm-noresult search="getNews">
            <title><atm-title /> : <atm-website name="title" /></title>
            <meta name="description" content="{page:self:description}" />
        </atm-noresult>
    </atm-search>
</block>

<atm-meta-tags description="0" />

Appeler des fichiers javascript

<atm-js-tags files="/js/js1.js,/js/js2.js" />

Ce tag permet de concaténer plusieurs fichiers javascripts en un seul. Accélérant ainsi le chargement de vos pages Web en minimisant le nmbre de requêtes HTTP.

Les fichiers ainsi listés seront concaténés et compressés avant d'être servis à l'internaute. Une gestion avancée du cache sur le navigateur de l'internaute est employée.

  • Attribut files : Fichiers javascript à inclure dans la page (séparés par des virgules).

Les fichiers à utiliser doivent impérativement se trouver dans le répertoire /js/ ou un sous répertoire.

Exemple :

<atm-js-tags files="/js/jquery.js,/js/common.js" /> 

En développement, lorsque le paramètre "activer le débuggage du système" est actif, la minimisation Javascript n'est pas effectuée, il est alors possible de parcourir plus facilement le code Javascript.

Contrairement, en production, lorsque le paramètre "activer le débuggage du système" est inactif, la minimisation permet de meilleures performances.

Vous pouvez désactiver la minification d'une portion de code javascript en l'entourant des balises suivantes :

//<<
... votre code javascript ...
//!>>

Appeler des feuilles de style 

<atm-css-tags files="/css/css1.css,/css/css2.css" />

Ce tag permet de concaténer plusieurs fichiers de feuille de styles en un seul. Accélérant ainsi le chargement de vos pages Web.

Les fichiers ainsi listés seront concaténés et compressés avant d'être servis à l'internaute. Une gestion avancée du cache sur le navigateur de l'internaute est employée.

  • Attribut files : Feuilles de styles CSS à inclure dans la page (séparés par des virgules).
  • Attribut media (optionnel) : permet de spécifier le média de sortie employé parmi :
    • all (par défaut si l'attribut media n'est pas employé)
    • aural
    • braille
    • embossed
    • handheld
    • print
    • projection
    • screen
    • tty
    • tv

Les fichiers à utiliser doivent impérativement se trouver dans le répertoire /css/ ou un sous répertoire.

Exemple :

<atm-css-tags files="/css/common.css,/css/accueil.css" />

Ajouter des fichiers CSS ou JS dans une rangée

A partir de la version 4.2, vous avez la possibilité de dire au gestionnaire de fichiers CSS ou JS que vous voulez charger d'autres ressources, que ce soit dans un modèle de page ou un modèle de rangée.

Attention à l'ordre de chargement de vos scripts ou de vos feuilles de style : ce fichier sera chargé en dernier.

<atm-js-add file="/js/WEBSITE_CODENAME/myscript.js"  />

<atm-css-add file="/css/WEBSITE_CODENAME/mystyles.css"  />

Selon l'architecture de vos sites, vous pouvez choisir ou non de placer vos fichiers dans un sous-répertoire portant le nom de code d'un site tel que défini dans la gestion des sites.

Constantes PHP :

<atm-constant name="constant" />

Tag auto-fermé. Il possède l'attribut suivant :

  • name : nom de la constante dont il faut retourner la valeur.

Ce tag permet d'obtenir la valeur de toute constante PHP.

Exemple : <atm-constant name="APPLICATION_LABEL" />

Ce code retournera le nom de la constante APPLICATION_LABEL qui, dans Automne est le nom de votre instance d'Automne.

Les constantes prédéfinies d'Automne se trouvent dans le fichier cms_rc.php.

Lien vers la page d'impression :

<atm-print-link keeprequest="true"> ... {{href}} ... </atm-print-link> Ce tag possède l'attribut suivant :

  • keeprequest : cet attribut est optionnel et il permet de renvoyer à la page d'impression les valeurs GET et POST envoyées à la page en cours. Valeurs acceptées : true ou false (défaut).

Ce tag remplacera la valeur spéciale suivante :

  • {{href}} : adresse de la page d'impression pour la page en cours.

Ce tag permet de réaliser un lien vers la page d'impression (si elle existe) de la page en cours.

Exemple : <atm-print-link><a href="{{href}}">Imprimer</a></atm-print-link>

Date de dernière mise à jour de la page :

<atm-last-update format="m/d/Y H:i:s"> ... {{date}} ... {{firstname}} ... {{lastname}} ... </atm-last-update>Ce tag possède l'attribut suivant :

Ce tag remplacera les valeurs spéciales suivantes :

  • {{date}} : Date de la dernière mise à jour de la page au format spécifié par l'attribut format.
  • {{firstname}} : Prénom de l'utilisateur ayant effectué la dernière modification sur la page.
  • {{lastname}} : Prénom de l'utilisateur ayant effectué la dernière modification sur la page.

Ce tag permet d'afficher la date et / ou l'auteur de la dernière mise à jour de la page en cours.

Exemple :<atm-last-update format="m/d/Y H:i:s"><small>Dernière mise à jour : {{date}} par {{firstname}} {{lastname}}</small></atm-last-update>

Identifiant de la page en cours : 

Cette valeur sera remplacée par l'identifiant de la page en cours.

PageID est très utile pour récupérer l'identifiant de la page actuelle.

Un exemple simple pour votre modèle XML ressemble à ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="{page:self:language}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><atm-title /> - <atm-website name="title" /></title>
    <atm-css-tags files="css/common.css,css/index.css" media="screen" />
    <atm-css-tags files="css/print.css" media="print" />
    <atm-js-tags files="js/sifr.js,js/common.js,js/jquery-1.3.2.js,js/menu.js" />
    <atm-meta-tags />
</head>
<body>
    <h1><atm-title /></h1>
    <div>
        <atm-clientspace module="standard" id="center" />
    </div>
    <atm-print-link keeprequest="true">&nbsp;<a href="{{href}}" target="_blank">Print</a></atm-print-link><br />
    <atm-last-update format="m/d/Y H:i:s"><small>Last update : {{date}} by {{firstname}} {{lastname}}</small></atm-last-update>
</body>
</html>

Cet exemple très simple permet d'obtenir un modèle qui peut être employé pour créer des pages dans lesquelles il est possible d'insérer des rangées de contenu.

Il ne contient pas, par contre, de système de lien permettant de naviguer entre les différents pages qui seront ainsi créées.



3 contribution(s)

Par efusien le 24/03/2010 18:21:58 :

A noter : une fois avoir installé Automne, par défaut il existe des modules préconfigurés : le module Mediathèque (pmedia) et Actualités (pnews) par exemple.

Attention car dans les fichiers Javascript liés à ces modules (/js/modules), il existe la librairie jQuery, automatiquement chargée via le <atm-js-tag>.
/js/modules/pMedia/jquery-1.2.6.min.js
/js/modules/pNews/jquery-1.2.6.min.js

Cela peut parfois causer des conflits, par exemple si vous utilisez un plugin de jQuery (tel que colorbox par exemple).

L'astuce est donc de vérifier que la librairie n'est pas appelée plusieurs fois.
Dans le cas où vous souhaiteriez mettre votre propre librairie jQuery, pensez donc à supprimer ces fichiers qui seraient alors inutiles.

Par Julien Breux le 09/06/2010 09:52:15 :

Note à propos du tag <atm-css-tags /> vous pouvez spécifier le type de média en nommant votre fichier avec le suffixe portant le nom du média précédé par un tiret (-).

Exemple : global-print.css, global-screen.css

Par Guillaume Mesnard le 09/06/2010 09:58:45 :

Petite précision supplémentaire : les tags atm-css-tags et atm-js-tags doivent être uniques dans votre modèle de page, sous peine d'insérer plusieurs fois les fichiers importés des modules.

Haut