L'entête de page
Déclaration du type de document
La première chose à faire c'est d'indiquer le DTD que vous allez utiliser pour votre modèle de page. Par défaut, Automne utilise le type XHTML Transitionnel, mais rien ne nous empêche de déclarer un type de document HTML5 par exemple :
<!DOCTYPE html>
Pour forcer l'utilisation d'un doctype différent il faut ajouter dans le fichier config.php :
define("APPLICATION_XHTML_DTD", "<!DOCTYPE html>");
Langue de la page
Pour chaque site déclaré dans Automne, une langue par défaut est définie. Pour accéder à la valeur de la langue définie, on fera appel à la variable {page:sef:language}
<html lang="{page:self:language}">
Titre de page et nom du site
Dans cet exemple le titre de page est composé du titre de la page et du nom du site web, une pratique courante en référencement.
<title>Titre de page : Site Web</title>
La balise <atm-title /> ou son équivalent <atm-page name="title" /> qui va afficher automatiquement le titre de la page en cours. C’est le champ Titre affiché dans l'onglet des propriétés de page qui est ici récupéré par Automne.
Pour afficher le nom du site web nous allons utiliser la balise <atm-website name="title" />.
La constante qui contient le nom de l'instance d'Automne est APPLICATION_LABEL, elle correspond au libellé du site que vous pouvez définir en tant qu’administrateur dans l’onglet Administration, paramètres.
Il est également possible d'afficher cette valeur dans vos modèles de page avec la balise suivante :
<atm-constant name="APPLICATION_LABEL" />
Nous écrirons donc le code suivant pour afficher ces deux informations :
<title><atm-title /> : <atm-website name="title" /></title>
A noter qu'à partir de la version 4.1 d'Automne vous pouvez utiliser les balises <block> pour les modules polymod et la balise <atm-if> dans les modèles. Il est donc possible de spécifier un titre de page dynamique qui changera en fonction des paramètres passés dans l'URL de page.
Exemple si je veux afficher le titre de l'actualité je peux écrire dans mon modèle de page :
<block module="pnews" id="news_title">
<atm-if what="{request:int:news} && {page:self:codename} == 'news'" name="title">
<atm-search what="{Actualites}" name="title">
<atm-search-param search="title" type="item" value="{request:int:news}" mandatory="true" />
<atm-result search="title">
<title>{Actualites:Titre:value}</title>
</atm-result>
<atm-noresult>
<title><atm-title /></title>
</atm-noresult>
</atm-search>
</atm-if>
<atm-else for="title">
<title><atm-title /> - <atm-website name="title" /></title>
</atm-else>
</block>
Dans cet exemple, il faut attribuer le nom de code news à la page qui affiche les actualités. Il faut également qu'on se trouve dans le cas où on ait un paramètre news dans l'URL pour être sur qu'on est bien sur l'affichage d'une actualité. A adapter selon le nom de code et le paramètre passé dans l'URL donc.
Balises pour les méta-données de la page
Les balises méta peuvent contenir de nombreuses informations comme la description de la page, les mots-clefs, la langue utilisée dans la page, l’auteur, son adresse mail, les liens vers les flux RSS, etc. Toutes ces informations sont éditables soit dans la fenêtre des propriétés de page, soit dans la gestion des sites qui permet de renseigner des méta-données par défaut pour un site, qui seront appliquées automatiquement sur toutes les pages qui n’auraient pas de méta-données spécifiques renseignées.
Automne offre la possibilité de créer vos propres flux RSS personnalisés, une fois le flux crée vous devez l’ajouter dans les méta-données libres du site ou de la page si vous souhaitez permettre l’auto-détection de vos flux par le navigateur.
Pour récupérer l’ensemble de ces informations il suffit juste de faire appel à la balise <atm-meta-tags />
Dans notre exemple on va donc remplacer les lignes suivantes :
<meta name="description" content="The description of the content of the present page may be used by search engines" />
<meta name="keywords" content="CMS, Automne, template, example, tutoriel, XHTML" />
<link rel="alternate" type="application/rss+xml" title="Actualités" href="http://www.automne-cms.org/rss/rss.php?id=1" />
par :
<atm-meta-tags />
Cette balise est obligatoire dans chaque modèle de page. Elle 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 les fichiers Javascript et les feuilles de styles fournies par les différents modules qui seront employés dans les pages.
Appel des feuilles de styles et des fichiers Javascript
Automne respecte les standards du W3C et le concept de séparation entre la structure (XHTML), la présentation (CSS) et le comportement (JS). Pour appeler les feuilles de styles et les fichiers Javascript, on peut au choix soit utiliser la syntaxe par défaut du W3C, soit passer par les balises XML d’Automne qui en plus d’appeler les fichiers, s’occupera d’optimiser la performance de votre site en minifiant, en concaténant et en compressant tous les fichiers CSS et tous les fichiers JS. Cette option est surtout destinée à être utiliser en production, nous vous recommandons de ne pas l’utiliser en cours de développement, ne serait-ce que pour débugguer plus facilement vos pages avec Firebug par exemple.
Il arrive souvent qu’on fasse appel à plusieurs feuilles de styles comme dans notre exemple. Une fois en production on pourra alors remplacer :
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/fonts.css" type="text/css" media="all" />
par :
<atm-css-tags files="/css/reset.css,/css/base.css,/css/fonts.css" media="all" />
Si comme dans mon exemple j’ai des feuilles de style spécifiques pour d’autres type de média comme pour l’impression ou le mobile, il me faut alors faire un appel par type de média :
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="handeld" />
On écrira alors :
<atm-css-tags files="/css/print.css" media="print" />
<atm-css-tags files="/css/mobile.css" media="handeld" />
Si vous utilisez les commentaires conditionnels pour corriger les bugs CSS sur IE7 par exemple, vu le peu de code CSS et l’appel supplémentaire nécessaire, il n'y a aucun intérêt à utiliser <atm-css-tags /> dans ce cas.
Même principe pour les fichiers javascript, on peut tous les regrouper en un seul appel et économiser ainsi de précieuses requêtes HTTP.
Dans notre cas, nous pouvons donc remplacer les 2 appels suivants :
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/myscript.js"></script>
par :
<atm-js-tags files="/js/jquery-1.4.2.js,/js/myscript.js" />
Voilà donc pour le code de l’entête de page, si on résume on avait :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de page - Site web</title>
<meta charset="UTF-8"/>
<meta name="description" content="The description of the content of the present page may be used by search engines" />
<meta name="keywords" content="CMS, Automne, template, example, tutoriel, XHTML" />
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/fonts.css" type="text/css" media="all" />
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="all" />
<![endif]-->
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="handeld" />
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/myscript.js"></script>
<link rel="alternate" type="application/rss+xml" title="Actualités" href="http://www.automne-cms.org/rss/rss.php?id=1" />
</head>
Transformé en modèle Automne, voici ce que ça donne :
<!DOCTYPE html>
<html lang="{page:self:language}">
<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>
Maintenant que nous avons terminé avec l’entête de page, passons au contenu.
English
4 contribution(s)
Par Chris le 24/10/2011 01:58:56 :
Cette page est très bien expliquée. MerciPar Frank le 25/10/2011 10:59:18 :
Mise à jour : Ajout des informations relatives à la langue de la page.Par Noémie le 04/09/2012 17:06:20 :
Bonjour,Merci pour ce tuto.
J'aurais cependant une remarque, je suis hyper novice et je tente de monter une plateforme multi-sites.
Je vous suis très reconnaissante des tutos qui m'aident beaucoup, cela dit, pour les gros débutants comme moi, il ne serait pas inutile de préciser encore plus de points.
Un exemple tout bete, quand vous dites :
"Pour forcer l'utilisation d'un doctype différent il faut ajouter dans le fichier config.php"
il serait bon de préciser où trouver ce fichier, ça peut paraitre idiot, mais c'est un détail de taille lorsqu'on est non-initié(e).
Ce n'est qu'un exemple, mais en bref, je souhaiterais que vous preniez encore plus les gens pour des gros belus, en considérant que le public qui va lire le tuto est potentiellement ignare en informatique.
La didactique c'est parfois redondant, mais ça fait gagner du temps !
Par Frank le 04/09/2012 17:18:36 :
@Noémie : Merci pour ton retour. J'ai ajouté un lien vers la page qui liste la structure même de fichiers d'Automne : http://doc.automne-cms.org/web/Documentation/65-systeme-de-fichier.phpLe fichier config.php se trouve à la racine du répertoire où est installé Automne.