After you have successfully imported your knowledge base content from Hinto AI into Framer's CMS, the next step is to build the user interface (UI) to display it. This process involves creating CMS-driven pages and linking Framer components to your imported 'Articles' and 'Folders' collections.
A typical documentation site requires at least two page types. First, a primary page (e.g., /docs) that contains the main layout, including the navigation sidebar and content area. Second, a dynamic CMS page (e.g., /articles/[slug]) which serves as a template to display the content for each individual article.
The sidebar provides navigation through your knowledge base. It should list all the folders (categories) and the articles nested within them. This is achieved by creating a list of folders, and within each folder, a nested list of its corresponding articles.
To ensure the correct articles appear under the correct folder, you must set up a filter. The Articles List component should be filtered where the Category field from the article matches the Title of the current folder. To maintain the original order from Hinto AI, both lists should be sorted by the Sort Index field in ascending order (Low to High).
On the main content area of your CMS page, you'll link components to the fields in your 'Articles' collection to display the currently viewed article's information.
By connecting Framer's powerful layout tools with the structured content from Hinto AI's CMS collections, you can build and launch a fully-featured, professional knowledge base quickly and efficiently.