Chuyển đến nội dung
Tài liệu

Xây dựng bố cục cơ sở tri thức trong Framer

Sau khi đã nhập thành công nội dung cơ sở tri thức từ Hinto AI vào CMS của Framer, bước tiếp theo là xây dựng giao diện người dùng (UI) để hiển thị nội dung đó. Quá trình này bao gồm việc tạo các trang dựa trên CMS và liên kết các thành phần (component) của Framer với các tập hợp 'Articles' (Bài viết) và 'Folders' (Thư mục) mà bạn đã nhập.

Tạo cấu trúc trang

Một trang tài liệu điển hình cần ít nhất hai loại trang. Đầu tiên là trang chính (ví dụ: /docs) chứa bố cục tổng thể, bao gồm thanh điều hướng bên và khu vực nội dung. Thứ hai là trang CMS động (ví dụ: /articles/[slug]), đóng vai trò là mẫu để hiển thị nội dung cho từng bài viết riêng lẻ.

Documentation image

Xây dựng thanh điều hướng bên

Thanh bên giúp người dùng điều hướng trong cơ sở tri thức của bạn. Nó nên liệt kê tất cả các thư mục (danh mục) và các bài viết nằm bên trong đó. Bạn có thể thực hiện việc này bằng cách tạo danh sách các thư mục, và trong mỗi thư mục, tạo một danh sách lồng nhau chứa các bài viết tương ứng.

  • Danh sách Thư mục: Thêm một thành phần hiển thị các mục từ tập hợp Folders của bạn. Điều này sẽ tạo ra các tiêu đề danh mục chính trong thanh bên.
  • Danh sách Bài viết: Trong mỗi mục thư mục, hãy thêm một thành phần thứ hai để liệt kê các mục từ tập hợp Articles của bạn. Danh sách này phải được lọc để chỉ hiển thị những bài viết thuộc về thư mục cha tương ứng.
Documentation image

Lọc và sắp xếp điều hướng

Để đảm bảo các bài viết hiển thị đúng trong thư mục tương ứng, bạn phải thiết lập bộ lọc. Thành phần Articles List cần được lọc sao cho trường Category của bài viết khớp với Title (Tiêu đề) của thư mục hiện tại. Để duy trì thứ tự gốc từ Hinto AI, cả hai danh sách nên được sắp xếp theo trường Sort Index theo thứ tự tăng dần (Từ thấp đến cao).

Documentation image

Hiển thị nội dung bài viết

Tại khu vực nội dung chính trên trang CMS, bạn sẽ liên kết các thành phần với các trường trong tập hợp 'Articles' để hiển thị thông tin của bài viết đang được xem.

  • Tiêu đề bài viết: Thêm một phần tử văn bản và đặt nội dung của nó theo biến Title từ tập hợp Articles.
  • Nội dung bài viết: Thêm một phần tử văn bản khác và đặt nội dung theo biến Content. Biến này chứa toàn bộ nội dung HTML của bài viết, bao gồm các tiêu đề, đoạn văn, danh sách và hình ảnh.
Documentation image

Mẹo xây dựng bố cục

  • Sử dụng các tùy chọn định dạng toàn cục của Framer để thiết lập kiểu cho các thẻ HTML (H1, H2, P, A, v.v.). Điều này cho phép bạn tùy chỉnh giao diện nội dung đã nhập mà không cần chỉnh sửa trực tiếp.
  • Luôn sử dụng trường Sort Index được cung cấp bởi tích hợp Hinto AI để đảm bảo các thư mục và bài viết được hiển thị theo đúng thứ tự mong muốn.
  • Liên kết cho mỗi bài viết nên được đặt trỏ tới trang CMS tương ứng của nó. Framer thường tự động xử lý việc này khi bạn liên kết tới một tập hợp CMS.

Bằng cách kết hợp các công cụ bố cục mạnh mẽ của Framer với nội dung có cấu trúc từ các tập hợp CMS của Hinto AI, bạn có thể xây dựng và ra mắt một cơ sở tri thức chuyên nghiệp, đầy đủ tính năng một cách nhanh chóng và hiệu quả.