Intégrer des fichiers JavaScript et CSS personnels dans le CMS bluetronix
Dans ce tutoriel, tu intégreras un fichier JavaScript personnel et un style CSS dans la mise en page de ton site web. Tu découvriras la règle _own et apprendras comment la version des fichiers aide lors des modifications.
Conditions préalables et objectif
Pour ce tutoriel, tu as besoin d'un accès développeur au CMS bluetronix et tu devrais connaître la structure des mises en page et des dossiers développeur. Tu apprendras à intégrer tes propres fichiers JavaScript et CSS en plus des fichiers CMS existants, sans modifier les fichiers système originaux.
Nous utilisons les fichiers montrés dans les captures d'écran BxHeadScript_own.js et BxStyle_own.css. Les deux fichiers sont explicitement inclus dans la mise en page, afin que le CMS les prenne en compte lors du chargement de la page.
1. Ouvrir la mise en page
Ouvre la section Mise en page dans le CMS et sélectionne Mise en page - HTML. Ensuite, ouvre la mise en page dans laquelle tu souhaites intégrer tes fichiers JavaScript et CSS. Dans cet exemple, nous utilisons la mise en page par défaut.
Dans la définition de la mise en page, tu trouveras déjà des inclusions pour les fichiers CMS centraux, par exemple BxHeadScript.js et BxStyle.css. Tu peux inscrire tes fichiers supplémentaires juste à côté.
2. Créer un fichier JavaScript personnel dans le gestionnaire de fichiers
Ouvre le Gestionnaire de fichiers et accède au dossier système bx_script marqué en rouge. Tu y trouveras les fichiers JavaScript centraux du CMS bluetronix et éventuellement des variantes linguistiques.
Crée le fichier BxHeadScript_own.js ou sélectionne-le s'il est déjà présent. Tu peux copier un fichier existant approprié en tant que modèle.
Sélectionne Modifier pour ouvrir le code JavaScript de ton propre fichier dans l'éditeur de texte.
Dans l'exemple montré, le fichier contient du code JavaScript spécifique pour le choix entre le mode sombre et le mode clair. Dans l'éditeur de texte, tu peux gérer et enregistrer ton code JavaScript spécifique au projet.
Ne modifie pas le fichier original BxHeadScript.js pour tes propres extensions. Les fichiers dans les dossiers système bx_ peuvent être écrasés lors des mises à jour du CMS. Marque tes propres fichiers là-bas avec _own.
3. Intégrer le fichier JavaScript personnel dans la mise en page
Retourne à Mise en page - HTML. Ajoute ton propre fichier JavaScript en plus du fichier CMS existant. Si tu souhaites que ton script soit chargé tôt, tu dois l'ajouter comme montré dans la capture d'écran dans la zone head après le script de tête existant.
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
La ligne supplémentaire charge ton propre code JavaScript. Le fichier original BxHeadScript.js reste inchangé. Le chemin du fichier et la syntaxe de ton propre fichier doivent correspondre au fichier dans le gestionnaire de fichiers.
4. Créer un fichier CSS personnel dans le gestionnaire de fichiers
Dans le Gestionnaire de fichiers, ouvre le dossier système bx_style. Ici se trouve notamment la feuille de style centrale BxStyle.css. Pour les ajustements personnels, nous utilisons un fichier séparé nommé BxStyle_own.css.
Crée le fichier BxStyle_own.css ou ouvre le fichier personnel existant. Le fichier système BxStyle.css reste inchangé.
Grâce à Modifier, tu peux enregistrer tes propres règles CSS dans ce fichier.
5. Intégrer le fichier CSS personnel dans la mise en page
Ouvre à nouveau Mise en page - HTML. Dans la zone head, après la feuille de style existente, ajoute ton propre fichier CSS. L'ordre est important si tes propres règles doivent remplacer le formatage par défaut.
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
Le fichier CSS par défaut reste présent, tandis que tu gères des formatages supplémentaires ou différents séparément dans BxStyle_own.css.
6. Utiliser JavaScript dans le head ou à la fin de la page
Les fichiers JavaScript peuvent être inclus soit dans la zone head soit à la fin de la page, avant la balise de fermeture body, selon leur fonction. Le BxHeadScript_own.js montré est chargé dans le Head. Pour d'autres scripts, tu peux également utiliser un dossier de projet personnel et intégrer le fichier plus tard dans la mise en page.
Exemple pour un fichier supplémentaire d'un dossier personnel à la fin de la page :
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>Cet exemple montre un fichier supplémentaire. Si tu souhaites remplacer un fichier système par ta propre version, tu dois ajuster délibérément les inclusions dans la mise en page choisie et vérifier qu'aucune fonction CMS nécessaire ne disparaît.
7. Différencier les dossiers système et les dossiers de projet personnels
Les dossiers bx_ marqués en rouge appartiennent au CMS bluetronix. Les fichiers personnels dans ces dossiers doivent être marqués avec _own afin qu'ils ne soient pas traités comme les fichiers système lors des mises à jour régulières du CMS.
Tu peux également placer tes propres fichiers JavaScript et CSS dans des dossiers de projet créés par tes soins, sans préfixe bx_, par exemple /script/ ou /my_scripts/. Dans ce cas, la marque _own n'est pas strictement nécessaire. Tu devras alors utiliser le chemin réel dans ta définition de mise en page.
La marque _own ne remplace pas l'inclusion dans la mise en page : un fichier créé séparément ne sera chargé que s'il est inclus par la ligne script ou link appropriée.
8. Versionnement automatique des fichiers
Dans les intégrations de mise en page affichées, le CMS bluetronix utilise le marquage __FV_…__. Cela permet au CMS d'ajouter un paramètre de version basé sur la date de modification. Après une modification, cela permet au navigateur de charger le fichier JavaScript ou CSS actuel, plutôt que d'utiliser une version en cache plus ancienne.
Exemple : Un chemin initial tel que /script/MyScript.js peut être complété par un paramètre de version après traitement. Vous n'avez pas besoin de mettre à jour vous-même le numéro de version pour les fichiers intégrés.
9. Enregistrer et vérifier les modifications
Tout d'abord, enregistrez vos propres fichiers JavaScript et CSS, puis la mise en page modifiée. Rechargez votre page web et vérifiez si vos fonctions JavaScript sont exécutées et si vos règles CSS sont appliquées.
Si un fichier ne se charge pas, vérifiez d'abord le nom du fichier, les majuscules et minuscules, le chemin du dossier et l'intégration dans la mise en page. S'il y a plusieurs mises en page, assurez-vous également d'avoir modifié la mise en page associée à la page concernée.
Résumé
Pour vos propres extensions, par exemple, créez BxHeadScript_own.js dans le dossier bx_script et BxStyle_own.css dans le dossier bx_style. Ensuite, intégrez les deux fichiers dans Layout - HTML, en plus des fichiers CMS d'origine. Ainsi, les fichiers standards restent inchangés, tandis que vous gérez séparément le code JavaScript et CSS spécifique au projet.
FAQ
ce que nos clients nous demandent souvent
Ai-je besoin d'un accès développeur pour intégrer mes propres fichiers JavaScript et CSS ?
Oui. Ce tutoriel s'adresse aux développeurs ayant accès à la définition de la mise en page et aux dossiers de développement du CMS bluetronix.
Où puis-je trouver les intégrations pour JavaScript et CSS ?
Ouvrez Layout et sélectionnez Layout - HTML. Vous pourrez y ajouter les intégrations dans la mise en page souhaitée.
Où puis-je enregistrer un fichier JavaScript personnalisé ?
Dans l'exemple montré, vous créez BxHeadScript_own.js dans le dossier bx_script et vous l'intégrez en complément du fichier existant BxHeadScript.js dans la mise en page.
Où puis-je enregistrer un fichier CSS personnalisé ?
Dans l'exemple montré, votre propre fichier BxStyle_own.css se trouve dans le dossier bx_style. Dans la mise en page, il est intégré après la feuille de style existante.
Pourquoi mes propres fichiers devraient-ils contenir _own dans le nom dans les dossiers système ?
Les dossiers système bx_ marqués en rouge peuvent être écrasés lors des mises à jour. Avec _own, vous marquez vos propres fichiers spécifiques au projet.
Un fichier _own est-il chargé automatiquement dès qu'il est créé ?
Non. Vous devez ajouter votre fichier JavaScript ou CSS dans la mise en page souhaitée avec une intégration script ou link appropriée.
Puis-je utiliser un dossier personnalisé au lieu d'un dossier système bx_ ?
Oui. Dans un dossier de projet créé sans préfixe bx_, _own n'est pas forcément requis. Utilisez dans la mise en page le chemin d'accès au fichier réel.
Devrais-je charger mon propre fichier CSS avant ou après le fichier standard ?
Dans l'exemple montré, BxStyle_own.css est intégré après BxStyle.css. Cela permet à vos propres règles de remplacer les règles standards chargées précédemment avec la même spécificité.
À quoi sert le marquage __FV_…__ dans les chemins de fichiers ?
Le CMS bluetronix peut ainsi ajouter un paramètre de version de fichier, permettant aux navigateurs de charger le fichier actuel après une modification.
Que dois-je vérifier si mon propre fichier n'est pas efficace ?
Vérifiez le nom du fichier, la casse, le chemin spécifié ainsi que l'intégration et la sélection de la mise en page correcte.