Dans le CMS Ametys, un gabarit permet de définir les différentes parties d'une page. Pour plus d'informations, consulter la page Définition de gabarit.
Créer la feuille de style d'un gabarit
Le fichier cms/skins/[skinName]/templates/[templateName]/stylesheets/template.xsl définit l'affichage du gabarit; par exemple :
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template name="template"> <html> <body> <h1>Mon joli gabarit</h1> <zone name="default" level="2"/> </body> </html> </xsl:template> </xsl:stylesheet>
- <zone> définit une zone identifiée par son nom, qui correspond à l'identifiant défini dans le fichier cms/skins/[skinName]/templates/[templateName]/template.xml
- l'attribut "level" définit les niveaux de titres du contenu qui sera inséré dans la zone : dans cet exemple, le titre du contenu sera affiché avec une balise <h2>. Le corps du contenu peut contenir jusqu'à 3 niveaux de titre : h3, h4 et h5.
Ajouter des attributs à la zone (à partir de Ametys 4.3.3+)
Pour ajouter des attributs au <div> généré, définissez les attributs à ajouter sur un sous-élément <body>.
Par exemple :
<zone name="right" level="1"> <body data-ametys-mobile-tab="true" data-ametys-mobile-tab-text="Titre"/> </zone>
Le HTML généré sera:
<div id="ametys-cms-zone-right" data-ametys-zone="right" data-ametys-mobile-tab="true" data-ametys-mobile-tab-text="Titre"> </div>
Pour identifier une zone (dans une règle css par exemple), il est préférable à partir de Ametys 4.3.3+ de s'appuyer sur l'attribut data-ametys-zone plutôt que l'identifiant du <div>
Fichiers XSL communs
Certaines portions de gabarit sont définies dans des feuilles de styles communes et profitent aussi bien aux gabarits de page qu'à la définition de vues de contenus et de services. Ces portions de gabarits sont également utilisées par le CMS (la déclaration des feuilles de style CSS dans l'entête du document HTML par exemple), il est donc nécessaire de leur donner le même nom.
<xsl:template name="head"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <title><xsl:call-template name="get-title"/></title> <xsl:call-template name="meta" /> <xsl:call-template name="og-meta" /> <xsl:call-template name="common-css" /> <xsl:call-template name="additionnal-css" /> <xsl:call-template name="common-rss" /> <xsl:call-template name="additionnal-rss" /> <xsl:call-template name="common-script" /> <xsl:call-template name="additionnal-script" /> <!-- Search --> <xsl:call-template name="search-head"/> <xsl:call-template name="google-analytics"/> </head> </xsl:template>
- "meta" génère les métadonnées des pages HTML
- "common-css" génère tous les liens des CSS communes
- "additional-css" est redéfini dans chaque gabarit pour inclure les CSS spécifiques au gabarit
Exemple d'un fichier template.xsl faisant appel à ces fichiers communs :
<xsl:template name="template">
<html>
<head>
<xsl:call-template name="meta" />
<title>
<xsl:if test="/cms/page" ><xsl:value-of select="/cms/page/@title" /> - </xsl:if><i18n:text i18n:key="SKIN_HOMEPAGE_TITLE" i18n:catalogue="skin.{$skin}"/>
</title>
<xsl:call-template name="common-css" />
<xsl:call-template name="additionnal-css" />
</head>
<body>
<xsl:call-template name="main-navigation"/>
<xsl:call-template name="banner"/>
<div id="wrapper">
<div id="content">
<xsl:call-template name="content-template"/>
</div>
</div>
<xsl:call-template name="footer"/>
</body>
</html>
</xsl:template> Surcharger les templates utiles
Le fichier template-default.xsl du noyau comporte des templates très utiles. Ils sont facilement surchargeables dans les template XSL des gabarits.
Pour plus d'information, consulter la page Ecriture d'un gabarit
Retour en haut