Framer에서 지식 베이스 레이아웃 구축하기
Hinto AI에서 Framer의 CMS로 지식 베이스 콘텐츠를 성공적으로 가져왔다면, 다음 단계는 이를 표시할 사용자 인터페이스(UI)를 구축하는 것입니다. 이 과정에는 CMS 기반 페이지를 만들고, 가져온 'Articles(문서)' 및 'Folders(폴더)' 컬렉션에 Framer 컴포넌트를 연결하는 작업이 포함됩니다.
페이지 구조 만들기
일반적인 문서 사이트에는 최소 두 가지 유형의 페이지가 필요합니다. 첫 번째는 탐색 사이드바와 콘텐츠 영역을 포함하는 기본 레이아웃인 기본 페이지(예: /docs)입니다. 두 번째는 각 문서의 내용을 표시하는 템플릿 역할을 하는 동적 CMS 페이지(예: /articles/[slug])입니다.
사이드바 탐색 구축하기
사이드바는 지식 베이스를 탐색하는 기능을 제공합니다. 사이드바에는 모든 폴더(카테고리)와 그 안에 포함된 문서가 나열되어야 합니다. 이를 위해 폴더 목록을 만들고, 각 폴더 내에 해당 문서의 중첩 목록을 생성합니다.
- 폴더 목록: Folders 컬렉션의 항목을 표시하는 컴포넌트를 추가합니다. 이렇게 하면 사이드바에 주요 카테고리 제목이 생성됩니다.
- 문서 목록: 각 폴더 항목 안에 Articles 컬렉션의 항목을 나열하는 두 번째 컴포넌트를 추가합니다. 이 목록은 상위 폴더에 속한 문서만 표시하도록 필터링되어야 합니다.
탐색 필터링 및 정렬
올바른 폴더 아래에 정확한 문서가 나타나도록 필터를 설정해야 합니다. 문서 목록 컴포넌트는 문서의 Category(카테고리) 필드가 현재 폴더의 **Title(제목)**과 일치하는 항목만 필터링해야 합니다. Hinto AI의 원본 순서를 유지하려면 두 목록 모두 Sort Index(정렬 인덱스) 필드를 기준으로 오름차순(낮은 순에서 높은 순)으로 정렬해야 합니다.
문서 내용 표시하기
CMS 페이지의 기본 콘텐츠 영역에서 컴포넌트를 'Articles' 컬렉션의 필드에 연결하여 현재 보고 있는 문서의 정보를 표시합니다.
- 문서 제목: 텍스트 요소를 추가하고 해당 콘텐츠를 Articles 컬렉션의 Title(제목) 변수로 설정합니다.
- 문서 본문: 다른 텍스트 요소를 추가하고 콘텐츠를 Content(본문) 변수로 설정합니다. 이 변수에는 제목, 단락, 목록, 이미지를 포함한 문서의 전체 HTML 본문이 담겨 있습니다.
레이아웃 구축 팁
- Framer의 전역 스타일 옵션을 사용하여 HTML 태그(H1, H2, P, A 등)에 대한 스타일을 정의하세요. 이렇게 하면 가져온 콘텐츠를 직접 수정하지 않고도 모양을 사용자 지정할 수 있습니다.
- Hinto AI 통합에서 제공하는 Sort Index(정렬 인덱스) 필드를 항상 사용하여 폴더와 문서가 의도한 순서대로 표시되도록 하세요.
- 각 문서에 대한 링크는 해당 CMS 페이지로 설정해야 합니다. 일반적으로 CMS 컬렉션에 링크를 걸면 Framer가 이를 자동으로 처리합니다.
Framer의 강력한 레이아웃 도구와 Hinto AI CMS 컬렉션의 구조화된 콘텐츠를 연결하면, 모든 기능을 갖춘 전문적인 지식 베이스를 빠르고 효율적으로 구축하고 게시할 수 있습니다.