Nhảy đến nội dung

Giới thiệu

Quản lý các trang web và màn hình ứng dụng di động với nội dung động.

🎯 Mô-đun này làm gì?​

Mô-đun Pages cho phép bạn tạo, truy xuất và quản lý các trang (cho các trang web) hoặc màn hình (cho các ứng dụng di động) với tất cả nội dung của chúng - văn bản, hình ảnh, cài đặt SEO và các thuộc tính tùy chỉnh.

Hãy coi nó như hệ thống quản lý nội dung của bạn - thay vì mã hóa cứng các trang, bạn quản lý chúng trong OneEntry và lấy chúng một cách động trong ứng dụng của bạn.

📖 Giải thích đơn giản​

Hãy tưởng tượng bạn đang xây dựng một trang web với các trang sau:

  • 🏠 Trang chủ - trang đích chính
  • 📄 Giới thiệu - thông tin công ty
  • 📞 Liên hệ - trang biểu mẫu liên hệ
  • 📝 Bài viết blog - nhiều trang bài viết
  • ❓ Câu hỏi thường gặp - trung tâm trợ giúp

Thay vì tạo từng trang một cách thủ công trong mã của bạn, bạn:

  • ✅ Tạo các trang trong bảng điều khiển quản trị OneEntry (với nội dung, hình ảnh, SEO)
  • ✅ Lấy các trang một cách động bằng cách sử dụng mô-đun này
  • ✅ Cập nhật nội dung mà không cần triển khai lại ứng dụng của bạn
  • ✅ Quản lý cấu trúc trang, URL và siêu dữ liệu ở một nơi

Ví dụ thực tế:

Không có Mô-đun Pages (mã hóa cứng):
- Chỉnh sửa trang chủ → Thay đổi mã → Kiểm tra → Triển khai → Chờ ❌
- 10 trang = 10 tệp mã để quản lý ❌
- Thay đổi SEO = thay đổi mã ❌

Với Mô-đun Pages (động):
- Chỉnh sửa trang chủ → Cập nhật trong bảng điều khiển OneEntry → Hiện ngay lập tức ✅
- 100 trang = lấy động từ API ✅
- Thay đổi SEO = cập nhật trong bảng điều khiển quản trị ✅

✨ Khái niệm chính​

Trang là gì?​

Một trang là một thực thể nội dung đại diện cho:

  • Web: Một trang trên trang web của bạn (ví dụ: /about, /contact)
  • Di động: Một màn hình trong ứng dụng của bạn (ví dụ: Màn hình Hồ sơ, Màn hình Cài đặt)

Mỗi trang chứa:

  • Nội dung - Văn bản, hình ảnh, video
  • URL - Địa chỉ trang (ví dụ: /about-us)
  • SEO - Tiêu đề meta, mô tả, từ khóa
  • Thuộc tính tùy chỉnh - Bất kỳ trường bổ sung nào bạn định nghĩa
  • Trạng thái - Đã xuất bản, nháp, đã lưu trữ
  • Địa phương hóa - Hỗ trợ đa ngôn ngữ

Các loại trang​

OneEntry hỗ trợ các loại trang khác nhau:

LoạiMô tảVí dụ sử dụng
Trang bình thườngTrang tĩnh tiêu chuẩnGiới thiệu, Liên hệ, Điều khoản
Trang lỗiTrang lỗi 404, 500Trang không tìm thấy
Trang hệ thốngTrang đặc biệtChính sách bảo mật, Cookies
Trang mẫuCấu trúc trang có thể tái sử dụngMẫu bài viết blog

Cấu trúc trang​

Các trang có thể được tổ chức theo cấu trúc cây:

📁 Công ty
  ├─ Giới thiệu
  ├─ Đội ngũ
  └─ Nghề nghiệp

📁 Sản phẩm
  ├─ Danh mục sản phẩm 1
  │   ├─ Sản phẩm A
  │   └─ Sản phẩm B
  └─ Danh mục sản phẩm 2

Tại sao điều này quan trọng: Bạn có thể lấy tất cả các trang trong một phần hoặc tự động xây dựng các menu điều hướng.

📋 Những điều bạn cần biết​

Hai cách để xác định các trang​

Phương phápKhi nào sử dụngVí dụ
Theo URLNgười dùng truy cập trang cụ thể/about-us, /contact
Theo IDTham chiếu nội bộ123, 456

Thực hành tốt nhất: Sử dụng id trong mã (chúng không thay đổi), sử dụng URLs cho định tuyến.

Cấu trúc trang​

Mỗi trang có các trường chính sau:

{
  "id": 9,                        // ID duy nhất
  "parentId": 8,                  // ID cha
  "moduleFormConfigs": [],        // Cấu hình mô-đun Forms
  "pageUrl": "blog1",             // URL trang
  "depth": 1,                     // độ sâu
  "localizeInfos": {              // thông tin địa phương hóa
    "title": "Blog 1",            // tiêu đề
    "menuTitle": "Blog 1",        // tiêu đề menu
    "htmlContent": "",
    "plainContent": "",
  },
  "isVisible": true,              // khả năng hiển thị
  "blocks": [],                   // các khối
  "type": "common_page",          // loại trang
  "templateIdentifier": null,     // định danh mẫu
  "attributeSetIdentifier": null, // định danh tập thuộc tính
  "attributeValues": {},          // giá trị thuộc tính
  "isSync": false,                // đồng bộ
}

Địa phương hóa (Đa ngôn ngữ)​

Các trang hỗ trợ nhiều ngôn ngữ

Cùng một trang, nhiều ngôn ngữ khác nhau!

Thuộc tính tùy chỉnh​

Bạn có thể thêm bất kỳ trường nào vào các trang bằng cách sử dụng AttributesSets:

Ví dụ:

  • Bài viết blog: tác giả, ngày xuất bản, thẻ, hình ảnh nổi bật
  • Trang sản phẩm: giá, SKU, bộ sưu tập, thông số kỹ thuật
  • Trang đích: hình ảnh chính, nút CTA, đánh giá

Tìm hiểu thêm: Xem AttributesSets Module

📊 Bảng tham khảo nhanh - Các phương pháp phổ biến​

Phương phápChức năngKhi nào sử dụng
getPages()Lấy tất cả các trang (phân trang)Xây dựng sơ đồ trang, liệt kê tất cả các trang
getRootPages()Lấy tất cả các trang gốc (phân trang)
getChildPagesByParentUrl()Lấy tất cả các trang con theo ParentUrl (phân trang)
getBlocksByPageUrl()Lấy các đối tượng PositionBlock cho trang theo url.Các khối được sử dụng để hiển thị nội dung trang.
getConfigPageByUrl()Lấy cài đặt cho trang theo url.Các trang cấu hình được sử dụng để lưu trữ cài đặt cho trang.
getPageById()Lấy một trang duy nhất.Các trang được sử dụng để hiển thị trang.
getPageByUrl()Lấy một trang duy nhất theo URL.Các trang được sử dụng để hiển thị trang.
searchPage()Tìm kiếm nhanh các trang với đầu ra hạn chế.Tìm kiếm các trang theo tiêu đề, mô tả, thẻ, v.v.

❓ Câu hỏi thường gặp (FAQ)​

Sự khác biệt giữa URL và Marker là gì?​

  • URL (pageUrl) - Địa chỉ web mà người dùng thấy (ví dụ: /about-us, /contact)

    • Được sử dụng cho định tuyến
    • Thân thiện với người dùng

  • Marker - Định danh kỹ thuật trong mã (ví dụ: homepage, contact_page)

    • Được sử dụng trong các tham chiếu mã
    • Kỹ thuật, không hiển thị cho người dùng

💡 Ghi chú quan trọng​

URL trang và định tuyến​

Thực hành tốt nhất cho định tuyến:

✅ Tốt: Định tuyến động bắt tất cả Ví dụ Next.js: pages/[...slug].js

Bộ nhớ đệm để cải thiện hiệu suất​

Giảm các cuộc gọi API bằng cách sử dụng bộ nhớ đệm.

Xem trước các bản nháp​

Chỉ hiển thị các trang nháp cho quản trị viên.

🎓 Thực hành tốt nhất​

  • Bộ nhớ đệm các trang để giảm các cuộc gọi API
  • Xử lý lỗi 404 một cách nhẹ nhàng
  • Lọc theo statusId: 1 và isVisible: true cho sản xuất
  • Thêm trạng thái tải trong UI
  • Triển khai chiến lược bộ nhớ đệm trang

Thông tin thêm về giao diện người dùng của mô-đun https://doc.oneentry.cloud/docs/category/pages

Định nghĩa của mô-đun Pages​


const { Pages } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 Tài liệu liên quan​