Page Fragment là tính năng cho phép chia giao diện website thành các thành phần nhỏ có thể quản lý độc lập. Thay vì phải chỉnh sửa toàn bộ template hoặc trang web, người dùng có thể thay đổi từng phần giao diện riêng lẻ như header, banner, sidebar, footer hoặc các khối nội dung khác.
Thông qua Page Fragment, EzyPlatform hỗ trợ xây dựng giao diện linh hoạt hơn, cho phép tái sử dụng các thành phần giao diện ở nhiều trang khác nhau, đồng thời giảm đáng kể chi phí tùy biến và bảo trì website.
Để truy cập tính năng này, vào menu Pages → Page Fragments.
Screenshot 2026-06-02 162435.png

Page Fragment là gì?

Page Fragment là một phần giao diện độc lập có thể được nhúng vào các trang hoặc template khác.
Ví dụ:
  • Header website
  • Footer website
  • Banner trang chủ
  • Khối giới thiệu doanh nghiệp
  • Sidebar bài viết
  • Form đăng ký nhận tin
  • Khối quảng cáo
Một Page Fragment có thể được sử dụng ở nhiều vị trí khác nhau trên website. Khi chỉnh sửa Fragment, tất cả các nơi đang sử dụng Fragment đó sẽ được cập nhật theo.

Lợi ích của Page Fragment

  • Tái sử dụng giao diện: Cho phép sử dụng cùng một thành phần giao diện trên nhiều trang khác nhau mà không cần sao chép mã nguồn.
  • Quản lý tập trung: Chỉ cần chỉnh sửa một lần để cập nhật cho toàn bộ website.
  • Tùy biến nhanh: Người quản trị có thể thay đổi giao diện mà không cần chỉnh sửa trực tiếp vào Theme hoặc Plugin.
  • Hỗ trợ phát triển giao diện linh hoạt: Cho phép xây dựng website theo mô hình các khối thành phần (component-based design), giúp dễ dàng mở rộng và bảo trì.

Cấu trúc của một Page Fragment

Mỗi Page Fragment thường bao gồm các thành phần sau:
Thành phầnChức năng
content.htmlNội dung HTML chính của Fragment.
head.htmlCSS, meta tag hoặc tài nguyên cần đưa vào phần <head>.
foot.htmlJavaScript hoặc mã cần tải cuối trang.
meta.jsonThông tin cấu hình của Fragment.
Ví dụ:
page-fragments/
└── common/
    └── header/
        ├── content.html
        ├── head.html
        ├── foot.html
        └── meta.json
Trong đó:
{
  "title": "Common Header",
  "contentType": "HTML",
  "status": "DRAFT"
}
là thông tin mô tả Fragment.

Quản lý Page Fragment

Tại màn hình Page Fragments, người dùng có thể:
  • Tạo Fragment mới.
  • Chỉnh sửa Fragment hiện có.
Screenshot 2026-06-02 163625.png
  • Xem lịch sử thay đổi.
Screenshot 2026-06-02 163731.png
  • Xuất bản (Publish) Fragment.
  • Đồng bộ Fragment với Visual Studio Code Extension.
  • Tổ chức Fragment theo nhóm hoặc thư mục chức năng.

Sử dụng Page Fragment trong giao diện

Sau khi được đăng ký trong hệ thống, Fragment có thể được gọi từ Theme hoặc Template để hiển thị trên website. Ví dụ một website có thể chia thành các Fragment:
Trang chủ
├── Header
├── Hero Banner
├── Giới thiệu
├── Sản phẩm nổi bật
├── Tin tức mới nhất
└── Footer
Mỗi phần trên là một Fragment độc lập và có thể được chỉnh sửa riêng mà không ảnh hưởng đến các phần khác.

Một số trường hợp sử dụng phổ biến

  • Header dùng chung: Sử dụng cho toàn bộ website.
  • Footer dùng chung: Hiển thị thông tin liên hệ, bản quyền và liên kết nhanh.
  • Banner theo chiến dịch: Cho phép thay đổi banner theo từng chương trình marketing mà không cần chỉnh sửa Theme.
  • Khối CTA (Call To Action): Tạo các nút đăng ký, liên hệ hoặc mua hàng có thể tái sử dụng trên nhiều trang.
  • Sidebar bài viết: Hiển thị danh mục, bài viết liên quan hoặc quảng cáo.

Vai trò của Page Fragment trong quản lý giao diện

Page Fragment là nền tảng giúp EzyPlatform triển khai mô hình giao diện linh hoạt và có khả năng tái sử dụng cao. Thông qua việc phân tách giao diện thành các thành phần nhỏ:
  • Giảm sự phụ thuộc vào mã nguồn Theme.
  • Dễ dàng tùy biến giao diện theo từng khách hàng.
  • Tăng khả năng tái sử dụng các thành phần giao diện.
  • Giảm thời gian phát triển website mới.
  • Hỗ trợ quản lý giao diện tập trung từ trang quản trị.
Nhờ đó, quản trị viên có thể xây dựng và duy trì giao diện website nhanh chóng mà không cần thay đổi trực tiếp cấu trúc Theme hoặc Plugin.

Lưu ý

  • Nên đặt tên Fragment theo nhóm chức năng để dễ quản lý.
  • Hạn chế tạo Fragment quá lớn hoặc chứa quá nhiều chức năng khác nhau.
  • Các Fragment dùng chung như Header hoặc Footer cần được kiểm tra kỹ trước khi Publish vì sẽ ảnh hưởng đến toàn bộ website.
  • Nên sử dụng kết hợp với Template Explorer để theo dõi mối liên hệ giữa Fragment và Theme.