--- title: "JavaScript personnalisé" slug: "custom-javascript" updated: 2026-06-22T08:30:09Z published: 2026-06-22T08:30:09Z canonical: "docs.document360.com/custom-javascript" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # JavaScript personnalisé JavaScript personnalisé dans Document360 vous permet d’ajouter votre propre code JavaScript pour étendre la fonctionnalité de votre site de base de connaissances au-delà de ce que les paramètres intégrés proposent. Vous collez le code directement dans le portail et il s’exécute sur chaque page de votre site de base de connaissances. C’est l’outil idéal lorsque vous devez ajouter un comportement dynamique, interagir avec des éléments de page, intégrer des scripts tiers ou automatiser des interactions qui ne peuvent pas être configurées avec les paramètres standards. --- ## Quand utiliser JavaScript personnalisé Utilisez JavaScript personnalisé lorsque vous avez besoin d’un comportement ou d’une fonctionnalité que CSS et les paramètres intégrés ne peuvent pas fournir : - **Modifier dynamiquement la structure de la page** – réordonner, montrer ou masquer les éléments de la page selon les conditions. Par exemple, déplacez la section articles associés au-dessus de la section des retours, ou masquez la barre de navigation de gauche pour certains lecteurs. - **Ajoutez de l’interactivité d’en-tête** – ajoutez des icônes de réseaux sociaux, des liens de retour dynamique ou des boutons personnalisés à l’en-tête de navigation en utilisant JavaScript. - **Intégrez des outils tiers** - intégrez des scripts d’analyse, des widgets de discussion, des outils de retour ou un suivi personnalisé qui doivent s’exécuter sur chaque page. - **Affichez uniquement la catégorie active dans la barre latérale gauche** - filtrez l’arbre des catégories pour que seule la catégorie active actuellement active et ses sous-catégories soient visibles, réduisant ainsi le désordre de navigation pour les lecteurs. --- ## Avant que tu commences - Vous devez avoir un compte d’équipe avec un accès administrateur au portail de la base de connaissances. - JavaScript personnalisé s’applique globalement à l’ensemble du site de la base de connaissances – il s’exécute sur chaque page et affecte tous les lecteurs. - Document360 ne valide pas et ne lint pas votre code JavaScript. - Les erreurs ne seront pas signalées automatiquement et des scripts défaillants peuvent perturber l’expérience du site. Testez bien vos modifications avant d’économiser. NOTE Le site de la base de connaissances de Document360 utilise un modèle d’application à page unique (SPA). Cela signifie que seul le contenu de l’article se rafraîchit lorsque le lecteur navigue – et non la page entière. Le JavaScript personnalisé qui dépend des événements de chargement ou de rafraîchissement de page peut ne pas fonctionner comme prévu. Utilisez plutôt l’événement `articleload` : ``` panel.addEventListener('articleload', function() { // Your custom JavaScript code here }); ``` --- ## Comment ajouter du JavaScript personnalisé 1. Naviguez vers () > **Knowledge base site** dans la barre de navigation de gauche du portail de la base de connaissances. 2. Dans le panneau de navigation de gauche, naviguez vers **la personnalisation du site**. ![Site customization page showing the Custom CSS and JavaScript option in the left navigation pane](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890215248.png) 1. **Cliquez sur CSS & JavaScript personnalisés**. 2. Sélectionnez l’onglet **JavaScript** . L’éditeur de code JavaScript apparaît. 3. Collez votre code JavaScript dans la zone de texte. 4. Cliquez **sur Enregistrer** pour appliquer vos modifications. ![JavaScript tab in the Custom CSS and JavaScript editor showing a code snippet pasted in the editor](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom-JavaScript-Snippet.png) Le JavaScript est désormais actif sur votre site de base de connaissances. Visitez le site pour vérifier le comportement. --- ## Exemples de cas d’utilisation Les exemples suivants montrent les personnalisations courantes que vous pouvez obtenir avec JavaScript personnalisé. ### Déplacez les articles liés au-dessus de la section des retours ``` panel.onload = function () { $(".content_block_text").append("
"); $('.related-articles-container').appendTo('.content_block_text') } ``` ### Afficher uniquement la catégorie active dans la barre latérale gauche ``` /* Left sidebar category start */ let parent_data = null; function client_tree_data(data) { parent_data = data; window.clientData = data; const slug = window.location.pathname.split('/').filter(Boolean).pop(); if (slug === "docs") { return [data[0]]; } return data.filter(item => markIfContainsSlug(item, slug)); } function markIfContainsSlug(node, slug) { if (node.slug === slug) { node.found = true; return true; } return node.children?.some(child => markIfContainsSlug(child, slug)) || false; } /* Left sidebar category end */ ``` NOTE Pour plus d’exemples de cas d’utilisation JavaScript, consultez les articles [Astuces et Astuces](https://docs.document360.com/docs/fr/customization-editor) . --- ## Meilleures pratiques - **Utilisez l’événement `articleload` pour la compatibilité SPA** – enveloppez tout le JavaScript qui interagit avec le contenu de l’article à l’intérieur `panel.addEventListener('articleload', function() { ... })` pour garantir qu’il s’active de manière fiable à chaque navigation d’article, pas seulement lors du chargement initial de la page. - **Gardez les scripts ciblés et minimalistes** – JavaScript personnalisé s’exécute sur chaque page. Des scripts gonflés ou lents augmentent le temps de chargement des pages pour tous les lecteurs. N’incluez que ce qui est nécessaire. - **Testez en mode clair et sombre** – les scripts qui manipulent des éléments ou styles DOM peuvent se comporter différemment selon les thèmes. Prévisualisez toujours les deux avant de sauvegarder. - **Commentez votre code** – ajoutez des commentaires en ligne expliquant ce que fait chaque bloc, surtout si plusieurs membres de l’équipe gèrent JavaScript. Exemple : `/* Moves related articles above feedback — added June 2026 */` - **Supprimez les scripts inutilisés** – les scripts qui ne sont plus nécessaires doivent être supprimés de l’éditeur. Le code restant augmente la complexité et peut provoquer des conflits inattendus avec de futurs changements. - **JavaScript personnalisé n’apparaît pas dans les liens d’aperçu partageables** – pour vérifier le comportement final, publiez vos modifications et consultez directement le site de la base de connaissances en ligne. --- ## FAQ **Pourquoi mon JavaScript personnalisé ne fonctionne-t-il pas après qu’un lecteur ait navigué vers un nouvel article ?** Document360 utilise un modèle d’application à page unique (SPA) — lorsqu’un lecteur navigue entre les articles, seul le contenu de l’article se rafraîchit à jour, et non la page entière. JavaScript qui dépend des événements de chargement ou de rafraîchissement de page ne s’exécutera qu’une seule fois lors du chargement initial. Intégrez votre code `panel.addEventListener('articleload', function() { ... })` pour vous assurer qu’il s’exécute à chaque changement de contenu de l’article. **Pourquoi JavaScript personnalisé n’apparaît-il pas dans le lien de prévisualisation partageable ?** JavaScript personnalisé est intentionnellement désactivé dans les liens de prévisualisation partageables afin d’assurer des performances et une sécurité cohérentes lorsque le contenu est partagé à l’extérieur. Pour vérifier vos modifications JavaScript, publiez l’article et accrez-vous directement depuis le site de la base de connaissances, ou utilisez un environnement bac à sable. **Puis-je ajouter des JavaScript différents pour chaque espace de travail ?** Non. Le JavaScript personnalisé est configuré au niveau du projet et s’applique à tous les espaces de travail du projet. Il n’est pas possible d’ajouter du JavaScript séparé pour chaque espace de travail via les paramètres CSS & JavaScript personnalisés.