Sous le capot
Vous devez ignorer le contenu de cet article durant vos premiers mois avec Joomla!, et peut-être définitivement. Mais si un jour, vous éprouvez le besoin de vous intéresser à l'aspect "organique" (comment ça marche, par opposition à "fonctionnel", ce que ça fait) pour contrôler plus étroitement ce qui s'affiche dans vos pages, cette introduction pourrait vous être utile, sans prétendre remplacer le contenu des sites de documentation.
Table des matiéres
Composants, views et layouts
Template override
Modifications de style
Utilisation de LESS pour générer les fichiers CSS
composants, views et layout.
Un composant fabrique ou gère du contenu.
Ce contenu peut être présenté de plusieurs manières différentes, par exemple le texte complet d'un article, le texte d'introduction ou la liste des articles d'une catégorie. A chacune de ces fonctions correspond en général un type de lien de menu et parfois un module.
Le type de lien de menu permet de fabriquer des liens vers des pages qui seront affichées dans la section principale de votre page; le module remplit la même fonction mais peut être positionné ailleurs que dans la section principale ou à l'intérieur d'un autre article.
Mais si vous lisez ceci vous savez déjà tout ça.
Les différentes fonctions d'un composant s'appellent des "views".
Pour afficher une vue, il faut lui appliquer un "layout", c'est à dire un programme PHP qui fabrique le code Html qui sera transmis au navigateur. Ce programme reçoit les paramétres calculés par le composant pour fabriquer ce code.
A une même vue peuvent correspondre plusieurs layouts, pour présenter suivant les besoins la même information sous des fprmats différents. Par exemple un layout pour afficher les informations fournies par la vue sous forme de liste et un autre pour les présenter sous forme de tableau.
Physiquement, tout cela se trouve dans l'arborescence de fichiers de votre site :
- la racine contient un dossier "componants"
- ce dossier contient un dossier pour chaque composant installé sur votre site
- dans chaque dossier componant, vous trouverez un dossier "views"
- dans ce dossier views, vous trouverez un dossier pour chacune des fonctions de votre composant
- dans chacun de ces dossiers, vous trouverez un dossier "tmpl"
- et dans ce dossier, enfin, les programmes .php correspondant aux différents layout pour cette vue : ceux dont les noms ne comportent pas de _ (underscore). Ceux qui comportent un _ sont associés par le préfixe (avant _) à un même layout et sont appelés par le programme sans underscore.
L'éxécution de ce dernier programme produit la version par défaut de la page html de votre layout
Application
Le dossier /components/com_weblinks/views contient trois sous dossiers, chacun correspondant à un type de liens de menu proposé par le composant :
- categories
- liste des liens de toutes les catégories
- category
- liste des liens d'une catégorie
- form
- proposer un lien web
Chacun de ces dossiers contient un sous-dossier tmpl, qui pour les deux premiers contiennent un fichier default.php et pour le troisième un fichier edit.php
Template override
Mais vous avez probablement installé un ou plusieurs template sur votre site, et ce sont eux qui ont le dernier mot en terme de présentation.
Vous allez trouver dans l'arborescence issue de la racine de votre site un dossier "templates" :
- la racine contient un dossier "templates"
- ce dossier contient un dossier pour chaque template installé sur votre site, qu'il soit actif ou non.
- dans le dossier d'un template ouvrez le dossier html, il contient un sous dossier pour chaque composant
- dans le dossier de chaque de chaque composant, vous retrouvez des sous-dossiers avec les mêmes noms que ceux du dossier views correspondant : ce sont eux qui contiennent les programmes .php, correspondant aux différents layouts du composant, qui sont exécutés lorsque ce template là est actif et que la vue est invoquée.
Modifications de styles.
Si vous m'avez suivi jusque là, vous avez compris que ce sont ces programmes qu'il faut modifier si vous souhaitez changer le comportement de votre template.
Mais il est aussi possible, pour un composant pêu utilisé et un réalisateur de template préssé, que le layout que vous souhaitez modifier ne soit pas dans le dossier. Il faut alors copier le sous dossier du dossier views dans l'emplacement correspondant du dossier html, pour installer les layouts par défaut dans votre template. Vous pouvez ensuite modifier dans le dossier du template ce que vous souhaitez changer.
Par ce procédé, vous pouvez même créer un nouveau template ex-nihilo.
Mais les changements que vous souhaitez faire n'exigent pas forcément de modifier le code php. Votre dossier de template contient d'autres sous dossiers, qui trient les fichiers par nature :
- css
- fichiers .css feuilles de style de votre template
- js
- fichiers javascript, qui animent vos fichiers html
- images
- les images utilisées par votre temlate
- fonts
- les polices de caractéres
Pour ajouter des classes css s'appliquant à tout votre contenu, il suffit en principe d'ajouter un fichier mycss.css dans le dossier css du template
Si il n'est pas pris en compte, il va vous falloir aller inspecter index.php qui est la racine de votre template, config.php et config.xml qui lui disent quoi faire. En principe, ces fichiers invoquent la totalité du dossier css, sans préciser les fichiers, mais...
Donc si vous voulez créer une nouvelle classe pour les listes ,qui remplacera la puce standard par une image, vous allez devoir :
- placer l'image dans le dossier "images" du template,
- créer une feuille de style qui définit la classe et utilise une référence à l'image,
- et placer ce fichier dans le dossier css.
Lorsqu'elle fonctionne, cette méthode a l'avantage de survivre à un upgrade du template.
Si vous êtes fatigué de fouiller dans les entrailles de votre site sans obtenir le résultat recherché, vous pouvez (ce qui n'est pas considéré comme une bonne pratique) introduire votre modif dans un fichier css éxistant de votre template , judicieusement choisi.
Mais si vous devez mettre à jour votre template, la modification sera écrasée par la mise à jour. Organisez vous en conséquence.
Le langage LESS pour parametrer la génération des fichiers CSS
Les fichiers CSS peuvent être très redondants, et on peut souhaiter les paramétrer. On décrit alors les CSS en LESS. L'utilisateur fournit ses paramétres, et les fichiers LESS sont compilés pour fabriquer les véritables fichiers CSS
Supposons que votre template, que vous comptez réutiliser sur plusieurs sites tout en conservant un look spécifique à chaque site, prévoit deux couleurs complémentaires "primary" et "secondary" qui vont apparaître tout au long de vos CSS pour définir la couleur des boutons, les fonds des modules etc... de manière coordonnée.
Si vous utilisez LESS et si vous êtes prévoyants, vous allez définir deux variables @primary et @secondary que vous utiliserez dans la définition des couleurs à la place des valeurs absolues, dans chaque définition de style où elles sont invoquées.
Pour votre second site, il suffit de modifier une seule fois la valeur de ces deux variables, puis de recompiler votre fichier LESS pour obtenir un nouveau fichier CSS. La modification aura été propagée dans toutes les définitions de styles.
Pour corser un peu plus la sauce, supposons que pour accentuer la personnalisation, vous décidiez que sur un site les bordures de blocs auront des coins carrés alors que sur l'autre elles auront des coins arrondis. Encore pas mal de réécritures en perspectives.
En LESS vous allez prévoir un "mixin" (une forme d'abbreviation) pour définir une seule fois les propriétés des bordures de vos blocs.
Ce mixin sera invoqué par son nom chaque fois que vous voulez définir un format de bloc : box-content, box-note, box-info, box-hint, box-warning, box-intro etc...Pour appliquer la modification globalement, il vous suffira de modifier la définition et de recompiler votre fichier LESS pour fabriquer les fichiers CSS de votre second site.
La même méthode permet de fabriquer des "styles" différents d'un même template, pour différencier les sections d'un site, tout en conservant un aspect globalement homogène.
Je pense que vous avez saisi l'idée. Less permet aussi des conditions - guard- des fonctions, le paramétrage des mixins avec ou sans valeur par défaut etc.. Pour tous les détails voir :
Les fabricants de templates utilisent de plus en plus cette technologie pour des raisons évidentes. Combiné avec une utilisation extensive de JavaScript, cela permet de proposer les fonctions à la mode : barre de menu bloquée, parallaxe, nombreux styles prédéfinis, le tout paramétrable de maniére trés détaillée au gout de l'utilisateur.
Mais si vous utilisez l'un de ces template, gardez bien en mémoire que les CSS ne constituent plus qu' un langage intermédiaire. A chaque modification du fichier source LESS les fichiers CSS seront écrasés. N'espérez donc pas y loger de modification permanente. Sauf si votre template est bien fait et que le dossier .css contiennent un fichier du genre "custom.css"; dans ce cas vous pouvez le remplacer par vos css qui neseront pas écrasés.
Et nous connaissons tous les limites de l'approche WYSIWYG pour les éditeurs. Tous ces paramétrages sont faits à partir de formulaires. Si le résultat n'est pas tout à fait ce que vous souhaitiez, ou si la modification a été mal transposée dans le code, il va vous falloir plonger, avec une couche de plus à traverser.
A ce stade je pense que vous avez saisi l'idée générale. Pour les vrais détails, il vous faudra consulter la documentation officielle sur docs.joomla.org
- Aucun commentaire trouvé
Commentaires