🚀 Giới thiệu về ReactPress 2.0

ReactPress 2.0 là nền tảng xuất bản hiện đại, toàn diện cho phép các nhà phát triển và người sáng tạo nội dung xây dựng các blog, trang web, và hệ thống quản lý nội dung một cách dễ dàng và linh hoạt. Được xây dựng bằng các công nghệ web hiện đại như React 18, Next.js 14, NestJS 10 và TypeScript 5, nó mang lại trải nghiệm phát triển và trải nghiệm người dùng tuyệt vời.

✨ Tính năng nổi bật

⚡ Hiệu suất cao

• Kiến trúc App Router với Server Components cho SSR tối ưu.
• Tách mã tự động và tải lười để quản lý tài nguyên hiệu quả.
• Tối ưu hóa hình ảnh với component Next.js 14 và lựa chọn định dạng tự động.

🎨 Tùy chỉnh giao diện nâng cao

• Chuyển đổi giao diện động với chuyển tiếp chế độ sáng/tối liền mạch.
• Tùy chỉnh cấp độ thành phần thông qua kiến trúc mô-đun.
• CSS-in-JS với styled-components cho phong cách dễ bảo trì.

🚀 Cài đặt nhanh 5 phút

• Cài đặt không cần cấu hình với các giá trị mặc định thông minh.
• Trình hướng dẫn cài đặt kiểu WordPress cho trải nghiệm thiết lập trực quan.
• Cung cấp cơ sở dữ liệu tự động với di chuyển lược đồ tự động.
• Khởi động bằng một lệnh cho môi trường phát triển.

🔧 Kiến trúc dịch vụ độc lập

• Thiết kế mô-đun với các gói client và server tách biệt.
• Triển khai client độc lập cho tích hợp CMS headless.
• Vận hành server độc lập với API RESTful.

🔐 Tính năng bảo mật

• Xác thực JWT với hỗ trợ refresh token.
• Giới hạn tần suất với điều chỉnh thích ứng.
• Xác thực đầu vào với xác thực lược đồ Zod.
• Helmet.js cho các tiêu đề bảo mật HTTP toàn diện.
• Bảo vệ CSRF cho bảo mật form.

🌍 Toàn cầu hóa & Truy cập

• Hỗ trợ đa ngôn ngữ với hỗ trợ ngôn ngữ RTL.
• Tuân thủ WCAG 2.1 AA cho các tiêu chuẩn truy cập.
• Tối ưu hóa SEO với việc tạo sitemap tự động.

📸 Hình ảnh

Cài đặt

Bảng điều khiển quản lý nội dung

🆚 So sánh công nghệ hiện đại

🚀 Khởi động nhanh

🏁 Cài đặt server trong 5 phút

# Cài đặt và khởi động server ReactPress
npx @fecommunity/reactpress-server

# Cài đặt và chạy client độc lập
npx @fecommunity/reactpress-client

📦 Gói & Thành phần

ReactPress được tổ chức như một monorepo với các gói mô-đun và mẫu:

Gói chính

Mẫu

📦 Chi tiết gói

🖥️ Client (@fecommunity/reactpress-client)

Client ReactPress là một ứng dụng frontend hiện đại, đáp ứng được xây dựng với Next.js 14, phục vụ như giao diện người dùng cho nền tảng CMS ReactPress.

Tính năng chính:

• Giao diện người dùng/ trải nghiệm người dùng hiện đại với Ant Design v5.
• Thiết kế đáp ứng cho tất cả các thiết bị.
• Hỗ trợ quốc tế hóa (Tiếng Trung & Tiếng Anh).
• Chuyển đổi giao diện tối/sáng với phát hiện sở thích hệ thống.
• Trình soạn thảo markdown tích hợp với chế độ xem trực tiếp.
• Bảng điều khiển phân tích với các chỉ số.
• Hệ thống quản lý phương tiện với tải lên kéo và thả.
• Hỗ trợ PWA cho trải nghiệm ứng dụng gốc.

Khởi động nhanh:

npx @fecommunity/reactpress-client

🛠️ Server (@fecommunity/reactpress-server)

Server ReactPress là một API backend được xây dựng với NestJS 10, cung cấp nền tảng CMS ReactPress với quy trình cài đặt đơn giản.

Tính năng chính:

• Cài đặt không cần lệnh với cấu hình tự động.
• Thiết lập cơ sở dữ liệu tự động với hỗ trợ di chuyển.
• Xác thực JWT với hỗ trợ refresh token.
• API RESTful toàn diện với tài liệu OpenAPI 3.0.
• Tài liệu API Swagger với thử nghiệm tương tác.
• Hỗ trợ quản lý quy trình PM2 cho sản xuất.
• Giới hạn tần suất với điều chỉnh thích ứng.
• Xác thực đầu vào với xác thực lược đồ Zod.

Khởi động nhanh:

npx @fecommunity/reactpress-server

🧰 Toolkit (@fecommunity/reactpress-toolkit)

Toolkit client API TypeScript tự động sinh cho tích hợp dễ dàng với các dịch vụ backend của ReactPress.

Tính năng chính:

• Client API có kiểu mạnh cho tất cả các mô-đun.
• Định nghĩa TypeScript cho tất cả các mô hình dữ liệu.
• Hàm tiện ích cho các thao tác thông thường.
• Xác thực và xử lý lỗi tích hợp.
• Cơ chế thử lại tự động cho các yêu cầu thất bại.
• Bộ lọc yêu cầu/ phản hồi cho đăng nhập và chỉ số.

Sử dụng:

import { api, types, utils } from '@fecommunity/reactpress-toolkit';

// Lấy bài viết với xử lý lỗi tự động
const articles = await api.article.findAll();

// Xử lý dữ liệu an toàn kiểu
const article: types.IArticle = {
  id: '1',
  title: 'Bài viết mẫu',
  // ... các thuộc tính khác
};

// Hàm tiện ích với xử lý lỗi đúng cách
const formattedDate = utils.formatDate(new Date());

📐 Mẫu

ReactPress cung cấp các mẫu sẵn có để phát triển nhanh:

Mẫu Hello World (@fecommunity/reactpress-template-hello-world)

Mẫu tối thiểu để giúp bạn bắt đầu nhanh chóng với ReactPress.

Tính năng:

• Thiết kế sạch sẽ, tối thiểu.
• Hỗ trợ TypeScript với kiểm tra kiểu nghiêm ngặt.
• Tích hợp với ReactPress Toolkit cho giao tiếp API.
• Bố cục đáp ứng với cách tiếp cận mobile-first.
• Tùy chỉnh dễ dàng với kiến trúc dựa trên thành phần.

Khởi động nhanh:

npx @fecommunity/reactpress-template-hello-world my-blog

Mẫu Twenty Twenty Five (@fecommunity/reactpress-template-twentytwentyfive)

Mẫu blog nhiều tính năng với thiết kế hiện đại lấy cảm hứng từ các chủ đề WordPress.

Tính năng:

• Thiết kế sạch sẽ, đáp ứng.
• Kết xuất phía máy chủ cho SEO và hiệu suất tốt hơn.
• Các trang đã tạo sẵn cho bài viết, danh mục và thẻ.
• Tích hợp chức năng tìm kiếm với khớp gần đúng.
• Hỗ trợ TypeScript với kiểm tra kiểu nghiêm ngặt.
• Tích hợp với ReactPress Toolkit cho giao tiếp API.
• Bố cục đáp ứng với cách tiếp cận mobile-first.

Khởi động nhanh:

npx @fecommunity/reactpress-template-twentytwentyfive my-blog

🔧 Cấu hình

Tạo một tệp .env trong thư mục gốc cho phát triển địa phương:

# Cấu hình cơ sở dữ liệu
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=reactpress
DB_PASSWD=reactpress
DB_DATABASE=reactpress

# Cấu hình client
CLIENT_SITE_URL=http://localhost:3001

# Cấu hình server
SERVER_SITE_URL=http://localhost:3002

🚀 Tùy chọn triển khai

Triển khai PM2 (Khuyến nghị cho sản xuất)

# Cài đặt PM2 toàn cầu
npm install -g pm2

# Khởi động server ReactPress với PM2
npx @fecommunity/reactpress-server --pm2

# Khởi động client ReactPress với PM2
npx @fecommunity/reactpress-client --pm2

Triển khai truyền thống (Quản lý tự động)

# Xây dựng cho sản xuất
pnpm run build

# Khởi động các server sản xuất
pnpm run start

📚 Tài liệu

• Hướng dẫn bắt đầu
• Tài liệu API
• Hướng dẫn triển khai
• Hướng dẫn tùy chỉnh
• Các thực hành bảo mật tốt nhất
• Tối ưu hóa hiệu suất

👥 Cộng đồng & Hỗ trợ

• Vấn đề GitHub - Báo cáo lỗi và yêu cầu tính năng
• Thảo luận GitHub - Thảo luận cộng đồng và Q&A
• Stack Overflow - Câu hỏi kỹ thuật

🤝 Đóng góp

Chúng tôi hoan nghênh mọi đóng góp! Dù là sửa lỗi, tính năng mới, cải tiến tài liệu, hay dịch thuật, sự giúp đỡ của bạn đều được đánh giá cao.

1. Fork kho lưu trữ
2. Tạo nhánh tính năng của bạn (git checkout -b feature/AmazingFeature)
3. Cam kết thay đổi của bạn (git commit -m 'Thêm một số tính năng AmazingFeature')
4. Đẩy lên nhánh (git push origin feature/AmazingFeature)
5. Mở Pull Request

Vui lòng đọc Hướng dẫn Đóng góp của chúng tôi để biết thêm chi tiết về quy tắc ứng xử và quy trình phát triển.

❤️ Lời cảm ơn

ReactPress được lấy cảm hứng từ và xây dựng dựa trên công việc của nhiều dự án mã nguồn mở tuyệt vời:

• Next.js - Framework React
• NestJS - Framework Node.js tiến bộ
• Ant Design - Ngôn ngữ thiết kế UI
• TypeORM - ORM cho TypeScript và JavaScript

Chúng tôi rất biết ơn các tác giả và người đóng góp cho các dự án này vì công việc xuất sắc của họ.