Pour chaque mise en page vous pouvez charger une feuille de style spécifique. Cette fonctionnalité peut vous être utile lorsque vous avez différents styles pour un template et que vous ne voulez pas les inclure à tous les styles de templates. Cela peut avoir un impact positif sur la vitesse de chargement de votre site.
Étape 1: Créer un fichier LESS
Tout d'abord, vous devez créer un fichier LESS. Le fichier doit se trouver dans le répertoire suivant :
/templates/[nom_du_template]/less/
Étape 2: Charger le fichier créé
Ensuite, éditer un fichier de mise en page à partir du répertoire suivant:
/templates/[nom_du_template]/tpl
Dans la section head, vous devez ajouter le code suivant :
<?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>Jetez un œil sur l'exemple :
<head><?php $this->renderBlock('head'); ?><?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?></head>
Étape 3: Ajouter un fichier LESS à la map LESS
Une fois que vous avez ajouté un nouveau fichier LESS dans la section head, vous devez ajouter ce fichier dans la map LESS. De cette façon, le fichier sera recompilé en CSS quand n'importe quel autre fichier LESS en relation avec le nouveau (par exemple les variables inclus) sera modifié.
Pour ce faire, modifiez le fichier suivant :
/templates/[nom_du_template]/lib/jm_template.php
Ensuite, recherchez le code suivant :
$common_all = array('bootstrap_variables.less','template_variables.less','override/ltr/mixins.less','template_mixins.less');$this->lessMap['offcanvas.less'] = $common_all;$this->lessMap['djmenu.less'] = $common_all;$this->lessMap['djmenu_fx.less'] = $common_all;$this->lessMap['custom.less'] = $common_all;$this->lessMap['comingsoon.less'] = $common_all;
Au-dessus du code vous devez ajouter votre nouveau fichier LESS comme suit :
$this->lessMap['offcanvas.less'] = $common_all;$this->lessMap['djmenu.less'] = $common_all;$this->lessMap['djmenu_fx.less'] = $common_all;$this->lessMap['custom.less'] = $common_all;$this->lessMap['comingsoon.less'] = $common_all;$this->lessMap['new-layout.less'] = $common_all; //new-layout.less added
Cela signifie que quand l'un de ces fichiers sera modifié, alors le fichier new-layout.less sera compilé en CSS automatiquement :
bootstrap_variables.less,
template_variables.less, override/ltr/mixins.less,
template_mixins.less
Étape 4: Ajouter des styles
Maintenant, vous pouvez ajouter des styles LESS ou CSS au fichier LESS.
Vous devriez vous rappeler d'importer les variables et mixins si vous voulez profiter d'eux :
/* ====================VARIABLES import==================== */@import "template_variables.less";@import "bootstrap_variables.less";/* ====================MIXINS import==================== */@import "override/ltr/mixins.less";@import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins@import "template_mixins.less";
