Creer un Theme
Introduction
Le CMS 299Ko permet l'utilisation de thèmes personnalisés pour modifier l'apparence du site. Il supporte également les thèmes enfants, qui permettent de surcharger certains fichiers d'un thème parent sans le modifier directement.
Création d'un Thème
Pour créer un thème, suivez ces étapes :
- Créez un dossier dans
theme/
avec le nom de votre thème. - Ajoutez un fichier
infos.json
pour définir les métadonnées du thème :
{
"name": "Nom du Thème",
"version": "1.0",
"authorEmail": "email@exemple.com",
"authorWebsite": "https://exemple.com",
"parentName": ""
}
- Créez les fichiers essentiels :
layout.tpl
: Structure principale du thèmestyles.css
: Feuille de style du thèmescripts.js
(optionnel) : Fichier JavaScript du thèmeinfos.json
: Informations sur votre thème
Exemple de structure :
/theme/
/mon-theme/
- infos.json
- layout.tpl
- styles.css
- scripts.js
/template/
- core.404.tpl
- blog.list.tpl
Modifier un Thème
Pour modifier un thème existant, vous pouvez :
- Modifier directement les fichiers dans son dossier
- Ajouter ou supprimer des templates dans
template/
- Modifier
styles.css
etscripts.js
Création d'un Thème Enfant
Un thème enfant permet d'hériter d'un thème parent tout en pouvant surcharger certains fichiers.
1. Création du dossier
Créez un dossier dans theme/
, comme pour un thème normal.
2. Définition du parent dans infos.json
Ajoutez le nom du thème parent dans parentName
:
{
"name": "Mon Thème Enfant",
"version": "1.0",
"authorEmail": "email@exemple.com",
"authorWebsite": "https://exemple.com",
"parentName": "mon-theme-parent"
}
3. Ajouter des fichiers personnalisés
Vous pouvez :
- Ajouter un
styles.css
pour modifier le design - Ajouter
layout.tpl
pour modifier la structure - Créer des fichiers dans
template/
pour surcharger ceux par défaut
Exemple de surcharge de la page d'erreur 404.tpl
:
/themes/
/mon-theme-enfant/
- infos.json
- styles.css
/template/
- core.404.tpl (modifié par rapport au parent)
Chargement des Fichiers dans un Thème
La classe Theme
gère le chargement des fichiers de la manière suivante :
getLayout()
: Retourne le chemin delayout.tpl
en vérifiant d'abord dans le thème enfant, puis dans le parent.getCoreTemplatePath($templateName)
: Cherche un template danstemplate/core.$templateName.tpl
du thème enfant, puis dans le parent si n'est pas trouvé.getPluginTemplatePath($pluginName, $templateName)
: Cherche un template de plugin danstemplate/$pluginName.$templateName.tpl
.getCSSLinks()
: Chargestyles.css
du ou des thèmes parents et du thème actif.getJSLinks()
: Chargescripts.js
du thème enfant ou du parent.
Ainsi, un thème enfant surcharge uniquement les fichiers qu'il redéfinit, et le reste est chargé depuis le parent.
Mises à jour
Si vous souhaitez modifier un thème existant, sachez qu'il vaut mieux créer un thème enfant de celui-ci, et de modifier les quelques éléments voulus. Chaque mise à jour du thème par son auteur effacera inévitablement vos modifications si vous utilisez un thème existant, alors n'attendez pas pour créer le votre.
Conclusion
Avec ce système, vous pouvez facilement créer et personnaliser des thèmes tout en gardant une structure modulaire et réutilisable. Un thème enfant permet de modifier un thème existant sans le modifier directement, facilitant ainsi les mises à jour et la maintenance.