Fumadocs

Fumadocs là một khung tài liệu giúp các nhà phát triển xây dựng các trang tài liệu chuyên nghiệp sử dụng React và Next.js. Khác với các công cụ tài liệu truyền thống, nó cho phép bạn kiểm soát hoàn toàn nội dung và thiết kế trong khi tự động xử lý các phần phức tạp.

Nó hỗ trợ viết nội dung bằng Markdown và MDX, có nghĩa là bạn có thể sử dụng định dạng văn bản đơn giản hoặc thêm các thành phần React tương tác. Khung này bao gồm tính năng tìm kiếm tích hợp, tô sáng cú pháp và các chủ đề được thiết kế sẵn đẹp mắt. Nó cũng hoạt động với bất kỳ nguồn nội dung nào, dù bạn lưu trữ tài liệu trong các tệp, cơ sở dữ liệu hay hệ thống quản lý nội dung.

Fumadocs được xây dựng dựa trên ba phần: một lớp nội dung để quản lý tài liệu của bạn, một thư viện lõi cho các tính năng như tìm kiếm, và một thư viện giao diện người dùng cho các thành phần đẹp mắt. Bạn có thể sử dụng chỉ những gì bạn cần.

Bắt đầu với Fumadocs rất đơn giản. Dưới đây là các bước:

• Cài đặt framework bằng cách chạy lệnh npm create fumadocs-app trong terminal của bạn. Chọn framework React và nguồn nội dung ưa thích khi được yêu cầu.

• Viết nội dung của bạn trong các file MDX bên trong thư mục docs. Sử dụng cú pháp Markdown đơn giản với tùy chọn thêm các thành phần React để tạo các phần tử tương tác.

• Tùy chỉnh giao diện bằng cách sử dụng Tailwind CSS. Bạn có thể thay đổi màu sắc, bố cục và kiểu dáng để phù hợp với thương hiệu của mình mà không cần học hệ thống mới.

• Thêm chức năng tìm kiếm bằng cách kết nối Orama hoặc Algolia chỉ với vài dòng mã. Framework sẽ tự động xử lý phần còn lại.

• Sử dụng công cụ CLI để thêm các thành phần tương tác như tab, callout và khối mã với lệnh npx @fumadocs/cli add.

• Triển khai trang web của bạn lên Vercel, Netlify hoặc bất kỳ dịch vụ lưu trữ nào hỗ trợ ứng dụng Next.js.

• Khung làm việc miễn phí và mã nguồn mở

• Hoạt động với Next.js, React Router và các khung React khác

• Viết nội dung bằng Markdown và MDX

• Tìm kiếm tích hợp với hỗ trợ Orama và Algolia

• Trình tạo tài liệu OpenAPI

• Tích hợp TypeScript Twoslash

• Các thành phần giao diện người dùng được thiết kế sẵn đẹp mắt

• Công cụ dòng lệnh để thiết lập dễ dàng

• Làm nổi bật cú pháp với Shiki

• Dễ dàng tùy chỉnh với Tailwind CSS