Les Balises dans les gabarits

Nous expliquons ici comment sont employés les balises dans les gabarits. Le reste des gabarits est juste du code HTML. Vous pouvez en lire plus à ce sujet dans le documentation officielle en anglais et aussi consulter la page Balises du noyau
Et surtout l'aide dans le menu Extensions/Balises.

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

{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/Balises.

Liens relationnels

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink 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 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

{nav_breadcrumbs}
Il s'agit du chemin que vous avez parcouru dans le site.
Nota : La balise {breadcrumbs} ou {cms_breadcrumbs} est obsolète en version 2.0.

Navigation/Menu

{Navigator 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, les menus sont stocké en base de données. il sont de type Navigator ou MenuManager .. Exemple : gabarit "Simple Navigation" de type "Navigator ::Navigation".

Ces gabarits sont maintenant regroupés dans la Gestion du design/Gabarits.

News/Actualités

{news number='3' detailpage='news'}
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}

Cette balise est supprimée en version 2.0, sauf si le module CMSPrinting est installé.

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 dir="previous"}
{cms_selflink 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 gabarits de type Core::Générique (anciens 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 ces blocs de contenu dans la partie administration, dans la Gestion du design/Gabarits

 

NOUVELLES Balises en Version 2.0

page_attr {page_attr}

Cette balise peut être utilisée pour renvoyer la valeur de l'attribut d'une page déterminé

Exemple la balise  { page_attr page="minimal-template" key="_dflt_"} affiche le contenu de la page "Le Gabarit minimum"

Voici un exemple d'un gabarit minimaliste. Aucune feuille de style n'est attachée à ce gabarit, c'est pourquoi il n'est pas très joli...

On a ici juste placé le contenu à droite du menu.

Le menu utilisé pour ce gabarit "Minimal template" du MenuManager.

share_data {share_data}
Cette balise permet de copier une ou des variables Smarty plus actives pour le parent ou une étendue plus globale.
Exemple :
-{share_data scope=global data="title,canonical"}
balise utiliée dans le gabarit Simplex
-{share_data scope=parent vars="nls,theme_path,main_title,main_content,prev_page,next_page"}