Zum Inhalt springen
Dokumentation

Erstellen eines Knowledge-Base-Layouts in Framer

Nachdem Sie Ihre Knowledge-Base-Inhalte erfolgreich von Hinto AI in das CMS von Framer importiert haben, ist der nächste Schritt der Aufbau der Benutzeroberfläche (UI), um diese anzuzeigen. Dieser Prozess umfasst das Erstellen von CMS-gesteuerten Seiten und das Verknüpfen von Framer-Komponenten mit Ihren importierten Sammlungen „Articles“ (Artikel) und „Folders“ (Ordner).

Erstellen der Seitenstruktur

Eine typische Dokumentations-Website erfordert mindestens zwei Seitentypen. Erstens eine Hauptseite (z. B. /docs), die das grundlegende Layout enthält, einschließlich der Navigationsseitenleiste und des Inhaltsbereichs. Zweitens eine dynamische CMS-Seite (z. B. /articles/[slug]), die als Vorlage dient, um den Inhalt jedes einzelnen Artikels anzuzeigen.

Documentation image

Erstellen der Sidebar-Navigation

Die Seitenleiste ermöglicht die Navigation durch Ihre Knowledge Base. Sie sollte alle Ordner (Kategorien) sowie die darin enthaltenen Artikel auflisten. Dies erreichen Sie, indem Sie eine Liste von Ordnern erstellen und innerhalb jedes Ordners eine verschachtelte Liste der entsprechenden Artikel einfügen.

  • Ordnerliste: Fügen Sie eine Komponente hinzu, die Elemente aus Ihrer Folders-Sammlung anzeigt. Dadurch werden die Hauptkategorien in Ihrer Seitenleiste erstellt.
  • Artikelliste: Fügen Sie innerhalb jedes Ordnerelements eine zweite Komponente hinzu, die Elemente aus Ihrer Articles-Sammlung auflistet. Diese Liste muss gefiltert werden, damit nur Artikel angezeigt werden, die zum jeweiligen übergeordneten Ordner gehören.
Documentation image

Filtern und Sortieren der Navigation

Damit die richtigen Artikel unter dem richtigen Ordner erscheinen, müssen Sie einen Filter einrichten. Die Komponente Artikelliste sollte so gefiltert werden, dass das Feld Category (Kategorie) des Artikels mit dem Title (Titel) des aktuellen Ordners übereinstimmt. Um die ursprüngliche Reihenfolge aus Hinto AI beizubehalten, sollten beide Listen nach dem Feld Sort Index in aufsteigender Reihenfolge (niedrig nach hoch) sortiert werden.

Documentation image

Anzeigen des Artikelinhalts

Im Hauptinhaltsbereich Ihrer CMS-Seite verknüpfen Sie Komponenten mit den Feldern Ihrer „Articles“-Sammlung, um die Informationen des aktuell aufgerufenen Artikels anzuzeigen.

  • Artikeltitel: Fügen Sie ein Textelement hinzu und legen Sie dessen Inhalt auf die Variable Title aus der Articles-Sammlung fest.
  • Artikeltext: Fügen Sie ein weiteres Textelement hinzu und legen Sie dessen Inhalt auf die Variable Content fest. Diese Variable enthält den vollständigen HTML-Text Ihres Artikels, einschließlich Überschriften, Absätzen, Listen und Bildern.
Documentation image

Tipps für den Aufbau Ihres Layouts

  • Verwenden Sie die globalen Stiloptionen von Framer, um Stile für HTML-Tags (H1, H2, P, A usw.) zu definieren. So können Sie das Erscheinungsbild Ihrer importierten Inhalte anpassen, ohne sie direkt bearbeiten zu müssen.
  • Verwenden Sie immer das von der Hinto AI-Integration bereitgestellte Feld Sort Index, um sicherzustellen, dass Ihre Ordner und Artikel in der beabsichtigten Reihenfolge angezeigt werden.
  • Der Link für jeden Artikel sollte auf seine entsprechende CMS-Seite gesetzt werden. Framer erledigt dies normalerweise automatisch, wenn Sie auf eine CMS-Sammlung verlinken.

Durch die Verbindung der leistungsstarken Layout-Tools von Framer mit den strukturierten Inhalten aus den CMS-Sammlungen von Hinto AI können Sie schnell und effizient eine voll funktionsfähige, professionelle Knowledge Base erstellen und veröffentlichen.