La création de la documentation la plus complète, exhaustive et actualisée est le souci premier des rédacteurs techniques. Mais les lecteurs veulent un design épuré et moderne, et les entreprises doivent souvent intégrer des sites web de documentation à leur support existant, adoptant ainsi une apparence prédéfinie. Heureusement, l’outil de création d’aide HelpNDoc vous permet d’ajouter rapidement un logo ou un code CSS sur mesure pour une personnalisation rapide, ou même de créer un tout nouveau modèle pour personnaliser entièrement vos productions. Voyons, dans cet article, comment utiliser des icônes personnalisées dans la table des matières de la documentation HTML générée.

Création d’un nouveau modèle

Les fichiers de documentation HelpNDoc sont basés sur des modèles, au travers desquels vous pouvez entièrement personnaliser l’apparence de votre documentation. Nous allons tout d’abord créer un nouveau modèle HTML, avant de personnaliser ses icônes.

Éditeur de modèles : Créer un nouveau modèle HTML

Afin de créer un nouveau modèle HTML, nous utiliserons l’Éditeur de modèle intégré HelpNDoc :

  • Depuis l’onglet “Outils” du ruban de HelpNDoc, cliquez sur “Éditeur de modèles”
  • Dans la partie supérieure de la boîte de dialogue “Éditer un modèle”, cliquez sur le bouton “+”
  • Cliquez sur “Créer un modèle HTML”
  • Indiquez un nom de modèle, comme “Modèle HTML avec icônes personnalisées”
  • Cliquez sur “OK”

Votre nouveau modèle est à présent créé : il est pleinement fonctionnel, puisqu’il s’agit d’une copie fidèle du modèle HTML par défaut de HelpNDoc.

Personnalisation des icônes de la table des matières

Le modèle HTML par défaut utilise un fichier PNG par type d’icône. Nous remplacerons simplement toute icône à personnaliser par un nouveau fichier PNG du même nom.

Éditeur de modèles : Éditeur des actifs

Les icônes de la table des matières sont stockées comme actifs utilisés par le code du modèle personnalisé. Trouvons-les dans l’Éditeur de chapitres :

  • Dans la partie gauche de la boîte de dialogue “Éditer un modèle”, cliquez sur “Actifs” : la hiérarchie des actifs est affichée sur la droite
  • Naviguez jusqu’au dossier des icônes assets/vendors/helpndoc-5/icons : toutes les icônes y sont stockées

Astuce : Pour naviguer et inspecter le dossier du modèle avec l’Explorateur Windows, cliquez sur le bouton “Ouvrir l’emplacement du modèle” dans l’éditeur de modèles de HelpNDoc.

Liste des icônes de la table des matières

Par exemple, nous voulons remplacer l’icône “point d’interrogation” par défaut du chapitre. Le nom du fichier est 8.png :

  • Trouvez et sélectionnez le fichier 8.png dans le répertoire assets/vendors/helpndoc-5/icons
  • Cliquez sur le bouton “Supprimer” dans la barre d’outils et confirmez
  • Cliquez sur le bouton “Importer”
  • Choisissez la nouvelle icône sur votre disque dur et cliquez sur “Ouvrir”. Remarque : les icônes doivent mesurer 16x16 pixels pour être affichées correctement dans la documentation finale
  • Renommez, au besoin, le fichier nouvellement importé en 8.png grâce au bouton “Renommer” et déplacez-le dans le bon dossier : assets/vendors/helpndoc-5/icons
  • Cliquez sur “Enregistrer” pour confirmer les modifications apportées à votre modèle

Votre nouveau modèle est dorénavant prêt et susceptible d’être utilisé dans n’importe lequel de vos projets de documentation : il utilisera votre icône personnalisée comme icône de chapitre.

Utilisation du modèle dans vos projets de documentation

Le modèle HTML ayant été créé et personnalisé, il peut maintenant être utilisé pour réaliser vos projets de documentation HTML. Voyons comment le faire.

Boîte de dialogue de génération de documentation : choisir un modèle

Une fois que vous avez ouvert votre projet de documentation dans HelpNDoc, dans l’onglet “Accueil” du ruban, cliquez sur la partie supérieure du bouton “Générer l’aide” pour accéder à la boîte de dialogue “Générer la documentation”.
Sélectionnez le modèle HTML dans la “Liste des constructions” à gauche, puis cliquez sur le lien “Default HTML Template” à droite pour choisir le modèle nouvellement créé.
Et voilà ! Il suffit de re-générer la documentation et elle utilisera automatiquement le jeu d’icônes personnalisées.

Documentation HTML générée : utiliser les icônes personnalisées

Grâce au très puissant système de modèles de HelpNDoc, il est possible de personnaliser quasiment n’importe quelle section des projets de documentation générés. Dans cet article, nous avons créé un nouveau modèle afin de personnaliser les icônes dans la table des matières. Ce n’est là qu’un infime aperçu des possibilités des modèles de HelpNDoc. Vous pouvez consulter l’un des modèles installés avec HelpNDoc (Single page HTML template, iPhone template, jQuery mobile template…) pour avoir des exemples supplémentaires. Il est également possible d’en apprendre davantage sur les modèles dans la documentation ou via les divers articles sur ce site web.
HelpNDoc est gratuit pour un usage personnel et à des fins d’évaluation. N’hésitez pas à l’essayer aussi longtemps que nécessaire et, comme toujours, aimez documenter !

Voir aussi...

Une étudiante retourne à l'école en utilisant HelpNDoc [woman] [featured]
Transformez votre salle de classe avec HelpNDoc : l'outil ultime de la rentrée pour les enseignants et les étudiants

À l’approche de la rentrée scolaire, les enseignants et les étudiants sont à la recherche d’outils susceptibles de simplifier la création de contenu, d’améliorer la collaboration et d’enrichir …

Lire la suite →
Taille et position des fichiers d'aide CHM [chm] [featured]
Comment Personnaliser la Position et la Taille Initiales des Fichiers d'Aide CHM

Créer des fichiers CHM (Compiled HTML Help) avec HelpNDoc est un jeu d’enfant, grâce à son interface conviviale et à ses puissantes fonctionnalités. Dans cet article, nous examinerons comment vous …

Lire la suite →
Produire du MarkDown avec l'outil de création d'aide HelpNDoc [markdown] [featured]
Équilibrer la sécurité et la facilité d'utilisation : Les meilleurs formats de documentation pour le partage interne

Le partage efficace et sécurisé de la documentation est essentiel sur le lieu de travail moderne. Que vous distribuiez des manuels internes, de la documentation sur des projets ou des directives …

Lire la suite →
Illustration de l'analyseur de caractères de HelpNDoc [illustration] [Featured]
L'arme secrète des rédacteurs techniques : les avantages uniques de l'analyseur de caractères de HelpNDoc

HelpNDoc est une solution de choix pour les professionnels qui cherchent à créer une documentation de haute qualité, attrayante et conviviale. Cependant, ce n’est pas seulement son interface …

Lire la suite →

Catégories: articles