Créer une mise en page de base de connaissances dans Framer
Une fois que vous avez importé avec succès le contenu de votre base de connaissances depuis Hinto AI vers le CMS de Framer, l'étape suivante consiste à concevoir l'interface utilisateur (UI) pour l'afficher. Ce processus implique la création de pages pilotées par le CMS et la liaison des composants Framer à vos collections « Articles » et « Dossiers » importées.
Création de la structure de page
Un site de documentation classique nécessite au moins deux types de pages. Premièrement, une page principale (par ex. /docs) qui contient la mise en page globale, incluant la barre latérale de navigation et la zone de contenu. Deuxièmement, une page CMS dynamique (par ex. /articles/[slug]) qui sert de modèle pour afficher le contenu de chaque article individuel.
Construction de la barre latérale de navigation
La barre latérale permet de naviguer dans votre base de connaissances. Elle doit lister tous les dossiers (catégories) ainsi que les articles qu'ils contiennent. Pour ce faire, créez une liste de dossiers, puis, à l'intérieur de chaque dossier, une liste imbriquée des articles correspondants.
- Liste des dossiers : Ajoutez un composant qui affiche les éléments de votre collection Dossiers. Cela créera les titres des catégories principales dans votre barre latérale.
- Liste des articles : Dans chaque élément de dossier, ajoutez un second composant qui liste les éléments de votre collection Articles. Cette liste doit être filtrée pour ne montrer que les articles appartenant au dossier parent.
Filtrage et tri de la navigation
Pour garantir que les bons articles apparaissent sous le bon dossier, vous devez configurer un filtre. Le composant Liste des articles doit être filtré de manière à ce que le champ Catégorie de l'article corresponde au Titre du dossier actuel. Afin de conserver l'ordre initial provenant de Hinto AI, les deux listes doivent être triées par le champ Sort Index par ordre croissant (du plus petit au plus grand).
Affichage du contenu de l'article
Dans la zone de contenu principale de votre page CMS, vous lierez des composants aux champs de votre collection « Articles » pour afficher les informations de l'article consulté.
- Titre de l'article : Ajoutez un élément textuel et définissez son contenu sur la variable Titre de la collection Articles.
- Corps de l'article : Ajoutez un autre élément textuel et définissez son contenu sur la variable Contenu. Cette variable contient le corps HTML complet de votre article, incluant les titres, les paragraphes, les listes et les images.
Conseils pour construire votre mise en page
- Utilisez les options de style globales de Framer pour définir les styles des balises HTML (H1, H2, P, A, etc.). Cela vous permet de personnaliser l'apparence de votre contenu importé sans avoir à le modifier directement.
- Utilisez toujours le champ Sort Index fourni par l'intégration Hinto AI pour garantir que vos dossiers et articles s'affichent dans l'ordre souhaité.
- Le lien de chaque article doit être dirigé vers sa page CMS correspondante. Framer gère généralement cela automatiquement lorsque vous effectuez une liaison vers une collection CMS.
En combinant les puissants outils de mise en page de Framer avec le contenu structuré des collections CMS de Hinto AI, vous pouvez créer et lancer rapidement et efficacement une base de connaissances professionnelle et complète.