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.

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.

3. Cliquez sur CSS & JavaScript personnalisés.
4. Sélectionnez l’onglet JavaScript . L’éditeur de code JavaScript apparaît.
5. Collez votre code JavaScript dans la zone de texte.
6. Cliquez sur Enregistrer pour appliquer vos modifications.

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("<div class=\"sperator\"><hr></div>");
  $('.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 */

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