Balises dans les gabarits

Page title

<title>{sitename} - {title}</title>

Pour toutes les pages qui utilisent ce gabarit, les balises seront remplacées par les valeurs que vous aurez indiqué dans la partie administration du site, paramètres globaux.

Metadata

{metadata}

Cette balise ajoute à votre page toutes les méta-données que vous avez indiqué, ainsi que les méta-données personnalisées.

Elle est également employée pour spécifier le chemin de base de votre site lorsque vous utilisez les URLs sympathiques, n'enlever donc pas cette balise !

Feuille de style CSS (obsolète)

{cms_stylesheet}

Cette balise lie toutes les feuilles de style nécessaires au gabarit. Ajoutez cette balise une fois et toutes les feuilles de styles seront automatiquement jointes.

Feuille de style CSS

{cms_stylesheet}

Cette balise est la nouvelle version de la balise ci-dessus et la remplace. Cette balise lie toutes les feuilles de style vous avez attaché au gabarit. Cela signifie que vous ne devez ajouter cette balise pour que toutes les feuilles de styles soient automatiquement jointes.

Cette nouvelle balise permet d'utiliser des variables Smarty comme [[$red]] pour indiquer une couleur, et le changement se fera via votre mise en page. Cette nouvelle balise exige que le chemin des images soit [[root_url]]/dossier_images (exemple [[root_url]]/uploads/ngrey/body.png), car les feuilles de style seront mis en cache.

En complément pour la balise {cms_stylesheet} regarder l'aide dans la partie Administration, menu Extension puis Balises.

Liens relationnels

{cms_selflink lang='fr' dir="start" rellink=1}
{cms_selflink lang='fr' dir="prev" rellink=1}
{cms_selflink lang='fr' dir="next" rellink=1}

Ce sont des liens apparentés pour des interconnexions entre les pages, ce qui améliore l'accessibilité et l'optimisation pour les moteurs de recherche.

Largeur de la page pour Internet Explorer ou comment insérer du code Javascript

{literal}
<script type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}

Ce n'est pas vraiment une balise, mais cela vous montre comment insérer du code Javascript. En effet les gabarits utilisent par défaut la largeur de la page qui varie selon la taille d'affichage du navigateur de votre visiteur. Mais Internet Explorer ne sait pas gérer la largeur minimum et maximum en CSS donc il faut utiliser ce script. Pour les autres navigateur (Firefox par exemple), les largeurs de page sont gérés directement dans la feuille de style CSS.

Ancre

{anchor anchor='main' title='Aller au contenu' accesskey='s' text='Aller au contenu'}

Les ancres sont insérées avec la balise {anchor}. Dans les gabarits par défaut ceci est employé pour effectuer des sauts dans la même page, d'un chapitre à l'autre par exemple.

Logo avec retour à la page d'accueil

{cms_selflink lang='fr' dir="start" text="$sitename"}

Cette balise permet d'ajouter un lien de retour à la page d'accueil grâce au paramètre dir="start".

Recherche

{search}

Pour installer le moteur de recherche il vous suffit d'utiliser la balise {search}, qui est en fait un raccourci pour faire simple car la recherche est un module. Il devrait donc être appelé avec un paramètre comme ceci : {cms_module module='search'}.

Fil d'ariane

{breadcrumbs starttext='Vous êtes ici' root='Accueil' delimiter='»'}

Il s'agit du chemin que vous avez parcouru dans le site.

Navigation/Menu

{menu template='simple navigation.tpl' collapse='1'}

Cette balise vous permet d'afficher un menu où vous le souhaitez. Comme pour la recherche, on a fait simple car le gestionnaire de menu est un module.

Dans les gabarits par défaut, les menus sont stocké dans des fichiers. C'est pourquoi vous voyez l'extension .tpl dans le paramètre. Mais vous pouvez facilement importer des gabarits de menu dans la base de données et les éditer directement dans le panneau d'administration. Alors vous omettez simplement l'extension .tpl dans le paramètre.

News/Actualités

{news number='3' detailpage='news' lang='fr_FR'}

Cette balise affichera les trois derniers articles d'actualité. En cliquant sur le titre de l'article, le détails s'affichera sur une nouvelle page.
Les news sont un module mais comme toujours on a souhaité faire simple.

Bouton imprimer

{print showbutton=true script=true}

La balise {print} est utilisée pour ajouter un lien imprimer la page courante. Avec le paramètre showbutton activé la balise affiche un bouton au lieu d'un texte. Le paramètre script activé permet d'ouvrir directement une fenetre de dialogue pour une impression immédiate de la page courante.

La balise {print} imprime tout ce qui est contenu dans la balise {content} et seulement çà.

Contenu de la page

<h2>{title}</h2>
{content}

Certainement la balise la plus importante de votre gabarit car elle affiche le contenu de votre page.

Dans les gabarits par défaut, nous avons également choisi de mettre le titre de page sur chaque page {title}.

Liens précédent/suivant et haut de page

{anchor anchor='main' text='^ Top'}
{cms_selflink lang='fr' dir="previous"}
{cms_selflink lang='fr' dir="next"}

Quelques liens de navigation supplémentaire.

Pied de page

{global_content name='footer'}

Pour une meilleure clarté de vos gabarits, vous pouvez choisir d'inclure du code dans des blocs de contenu globaux comme ceci : {global_content}. Ce qui permet aussi de réutiliser le code dans d'autres pages ou gabarits.

Dans les gabarits par défaut nous avons utilisé cette balise pour gèrer le pied de page, commun à toutes les pages. Vous pourrez gérer les blocs de contenu globaux dans la partie administration, onglet contenu puis blocs de contenu globaux.