Personnaliser les modèles de sections HTML
Apprends à adapter les sections de page existantes dans le dossier bx_Layout, à créer vos propres sections et modèles de tags, et à restreindre le choix pour les rédacteurs à vos propres modèles de sections HTML.
Conditions préalables et objectif du tutoriel
Vous avez besoin d'accès à l'éditeur HTML et au gestionnaire de fichiers du CMS bluetronix ainsi que des droits de développeur appropriés pour le dossier des modèles. Dans ce tutoriel, vous apprendrez à adapter des sections de page existantes, à créer vos propres modèles de sections HTML et à proposer uniquement des modèles approuvés à vos rédacteurs si nécessaire.
Nous travaillons avec les modèles d'exemple Clients et Bannière. Les fichiers standards demeurent inchangés ; les modifications individuelles sont apportées via l'étiquetage _own.
1. Trouver des modèles de sections de page dans l'éditeur
Ouvrez une page CMS existante, sélectionnez Modifier et ouvrez la sélection de modèles via Insérer → Section de page. Le menu contextuel propose également l'entrée Bloc de texte pour de petits contenus réutilisables. Ce tutoriel aborde d'abord les sections de page.
Dans la fenêtre Section de page, les modèles disponibles sont affichés avec un aperçu.
Choisissez par exemple la catégorie Clients. Plusieurs variantes de mise en page y sont disponibles.
2. Où les modèles sont stockés
Les fichiers de modèles se trouvent dans le dossier de développement /bx_Layout/. Ouvrez ce dossier dans le gestionnaire de fichiers. Vous y trouverez entre autres des fichiers pour les sections de page (Section*.txt) et les blocs de texte (Tag*.txt).
Le nom du fichier détermine l'attribution à la sélection des modèles. Un modèle de section de page commence toujours par Section; ensuite vient son nom individuel. Pour vos propres variantes, on utilise le suffixe _own avant l'extension du fichier.
| Nom de fichier | Signification dans l'éditeur |
|---|---|
SectionClients.txt | Modèle par défaut « Clients » |
SectionBanner.txt | Modèle standard « Bannière » |
SectionClients_own.txt | Variante personnalisée remplaçant « Clients » |
SectionMyTemplate_own.txt | Modèle personnalisé supplémentaire nommé « MyTemplate » |
Tu peux aussi créer un modèle complètement nouveau. Pour cela, choisis un nom propre après Section. Si aucun fichier standard du même nom n'existe, le nouveau modèle apparaît en plus, au lieu de remplacer un modèle existant.
3. Pourquoi vous ne devriez pas modifier directement les fichiers standards
Les fichiers standards fournis avec le CMS dans /bx_Layout/ seront écrasés lors des mises à jour système. Les modifications directes sur SectionClients.txt ou SectionBanner.txt ne sont donc pas permanentes. Copie le fichier standard souhaité et marque ta version avec _own. Les variantes _own associées sont destinées à tes adaptations personnelles et durables.
SectionClients.txt
↓ kopieren
SectionClients_own.txtS'il existe deux fichiers, le CMS utilise le SectionClients_own.txt approprié au lieu du modèle standard SectionClients.txt. Tu n'as pas besoin de renommer la catégorie Clients dans l'éditeur.
En revanche, si tu crées un fichier sous un nouveau nom, par exemple SectionMyTemplate_own.txt, le modèle standard Clients reste également disponible.
4. Structure d'un modèle de section HTML : le séparateur
Un fichier de section peut contenir plusieurs variantes de mise en page de la même catégorie. Pour que l'éditeur CMS reconnaisse les différentes variantes, elles doivent être séparées par le marquage suivant :
<!--__SP_SectionTemplate__-->La marque se trouve au début, entre les variantes et à la fin du fichier d'exemple. Utilise l'écriture exacte. Si le marquage de séparation manque, l'éditeur ne peut pas afficher plusieurs variantes de manière fiable comme sélections distinctes.
Le modèle standard SectionBanner.txt illustre ce principe avec plusieurs mises en page de bannières différentes. Tu peux l'utiliser comme base pour créer ta propre section simple.
<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
<div class="container py-3">
<div class="row align-items-center g-4">
<div class="col-lg-8 wow fadeInLeft">
<span class="badge text-bg-warning mb-3">­New­</span>
<h2 class="mb-2">­Designed for everyday success­</h2>
<p class="mb-0">­Explore practical solutions created to make everyday work easier, clearer and more effective.­</p>
</div>
<div class="col-lg-4 text-lg-end wow fadeInRight">
<a href="#"><button class="btn btn-light btn-lg">­Learn more­</button></a>
</div>
</div>
</div>
</Section>
<!--__SP_SectionTemplate__-->L'exemple est une variante complète de bannière. Pour une deuxième variante, ajoute son code HTML après le dernier marquage de séparation et termine également cette variante par le même marquage. Tu peux ensuite concevoir la section selon tes besoins.
Tu n'as pas besoin d'ajouter toi-même la classe sectionAll : l'éditeur bluetronix l'ajoute automatiquement lors de l'insertion d'une section.
5. Copier le modèle Clients et changer le titre
Ouvre le modèle SectionClients existant dans le gestionnaire de fichiers et consulte son code HTML. Dans notre exemple, il contient un titre, une description et plusieurs tuiles de partenaires.
Copie le modèle correspondant en tant que SectionClients_own.txt et ouvre la copie via Modifier. Ajoute la chaîne NEW!!!! au titre pour notre test. Tu peux également modifier le texte, le nombre de cartes, les icônes ou le CSS selon tes besoins.
<!-- Vorher -->
<h2>­Trusted by growing organizations­</h2>
<!-- Nachher in SectionClients_own.txt -->
<h2>­NEW!!!! Trusted by growing organizations­</h2>
Clique sur Enregistrer et réouvre la sélection Insérer → Section de page → Clients. Tu reconnaîtras ta version par le titre modifié. La deuxième variante Clients peut être choisie et modifiée indépendamment.
6. Proposer votre propre modèle sous un nouveau nom
Tu peux également créer un modèle séparé au lieu d’un fichier de remplacement du même nom. Copie par exemple une variante Clients et enregistre-la sous SectionMyTemplate_own.txt. La partie après Section est le nom de ton modèle ; il détermine la nouvelle sélection dans l'éditeur. Le modèle original Clients ne sera pas remplacé avec un autre nom.
SectionClients.txt → Standard: Clients
SectionClients_own.txt → eigene Version von Clients
SectionMyTemplate_own.txt → zusätzliche eigene Vorlage MyTemplateAinsi, tu peux développer des sections fixes pour certains types de pages pour un client, sans avoir à modifier le contenu de tous les modèles fournis.
7. Afficher uniquement vos propres modèles avec Only_own.txt
Si l'utilisateur final doit uniquement utiliser tes modèles approuvés, crée le fichier indicateur Only_own.txt dans le dossier /bx_Layout/. Selon la configuration des modèles présentée, seuls les fichiers appropriés avec le suffixe _own seront proposés dans la sélection de modèles. Ce fichier ne nécessite pas de code HTML pour cette fonctionnalité.
/bx_Layout/Only_own.txt
Exemple : S'il y a dans le répertoire SectionClients.txt, SectionBanner.txt et SectionMyTemplate_own.txt, la sélection, lors de l'activation de ce paramètre, ne doit contenir que le modèle propre approprié. Cela te permettra de fournir au client une sélection ciblée et adaptée au projet.
8. Vos propres modèles de tags pour les blocs de texte
Le même principe _own s'applique aux blocs de texte plus petits. Leurs fichiers commencent par Tag. Par exemple, TagTemplate.txt devient TagTemplate_own.txt. Cette variante peut être proposée via l'entrée Bloc de texte dans l'éditeur.
TagTemplate.txt
↓ kopieren
TagTemplate_own.txt
9. Dupliquer des colonnes modifiables avec colAll
Si une section contient plusieurs colonnes répétables, une colonne avec la classe colAll peut être reconnue comme un bloc autonome. Ainsi, dans le menu contextuel, la fonction Colonne d'article → Dupliquer est disponible.
<div class="colAll col-md-6">
<h2>­Hello world­</h2>
<p>­Writing­</p>
</div>Lors de la duplication, le bloc concerné est inséré en tant que deuxième colonne. Pour une carte ou une colonne d'article répétable, tu dois donc mettre colAll dans le bon conteneur. La classe parente sectionAll est ajoutée automatiquement par l'éditeur.
10. Marquages de texte et modèles multilingues
Les sections standard fournies contiennent dans les textes d'exemple la chaîne ­, par exemple avant et après les titres. Ces balises de texte ne doivent pas être confondues avec le marquage de séparation <!--__SP_SectionTemplate__-->. Lors de la copie de modèles existants, tu devrais d'abord conserver ces balises CMS si tu veux que le comportement de l'éditeur actuel soit maintenu.
<h2>­Designed for everyday success­</h2>
Dans les projets multilingues, des balises de traduction supplémentaires peuvent être utiles pour que les rédacteurs puissent gérer le contenu dans les langues requises. Le CMS bluetronix est conçu pour 24 langues. Pour un modèle de projet simple et exclusivement unilingue, tu peux omettre les balises de traduction supplémentaires non nécessaires ; les marqueurs de séparation de sections requis pour l'éditeur doivent être conservés.
11. Fonctions personnalisées et includes nécessaires
Lorsque tu étends un modèle avec des fonctions PHP ou des sorties de module, utilise des noms uniques pour tes propres fonctions. Une fonction existante ne doit pas être déclarée à nouveau sous le même nom. Tu peux sécuriser la déclaration par exemple avec function_exists() :
if(!function_exists("MyTestFunction")) {
function MyTestFunction($Test) {
return $Test;
}
}Les inclus nécessaires doivent être intégrés au moins une fois par section. Un marqueur d'inclusion correspondant peut être copié via l'éditeur :
<!--bxInclude--/bx_Mod/Blog_Detail-->Les fichiers de modèle internes avec les extensions .txt ou .bx ne sont pas prévus pour un accès direct via des URL HTTP/HTTPS publiques dans la configuration de serveur CMS décrite. Ils sont lus et traités côté serveur.
12. Pourquoi des modèles restreints sont utiles pour les équipes de rédaction
Avec tes propres sections et Only_own.txt, tu détermines quels éléments de mise en page finis le client final peut choisir. De plus, dans les paramètres utilisateur, des fonctionnalités d'édition telles que le changement de police ou de couleur peuvent être limitées. Les rédacteurs peuvent alors surtout insérer des sections prédéfinies, modifier des textes et échanger des images, sans avoir à reconstruire librement le design de la page défini.
Cette méthode de travail convient particulièrement aux projets clients plus importants, aux portails d'entreprise et aux équipes avec plusieurs rédacteurs. La conception reste uniforme, tandis que le contenu peut être géré de manière flexible.
13. Résultat et résumé
Tu ouvres /bx_Layout/, copies un fichier de section existant, ajoutes _own, adaptes le code HTML et vérifies la sortie sous Insertion → Section de page. Pour les nouvelles catégories de sélection, utilises un nom de fichier propre qui commence par Section.
SectionClients.txt
↓ kopieren
SectionClients_own.txt
↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → ClientsSi tu actives également Only_own.txt et limites les droits de l'éditeur en conséquence, tes rédacteurs peuvent travailler spécifiquement avec les modèles de section HTML fournis.
FAQ
ce que nos clients nous demandent souvent
Qu'est-ce que les modèles de section HTML dans le CMS bluetronix ?
Ce sont des sections de page HTML réutilisables, qui peuvent être sélectionnées dans l'éditeur via Insertion → Section de page et insérées dans une page CMS existante.
Où puis-je trouver les modèles de section HTML ?
Les fichiers de modèle correspondants se trouvent dans le dossier développeur /bx_Layout/ du gestionnaire de fichiers.
Comment doit commencer le nom d'un fichier de section ?
Un modèle de section doit commencer par Section. Par exemple, le modèle SectionClients.txt appartient à la sélection Clients.
Pourquoi ne devrais-je pas modifier les fichiers de section fournis ?
Les fichiers standard sont écrasés lors des mises à jour du CMS. Copie le modèle et utilise un fichier _own si tu souhaites que l'ajustement persiste.
Comment remplacer le modèle standard Clients par ma propre version ?
Copie SectionClients.txt en SectionClients_own.txt et modifie la copie. La propre version équivalente sera utilisée à la place du modèle standard.
Comment créer un modèle supplémentaire avec un nom propre ?
Crée par exemple SectionMyTemplate_own.txt. Comme ce nom ne remplace aucun modèle standard existant, il peut être proposé comme option supplémentaire.
À quoi sert la balise <!--__SP_SectionTemplate__--> ?
Avec <!--__SP_SectionTemplate__-->, le CMS sépare plusieurs variantes de mise en page au sein d'un fichier de section. Copie la syntaxe exactement.
Dois-je écrire la classe sectionAll dans un modèle propre ?
Non. L'éditeur ajoute automatiquement sectionAll.
Que fait le fichier Only_own.txt ?
Elle est créée sous /bx_Layout/ et limite la sélection de modèles en fonction de la configuration affichée aux fichiers personnels avec le suffixe _own.
Quel est la différence entre les fichiers Section et Tag ?
Les fichiers Section décrivent des sections complètes de page. Les fichiers Tag sont les modèles pour des éléments textuels plus petits ; les deux prennent en charge le principe _own.
Comment puis-je dupliquer des colonnes dans l'éditeur ?
Identifiez le conteneur de colonnes répétables avec colAll. Grâce à la fonction Colonne Article → Dupliquer, ce bloc peut être multiplié.
Puis-je ajouter des fonctions PHP à mes propres Sections ?
Oui, tant que votre environnement de développement le permet. Évitez les noms de fonctions en double ou sécurisez les déclarations de fonctions par exemple avec function_exists(). Les inclus nécessaires doivent être présents au moins une fois par section.
Comment empêcher les rédacteurs de s'écarter du design prévu ?
Proposez uniquement des modèles personnels autorisés via Only_own.txt et restreignez, si nécessaire, des fonctions comme le changement de police et de couleur dans les paramètres utilisateurs.
Mes propres modèles peuvent-ils être multilingues ?
Oui. Pour les projets concernés, vous pouvez utiliser les balises de traduction et de texte prévues. Le terme pour la documentation anglaise est HTML Section Templates.