La Gestion de Contenu Simplifiée
La gestion des feuilles de styles (CSS) avec les variables Smarty
A noter que depuis la parution de cet article, CmsMadeSimple intègre son propre plugin : cms_stylesheet. Il est donc inutile d'installer le plugin smarty indiqué. Le reste de l'article reste d'actualité tant que vous utilisez cms_stylesheet et non smarty_stylesheet :)
En CSS et sous CMS Made Simple, jusqu'à présent nous n'avions par la possibilité d'utiliser de variables. Pourtant l'utilité n'est pas des moindres quand on sait qu'on utilise x fois le même code couleur, ou y fois la même URL pour accéder aux images...
Le plugin Smarty Stylesheet est la pour répondre à cette problématique... et plus encore.
Pré-requis
Pour suivre pas-à-pas ce tutoriel vous devez avant tout télécharger le plugin Smarty Stylesheet sur le Forge de CMSMS (http://dev.cmsmadesimple.org/projects/smartstylesheet).
Au moment de la rédaction de cet article, le plugin est en version 0.6. Bien qu'étant encore en phase de développement et n'ayant pas atteint le cas de la version 1.0, ce plugin est parfaitement fonctionnel.
Vous devez également avoir des notions de CSS et de Smarty.
Le plugin Smarty Stylesheet
Présentation
Ce plugin vous offre trois fonctionnalités qui le rendent indispensables (à mes yeux) :
- La possibilité d'utiliser des variables Smarty au sein de la feuille de style,
- La génération d'un nom de fichier CSS unique à chaque modification (donc mise en cache de la dernière version du fichier uniquement),
- La création d'un fichier CSS
en dur
permettant des optimisations (voirConclusion
).
Mise en place
Dès que vous avez téléchargé le plugin Smarty Stylesheet, vous devez transférer le fichier function.smarty_stylesheet.php dans le répertoire /plugins/ dans votre installation de CMS Made Simple.
La seconde étape est de remplacer dans votre (ou vos) gabarit(s) la méthode d'appel des feuilles de style. Par défaut, CMS Made Simple fait appel à la balise {stylesheet}, nous allons donc la remplacer par la balise {smarty_stylesheet} comme dans l'exemple ci-dessous :
{process_pagedata}
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Strict//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"">
<html xmlns=""http://www.w3.org/1999/xhtml"" xml:lang=""fr"" lang=""fr"">
<head>
<title>{$pagetitle} - {sitename}</title>
{metadata}
{smarty_stylesheet}
</head>
<body>
Tests
Afin de tester le bon fonctionnement du plugin, vous devez vous rendre sur la page d'accueil de votre site, la recharger et voir si l'affichage est correct. Si vous regardez le code source de votre page, vous devriez obtenir des lignes de code de ce type :
<link rel=""stylesheet"" type=""text/css"" href=""http://www.domaine.tld/tmp/cache/Feuille_1_02_22_10_17_45_27.css"" media=""screen""/>
<link rel=""stylesheet"" type=""text/css"" href=""http://www.domaine.tld/tmp/cache/Feuille_2_03_05_10_08_54_42.css"" media=""screen""/>
Comme vous pouvez le voir, la feuille de style est datée de votre dernière modification dessus ce qui ne vous oblige pas à vider votre cache pour voir chaque modification. Cela permet aussi aux visiteurs du site d'avoir toujours la dernière feuille de style en cache.
Exemples d'utilisation
Nous allons voir ci-dessous comment utiliser les variables Smarty au sein de la feuille de style. Il faut avant tout déclarer la variable en début de fichier CSS :
[[assign var=""nom_de_la_variable"" value=""valeur_de_la_variable""]]
pour ensuite utiliser la variable dans le CSS en faisant appel de cette façon :
[[$url]]
Comme vous pouvez le voir nous ne déclarons par les variables Smarty de façon classique avec les accolades mais avec des double-crochets. En effet, les accolades sont utilisées dans le code CSS pour définir des styles associés à un élément.
Gestion des couleurs
Il arrive souvent que nous ayons à employer sur différents éléments (id ou class) des couleurs identiques. Avant nous recopions systématiquement les codes couleurs du type #d40000 partout sur notre feuille. Si nous avions à changer cette couleur plus tard dans le développement du site, nous devions rechercher les occurrences et les remplacer.
Maintenant, nous allons déclarer un variable en haut de notre feuille de style :
[[assign var=""rouge"" value=""#d40000""]]
[[assign var=""bleu"" value=""#00004f""]]
et l'utiliser un peu partout sur notre feuille :
#bloc {
font-size : 16px ;
color : [[$rouge]] ;
}
#bloc2 {
width : 100px ;
height : 50px ;
background : [[$bleu]] ;
}
Voilà, si vous aviez à changer le rouge ou le bleu, vous n'auriez qu'à changer le code couleur dans la déclaration de la variable.
Gestion des URLs
Sur le même principe, nous pouvons définir des URLs à employer plusieurs fois. Si ces URLs sont en format absolu, il suffit de les déclarer tel que :
[[assign var=""site1"" value=""http://www.unsite.com""]]
Par contre, si les URLs sont au format relatif, nous devons tenir compte de l'emplacement du fichier CSS généré par le plugin. Dans notre cas, le plugin créé le fichier dans le dossier /tmp/cache/ (valeur par défaut sur CMS Made Simple).
Donc pour accéder à l'emplacement /uploads/images/ nous devrions déclarer la variable :
[[assign var=""url_images"" value=""../../uploads/images/""]]
et l'utiliser de telle manière :
#bloc2 {
width : 100px ;
height : 50px ;
background : url([[$url_images]]mon_image.jpg) no-repeat ;
}
Conclusion
Voilà, à présent vous allez pouvoir améliorer votre expérience des feuilles de style sous CMS Made Simple grâce à ce petit plugin Smarty Stylesheet.
Comme nous l'avons vu dans la présentation du plugin, Smarty Stylesheet génère automatiquement dans le répertoire cache(/tmp/cache/) des fichiers CSS en dur
. Cet fonctionnalité nous permettra de mettre en place des optimisations permettant de compresser à la volée
le fichier CSS pour gagner en temps de chargement. Cela fera partie d'un prochain article.