Cómo actualizar iconos de la tabla de contenidos de tu documentación HTML

Crear la documentación más completa, exhaustiva y actualizada es la prioridad número uno de cualquier escritor técnico. Pero los lectores esperan un diseño limpio y moderno y las compañías a veces necesitan integrar páginas web de documentación con su material existente, por lo que se imita un aspecto y una dinámica predefinidos. Por suerte, la herramienta de creación de documentación de ayuda HelpNDoc te permite añadir con rapidez un logotipo o un código CSS personalizado para una rápida personalización, o incluso crear una plantilla completamente nueva para personalizar por completo los entregables de tus proyectos. En este artículo veremos cómo puedes usar iconos personalizados en la tabla de contenidos de la documentación HTML generada.

Crear una nueva plantilla

La documentación producida con HelpNDoc se basa en plantillas, donde puedes personalizar por completo el modo en que se genera tu documentación. Primero crearemos una nueva plantilla HTML y luego personalizaremos sus iconos.

Editor de plantillas: Crear nueva plantilla HTML

Para poder crear una nueva plantilla HTML, usaremos el editor de plantillas integrado de HelpNDoc:

En la cinta “Herramientas” de HelpNDoc, haz clic en “Editor de plantillas”
En la parte superior del cuadro de diálogo “Editar plantilla”, haz clic en el botón “+”
Haz clic en “Crear plantilla HTML”
Introduce un nombre de plantilla, como “Plantilla HTML con iconos personalizados”
Haz clic en “OK”

Ya se ha creado tu nueva plantilla: es completamente funcional, porque es una copia exacta de la plantilla HTML predeterminada de HelpNDoc.

Personalizar iconos de tabla de contenidos

La plantilla HTML predeterminada usa un archivo PNG por tipo de icono. Sencillamente reemplazaremos los iconos que queramos personalizar con un nuevo archivo PNG con el mismo nombre.

Los iconos de la tabla de contenidos se guardan como assets usados por el código de la plantilla personalizada. Vamos a localizarlos en el editor de temas:

En la parte izquierda del cuadro de diálogo “Editar plantilla”, haz clic en “Assets”: la jerarquía de assets se mostrará a la derecha
Navega hasta la carpeta de iconos assets/vendors/helpndoc-5/icons: todos los iconos están guardados en esa carpeta

Consejo: Para navegar hasta e inspeccionar la carpeta de plantillas usando Windows Explorer, haz clic en el botón “Abrir ubicación de plantilla” en el editor de plantillas de HelpNDoc.

Digamos que quieres reemplazar el icono de tema “interrogación” predeterminado. Su nombre de archivo es 8.png:

Localiza y selecciona el archivo llamado 8.png en el directorio assets/vendors/helpndoc-5/icons
Haz clic en el botón “Eliminar” en la barra de herramientas y confirma
Haz clic en el botón “Importar”
Elige el nuevo icono en tu disco duro y haz clic en “Abrir”. Nota: los iconos deben tener un tamaño de 16x16 píxels para que se vean bien en la documentación final
Si es necesario, renombra el archivo recién importado como 8.png usando el botón “Renombrar” y pásalo a la carpeta correcta: assets/vendors/helpndoc-5/icons
Haz clic en “Guardar” para guardar los cambios en la plantilla

Tu nueva plantilla ya está lista y puede ser usada en cualquiera de tus proyectos de documentación: utilizará tu icono personalizado como un icono de tema.

Usa la plantilla en tus proyectos de documentación

Ahora que has creado y personalizado la plantilla HTML, se puede usar para crear proyectos de documentación. Veamos cómo hacerlo.

Cuadro de diálogo de generación de documentación: elige una plantilla

Una vez abierto tu proyecto de documentación en HelpNDoc, en la pestaña “Inicio”, haz clic en la parte superior del botón “Generar ayuda” para acceder al cuadro de diálogo “Generar documentación”.
Selecciona la disposición HTML en la “Lista de disposiciones” de la izquierda y luego haz clic en el enlace “Plantilla HTML predeterminada” que hay a la derecha para elegir la plantilla recién creada.
¡Y ya está! Solo tienes que volver a generar la documentación y se usará automáticamente el grupo de iconos personalizados.

Documentación HTML generada: uso de iconos personalizados

Gracias al potente sistema de plantillas de HelpNDoc, se puede personalizar casi cualquier parte de los proyectos de documentación generados. En este artículo, hemos creado una plantilla nueva para personalizar iconos en la tabla de contenido. Esta es solo una pequeña muestra de las capacidades de las plantillas de HelpNDoc. Puedes inspeccionar una de las plantillas integradas en HelpNDoc (Plantilla HTML de una página, plantilla para iPhone, plantilla kQuery móvil…) para ver algunos ejemplos adicionales. También encontrarás más información sobre plantillas en la documentación, o en diversos artículos en esta página web.
HelpNDoc es gratuito para uso personal y de evaluación. No dudes en probarlo durante todo el tiempo que necesites y, como siempre, ¡disfruta creando documentación!.

Ver también...

Domina las actualizaciones de contenido con las herramientas de búsqueda y sustitución para escritores técnicos de HelpNDoc

¿Estás cansado de la lucha constante para mantener la documentación consistente, actualizada y sin errores? Para los escritores técnicos y autores de contenido, gestionar estas dificultades puede ser …

Lee Mas →