Crie um layout de base de conhecimento no Framer
Depois de importar com sucesso o conteúdo da sua base de conhecimento do Hinto AI para o CMS do Framer, o próximo passo é construir a interface do usuário (UI) para exibi-lo. Esse processo envolve a criação de páginas orientadas pelo CMS e a vinculação de componentes do Framer às suas coleções importadas de 'Artigos' e 'Pastas'.
Criando a estrutura da página
Um site de documentação típico requer pelo menos dois tipos de página. Primeiro, uma página principal (por exemplo, /docs) que contém o layout central, incluindo a barra lateral de navegação e a área de conteúdo. Segundo, uma página dinâmica de CMS (por exemplo, /articles/[slug]) que serve como um modelo para exibir o conteúdo de cada artigo individual.
Construindo a navegação da barra lateral
A barra lateral permite a navegação pela sua base de conhecimento. Ela deve listar todas as pastas (categorias) e os artigos aninhados nelas. Isso é feito criando uma lista de pastas e, dentro de cada pasta, uma lista aninhada dos artigos correspondentes.
- Lista de Pastas: Adicione um componente que exiba os itens da sua coleção Pastas. Isso criará os títulos das categorias principais na sua barra lateral.
- Lista de Artigos: Dentro de cada item de pasta, adicione um segundo componente que liste os itens da sua coleção Artigos. Essa lista deve ser filtrada para mostrar apenas os artigos que pertencem à pasta pai.
Filtrando e classificando a navegação
Para garantir que os artigos corretos apareçam sob a pasta correta, você deve configurar um filtro. O componente Lista de Artigos deve ser filtrado onde o campo Categoria do artigo corresponda ao Título da pasta atual. Para manter a ordem original do Hinto AI, ambas as listas devem ser classificadas pelo campo Índice de Classificação em ordem crescente (do menor para o maior).
Exibindo o conteúdo do artigo
Na área de conteúdo principal da sua página de CMS, você vinculará os componentes aos campos da sua coleção de 'Artigos' para exibir as informações do artigo visualizado no momento.
- Título do Artigo: Adicione um elemento de texto e defina seu conteúdo como a variável Título da coleção de Artigos.
- Corpo do Artigo: Adicione outro elemento de texto e defina seu conteúdo como a variável Conteúdo. Essa variável contém o corpo HTML completo do seu artigo, incluindo títulos, parágrafos, listas e imagens.
Dicas para construir seu layout
- Use as opções de estilo global do Framer para definir estilos para tags HTML (H1, H2, P, A, etc.). Isso permite que você personalize a aparência do conteúdo importado sem editá-lo diretamente.
- Sempre use o campo Índice de Classificação fornecido pela integração com o Hinto AI para garantir que suas pastas e artigos sejam exibidos na ordem desejada.
- O link de cada artigo deve ser definido para sua página de CMS correspondente. O Framer geralmente lida com isso automaticamente quando você vincula a uma coleção de CMS.
Ao conectar as poderosas ferramentas de layout do Framer ao conteúdo estruturado das coleções de CMS do Hinto AI, você pode criar e publicar uma base de conhecimento profissional e completa de forma rápida e eficiente.