Costruire un layout per la knowledge base in Framer
Dopo aver importato con successo i contenuti della tua knowledge base da Hinto AI nel CMS di Framer, il passo successivo è costruire l'interfaccia utente (UI) per visualizzarli. Questo processo prevede la creazione di pagine basate sul CMS e il collegamento dei componenti di Framer alle tue raccolte importate di "Articoli" e "Cartelle".
Creazione della struttura della pagina
Un tipico sito di documentazione richiede almeno due tipi di pagina. Innanzitutto, una pagina principale (ad esempio /docs) che contenga il layout generale, inclusi la barra laterale di navigazione e l'area dei contenuti. In secondo luogo, una pagina CMS dinamica (ad esempio /articles/[slug]) che funga da modello per visualizzare il contenuto di ogni singolo articolo.
Costruzione della barra di navigazione laterale
La barra laterale permette di navigare all'interno della knowledge base. Dovrebbe elencare tutte le cartelle (categorie) e gli articoli in esse contenuti. Questo si ottiene creando un elenco di cartelle e, all'interno di ciascuna, un elenco nidificato dei relativi articoli.
- Elenco cartelle: aggiungi un componente che visualizzi gli elementi della tua raccolta Cartelle. Questo creerà le intestazioni delle categorie principali nella barra laterale.
- Elenco articoli: all'interno di ogni elemento cartella, aggiungi un secondo componente che elenchi gli elementi della tua raccolta Articoli. Questo elenco deve essere filtrato per mostrare solo gli articoli che appartengono alla cartella padre.
Filtraggio e ordinamento della navigazione
Per assicurarti che gli articoli corretti appaiano sotto la cartella giusta, devi impostare un filtro. Il componente Elenco articoli deve essere filtrato in modo che il campo Categoria dell'articolo corrisponda al Titolo della cartella corrente. Per mantenere l'ordine originale proveniente da Hinto AI, entrambi gli elenchi dovrebbero essere ordinati in base al campo Indice di ordinamento in ordine crescente (dal più basso al più alto).
Visualizzazione del contenuto dell'articolo
Nell'area dei contenuti principale della tua pagina CMS, collegherai i componenti ai campi della tua raccolta "Articoli" per mostrare le informazioni dell'articolo attualmente visualizzato.
- Titolo articolo: aggiungi un elemento di testo e imposta il suo contenuto sulla variabile Titolo della raccolta Articoli.
- Corpo dell'articolo: aggiungi un altro elemento di testo e imposta il suo contenuto sulla variabile Contenuto. Questa variabile contiene il corpo HTML completo del tuo articolo, inclusi titoli, paragrafi, elenchi e immagini.
Suggerimenti per la costruzione del layout
- Usa le opzioni di stile globale di Framer per definire gli stili dei tag HTML (H1, H2, P, A, ecc.). Questo ti permette di personalizzare l'aspetto dei contenuti importati senza doverli modificare direttamente.
- Usa sempre il campo Indice di ordinamento fornito dall'integrazione di Hinto AI per assicurarti che cartelle e articoli vengano visualizzati nell'ordine desiderato.
- Il link per ogni articolo dovrebbe essere impostato sulla sua pagina CMS corrispondente. Framer solitamente gestisce questa operazione automaticamente quando colleghi una raccolta CMS.
Collegando i potenti strumenti di layout di Framer ai contenuti strutturati delle raccolte CMS di Hinto AI, puoi costruire e lanciare una knowledge base professionale, completa di ogni funzionalità, in modo rapido ed efficiente.