Chia sẻ template viết docs, API docs và blog cá nhân

🔥 Giới thiệu

Docusaurus là một công cụ tạo trang web tĩnh mã nguồn mở dựa trên React, nổi tiếng với khả năng tạo tài liệu, blog, trang web marketing và ứng dụng web một trang một cách nhanh chóng và dễ dàng. Điểm mạnh của Docusaurus nằm ở giao diện tích hợp sẵn, tài liệu chi tiết, hướng dẫn sử dụng, và cộng đồng người dùng lớn sẵn sàng hỗ trợ.

Nếu bạn đang tìm kiếm một template hoàn chỉnh để bắt đầu nhanh chóng, thì docusaurus-tailwind-shadcn-template là một lựa chọn tuyệt vời.

📌 Repo Github: docusaurus-tailwind-shadcn-template

👉 Demo: https://docusaurus-tailwind-shadcn-template.vercel.app/

Template này tích hợp

• ⚡️ Docusaurus V3

• 🎨 TailwindCSS (Hỗ trợ v3 & v4)

• 🧩 Shadcn/UI

• 🔍 Tính năng tìm kiếm bởi @easyops-cn/docusaurus-search-local plugin

• 📝 Hỗ trợ tự động tạo API docs nhờ @PaloAltoNetworks/docusaurus-openapi-docs plugin

• 📱 Hoàn toàn responsive

• 🌗 Hỗ trợ chuyển theme sáng/tối

giúp bạn dễ dàng tùy chỉnh giao diện, viết docs chuyên nghiệp, và mở rộng với các tính năng mạnh mẽ.

🎯 Tính năng chính

✔ Hỗ trợ viết Docs & API Docs: Dễ dàng tạo tài liệu chuyên nghiệp.
✔ Hệ thống Blog: Viết bài blog cá nhân ngay trong Docusaurus.
✔ Giao diện hiện đại: Sử dụng TailwindCSS & ShadCN UI.
✔ Dễ dàng tùy chỉnh: Thay đổi theme, cấu trúc mà không cần quá nhiều chỉnh sửa.
✔ Triển khai dễ dàng: Hỗ trợ deploy trên Vercel, Netlify, Cloudflare Pages...

🚀 Cách cài đặt và sử dụng

1️⃣ Clone Repository

Trước tiên, bạn cần clone repo về máy:

git clone https://github.com/namnguyenthanhwork/docusaurus-tailwind-shadcn-template.git
cd docusaurus-tailwind-shadcn-template

Chọn nhánh phù hợp với nhu cầu sử dụng của bạn:

• Template Docusaurus (docs và blog) với Tailwind v3: feature/docusaurus-tailwind-v3

• Template Docusaurus (docs, api docs và blog) với Tailwind v3: feature/docusaurus-tailwind-v3-openapi-docs

• Template Docusaurus (docs và blog) với Tailwind v4: feature/docusaurus-tailwind-v4

• Template Docusaurus (docs, api docs và blog) với Tailwind v4: feature/docusaurus-tailwind-v4-openapi-docs

2️⃣ Cài đặt Dependencies

Sử dụng npm hoặc yarn để cài đặt các package cần thiết:

npm install
# Hoặc dùng Yarn
yarn install

3️⃣ Chạy dự án

Sau khi cài đặt xong, chạy lệnh sau để khởi động Docusaurus:

npm start
# Hoặc dùng Yarn
yarn start

Mở trình duyệt và truy cập http://localhost:3000/ để xem kết quả.

✍ Cách viết docs và blog

1. Viết tài liệu (Docs)

Docs được lưu trong thư mục /docs. Để thêm tài liệu mới:

1. Vào thư mục docs/

2. Tạo file .md hoặc .mdx

3. Thêm nội dung Markdown

2. Viết tài liệu API (API Docs)

Template có tích hợp plugin docusaurus-plugin-openapi-docs giúp tự động tạo API docs dựa vào 1 file .yaml

Cách cấu hình bạn có thể tham khảo ở https://docusaurus-openapi.tryingpan.dev/

3. Viết blog

Các bài viết blog nằm trong thư mục /blog. Để tạo bài viết mới:

1. Vào thư mục blog/

2. Tạo file .md hoặc .mdx

3. Viết nội dung

🎨 Tuỳ chỉnh giao diện

Chỉnh sửa màu sắc trong Tailwind

• Trong Tailwind v3, cập nhật trong tailwind.config.js.

• Trong Tailwind v4, chỉnh sửa trong src/css/custom.css.

• Cập nhật biến CSS trong src/css/custom.css.

Tùy chỉnh các component của Shadcn/UI

• Chỉnh sửa các thành phần trong thư mục src/components/ui/.

Ví dụ:

Tạo một button tùy chỉnh trong Docusaurus:

// src/components/ui/custom-button.tsx
import { Button } from './button';

export function CustomButton({ children }) {
  return (
    <Button className="custom-styles">
      {children}
    </Button>
  );
}

Ghi đè các component của Docusaurus

Bạn có thể ghi đè các component bằng cách Swizzling. Xem thêm về Component Swizzling.

🎯 Kết luận

Nếu bạn đang tìm kiếm một template chuyên nghiệp để viết tài liệu, API docs hoặc blog cá nhân, docusaurus-tailwind-shadcn-template là một lựa chọn tuyệt vời. Với Docusaurus, TailwindCSS và ShadCN UI, bạn có thể tạo một trang web tài liệu chuyên nghiệp mà không cần quá nhiều công sức.

👉 Dùng thử ngay: GitHub Repo

🔗 Tài nguyên tham khảo:

• Docusaurus Docs

• TailwindCSS Docs

• ShadCN/UI

• OpenAPI Docs

✨ Chúc bạn thành công! 🎉