Crea un diseño de base de conocimientos en Framer
Una vez que hayas importado correctamente el contenido de tu base de conocimientos desde Hinto AI al CMS de Framer, el siguiente paso es construir la interfaz de usuario (UI) para mostrarlo. Este proceso implica crear páginas basadas en el CMS y vincular los componentes de Framer a tus colecciones importadas de «Artículos» y «Carpetas».
Creación de la estructura de la página
Un sitio de documentación típico requiere al menos dos tipos de página. Primero, una página principal (por ejemplo, /docs) que contenga el diseño general, incluida la barra lateral de navegación y el área de contenido. Segundo, una página dinámica del CMS (por ejemplo, /articles/[slug]) que sirva como plantilla para mostrar el contenido de cada artículo individual.
Creación de la navegación en la barra lateral
La barra lateral permite navegar por tu base de conocimientos. Debe enumerar todas las carpetas (categorías) y los artículos contenidos en ellas. Esto se logra creando una lista de carpetas y, dentro de cada una, una lista anidada de sus artículos correspondientes.
- Lista de carpetas: Añade un componente que muestre elementos de tu colección de Carpetas. Esto creará los encabezados de las categorías principales en tu barra lateral.
- Lista de artículos: Dentro de cada elemento de carpeta, añade un segundo componente que enumere los elementos de tu colección de Artículos. Esta lista debe filtrarse para mostrar solo los artículos que pertenecen a la carpeta principal.
Filtrado y ordenación de la navegación
Para asegurarte de que los artículos correctos aparezcan bajo la carpeta correcta, debes configurar un filtro. El componente Lista de artículos debe filtrarse donde el campo Categoría del artículo coincida con el Título de la carpeta actual. Para mantener el orden original de Hinto AI, ambas listas deben ordenarse por el campo Índice de orden de forma ascendente (de menor a mayor).
Visualización del contenido del artículo
En el área de contenido principal de tu página del CMS, vincularás los componentes a los campos de tu colección de «Artículos» para mostrar la información del artículo que se está visualizando.
- Título del artículo: Añade un elemento de texto y configura su contenido con la variable Título de la colección de Artículos.
- Cuerpo del artículo: Añade otro elemento de texto y configura su contenido con la variable Contenido. Esta variable contiene el cuerpo HTML completo de tu artículo, incluyendo encabezados, párrafos, listas e imágenes.
Consejos para crear tu diseño
- Utiliza las opciones de estilo global de Framer para definir estilos para etiquetas HTML (H1, H2, P, A, etc.). Esto te permite personalizar la apariencia de tu contenido importado sin editarlo directamente.
- Utiliza siempre el campo Índice de orden proporcionado por la integración de Hinto AI para garantizar que tus carpetas y artículos se muestren en el orden previsto.
- El enlace de cada artículo debe configurarse hacia su página de CMS correspondiente. Framer suele gestionar esto automáticamente cuando vinculas a una colección de CMS.
Al conectar las potentes herramientas de diseño de Framer con el contenido estructurado de las colecciones de CMS de Hinto AI, puedes crear y lanzar una base de conocimientos profesional y completa de forma rápida y eficiente.