Cómo personalizar tu portal Docsie inyectando el código embebido de Docsie en Visual Studio Code.
Docsie ofrece muchas posibilidades de personalización. En este artículo te guiaré por los pasos necesarios para empezar a personalizar tu portal Docsie. Ten en cuenta que no soy desarrollador ni diseñador profesional, y tu equipo técnico puede utilizar estas herramientas para crear portales Docsie mucho más atractivos que los míos. ¡Esta es simplemente una guía paso a paso para ayudarles a empezar!
PASO 1¶
El primer paso es obtener tu línea de código. Así es como se hace. Encuentra tu cuenta en la esquina superior derecha donde hay tres puntos y haz clic. Te llevará al panel de configuración de Docsie.
PASO 2¶
A continuación, haz clic en el botón 'Deployment' (Implementación) en el lado izquierdo.
Una vez en la configuración de implementación, tienes la posibilidad de crear un portal de conocimiento a través de Docsie Cloud, o crear un portal de conocimiento en tu propio sitio web mediante una línea de código que puedes añadir a tu HTML para comenzar el proceso de estilización. Esto se hace simplemente haciendo clic en 'Configure a new deployment +' (Configurar una nueva implementación +)
PASO 3¶
A continuación, haz clic en la pestaña 'Custom deployment' (Implementación personalizada), escribe tu sitio web en 'Deployment URL' (URL de implementación) y luego haz clic en 'Create web portal' (Crear portal web).
Una vez hecho esto, asegúrate de desplazarte hacia abajo para encontrar tu portal al final de la lista de portales y luego haz clic en 'Get deployment script' (Obtener script de implementación).
PASO 4¶
Ahora copia tu script y ¡pasemos a Visual Studio Code!
Si necesitas más información sobre cómo obtener el código embebido de tu Docsie, consulta mi blog sobre cómo publicar tu documentación con el código embebido aquí.
Ahora, en Visual Studio Code crea un archivo (a menos que ya tengas uno listo) para index.html, index.css e index.js. Una vez hecho esto, abre tu HTML y pega tu código dentro del cuerpo de tu HTML (debajo de la etiqueta </head>).
PASO 5¶
Ahora para el paso 5 necesitamos crear un 'Estilo básico'.
Puedes encontrar más información sobre cómo aplicar estilos básicos a tus portales Docsie a través de nuestro enlace aquí https://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/
Para mi ejemplo, añadí esto a mi HTML. Como puedes ver, agregué un enlace con el nombre de la empresa e hice algunas modificaciones leves en CSS para alterarlos.
Mis resultados se ven muy básicos, pero quería que vieras el potencial que tu equipo técnico puede aprovechar para mejorar los portales de conocimiento Docsie y crear portales que coincidan con la apariencia y sensación de tu marca. Ten en cuenta que puedes tener un estilo y colores diferentes; de hecho, en la mayoría de los casos, nuestros usuarios colocan su logotipo con enlaces a su sitio web, agregan barras de navegación en la parte superior para que su portal de conocimiento Docsie se integre perfectamente en sus sitios web corporativos y coincida con el entorno y el CSS de sus sitios actuales.
PASO 6¶
El último paso fue añadir algunos cambios de estilo mediante este texto:
<style>
:root {
--docsie-font-family: garamond;
--docsie-font-family-head: inherit;
--docsie-font-family-mono: monospace;
--docsie-hue-primary: 200;
--docsie-hue-gray: var(--docsie-hue-primary);
--docsie-sat-primary: 100%;
--docsie-page-width: 1800px;
--docsie-notice-background: var(--docsie-color-primary-darker);
}
</style>
Lo pegué debajo de la última etiqueta div del 'estilo básico'.
Y los resultados de mis cambios de estilo muy básicos fueron estos:
Ahora que tienes todas las herramientas a tu disposición, pruébalo tú mismo y experimenta cómo se siente cambiar las cosas y crear hermosos portales de conocimiento de los que puedas estar orgulloso. Estoy 100% seguro de que tus portales de conocimiento se verán mucho más elegantes que los míos. :) ¡Así que inténtalo y, sobre todo, diviértete con ello!