Documentation

Build a Knowledge Base Layout in Framer

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.

Creating the Page Structure

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.

Documentation image

Building the Sidebar Navigation

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.

  • Folders List: Add a component that displays items from your Folders collection. This will create the main category headings in your sidebar.
  • Articles List: Within each folder item, add a second component that lists items from your Articles collection. This list must be filtered to only show articles that belong to the parent folder.
Documentation image

Filtering and Sorting the Navigation

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).

Documentation image

Displaying the Article Content

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.

  • Article Title: Add a text element and set its content to the Title variable from the Articles collection.
  • Article Body: Add another text element and set its content to the Content variable. This variable contains the full HTML body of your article, including headings, paragraphs, lists, and images.
Documentation image

Tips for Building Your Layout

  • Use Framer's global styling options to define styles for HTML tags (H1, H2, P, A, etc.). This allows you to customize the appearance of your imported content without editing it directly.
  • Always use the Sort Index field provided by the Hinto AI integration to ensure your folders and articles are displayed in the intended order.
  • The link for each article should be set to its corresponding CMS page. Framer typically handles this automatically when you link to a CMS collection.

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.