Framerでナレッジベースのレイアウトを構築する

Hinto AIからFramerのCMSへナレッジベースのコンテンツを正常にインポートできたら、次はそれを表示するためのユーザーインターフェース（UI）を構築します。このプロセスでは、CMS主導のページを作成し、Framerのコンポーネントをインポート済みの「Articles（記事）」および「Folders（フォルダ）」コレクションにリンクさせます。

ページ構造の作成

一般的なドキュメントサイトには、少なくとも2種類のページが必要です。1つ目はメインのレイアウトを含むプライマリページ（例: /docs）で、ナビゲーションサイドバーやコンテンツエリアを配置します。2つ目は動的なCMSページ（例: /articles/[slug]）で、各記事のコンテンツを表示するためのテンプレートとして機能します。

サイドバーナビゲーションの構築

サイドバーは、ナレッジベース内を移動するためのものです。すべてのフォルダ（カテゴリ）と、その中にネストされた記事を一覧表示する必要があります。これは、フォルダのリストを作成し、各フォルダの中に該当する記事のネストされたリストを作成することで実現します。

フォルダリスト: Foldersコレクションのアイテムを表示するコンポーネントを追加します。これにより、サイドバーにメインカテゴリの見出しが作成されます。
記事リスト: 各フォルダアイテムの中に、Articlesコレクションのアイテムをリスト表示する2つ目のコンポーネントを追加します。このリストは、親フォルダに属する記事のみを表示するようにフィルタリングする必要があります。

ナビゲーションのフィルタリングと並び替え

正しい記事が正しいフォルダの下に表示されるように、フィルターを設定する必要があります。記事リストコンポーネントは、記事のCategoryフィールドが現在のフォルダのTitleと一致するようにフィルタリングしてください。Hinto AIから引き継いだ順序を維持するために、両方のリストをSort Indexフィールドで昇順（小さい順）に並び替える必要があります。

記事コンテンツの表示

CMSページのメインコンテンツエリアで、コンポーネントを「Articles」コレクションのフィールドにリンクさせ、現在表示中の記事情報を表示します。

記事タイトル: テキスト要素を追加し、そのコンテンツをArticlesコレクションのTitle変数に設定します。
記事本文: 別のテキスト要素を追加し、そのコンテンツをContent変数に設定します。この変数には、見出し、段落、リスト、画像を含む記事のHTML本文全体が含まれています。

レイアウト構築のヒント

Framerのグローバルスタイルオプションを使用して、HTMLタグ（H1、H2、P、Aなど）のスタイルを定義してください。これにより、インポートされたコンテンツを直接編集することなく、外観をカスタマイズできます。
フォルダや記事が意図した順序で表示されるよう、Hinto AIの統合機能で提供されるSort Indexフィールドを必ず使用してください。
各記事へのリンクは、対応するCMSページに設定する必要があります。Framerでは、CMSコレクションにリンクする際、通常この処理は自動的に行われます。

Framerの強力なレイアウトツールと、Hinto AIのCMSコレクションから得られる構造化されたコンテンツを組み合わせることで、機能が充実したプロフェッショナルなナレッジベースを迅速かつ効率的に構築・公開できます。