Bouw een lay-out voor een kennisbank in Framer
Nadat je de inhoud van je kennisbank vanuit Hinto AI succesvol hebt geïmporteerd in het CMS van Framer, is de volgende stap het bouwen van de gebruikersinterface (UI) om deze te tonen. Dit proces omvat het maken van pagina's op basis van het CMS en het koppelen van Framer-componenten aan je geïmporteerde 'Artikelen'- en 'Mappen'-collecties.
De paginastructuur maken
Een standaard documentatiewebsite vereist minstens twee paginatypes. Ten eerste een hoofdpagina (bijv. /docs) die de algemene lay-out bevat, inclusief de navigatiezijbalk en het inhoudsgebied. Ten tweede een dynamische CMS-pagina (bijv. /articles/[slug]) die dient als sjabloon om de inhoud van elk afzonderlijk artikel weer te geven.
De zijbalknavigatie bouwen
De zijbalk zorgt voor de navigatie door je kennisbank. Deze moet alle mappen (categorieën) en de daarin geneste artikelen weergeven. Dit bereik je door een lijst met mappen aan te maken, met daarbinnen een geneste lijst van de bijbehorende artikelen.
- Mappenlijst: Voeg een component toe die items uit je Mappen-collectie toont. Hiermee maak je de hoofdkoppen voor de categorieën in je zijbalk.
- Artikelenlijst: Voeg binnen elk item in de map een tweede component toe die items uit je Artikelen-collectie opsomt. Deze lijst moet worden gefilterd zodat alleen artikelen worden getoond die bij de betreffende bovenliggende map horen.
De navigatie filteren en sorteren
Om ervoor te zorgen dat de juiste artikelen onder de juiste map verschijnen, moet je een filter instellen. De Artikelenlijst-component moet worden gefilterd op basis van het Categorie-veld van het artikel, dat overeen moet komen met de Titel van de huidige map. Om de oorspronkelijke volgorde uit Hinto AI te behouden, moeten beide lijsten worden gesorteerd op het Sorteerindex-veld in oplopende volgorde (laag naar hoog).
De artikelinhoud weergeven
In het hoofdinhoudsgebied van je CMS-pagina koppel je componenten aan de velden uit je 'Artikelen'-collectie om de informatie van het momenteel bekeken artikel te tonen.
- Artikeltitel: Voeg een tekstelement toe en stel de inhoud in op de Titel-variabele uit de Artikelen-collectie.
- Artikeltekst: Voeg nog een tekstelement toe en stel de inhoud in op de Inhoud-variabele. Deze variabele bevat de volledige HTML-tekst van je artikel, inclusief koppen, alinea's, lijsten en afbeeldingen.
Tips voor het bouwen van je lay-out
- Gebruik de globale stijlinstellingen van Framer om stijlen voor HTML-tags (H1, H2, P, A, enz.) te definiëren. Hiermee kun je het uiterlijk van je geïmporteerde inhoud aanpassen zonder deze direct te hoeven bewerken.
- Gebruik altijd het Sorteerindex-veld dat door de Hinto AI-integratie wordt geleverd om ervoor te zorgen dat je mappen en artikelen in de beoogde volgorde worden weergegeven.
- De link voor elk artikel moet worden ingesteld op de bijbehorende CMS-pagina. Framer regelt dit meestal automatisch wanneer je linkt naar een CMS-collectie.
Door de krachtige lay-outtools van Framer te verbinden met de gestructureerde inhoud uit de CMS-collecties van Hinto AI, kun je snel en efficiënt een professionele, volwaardige kennisbank bouwen en lanceren.