Chuyển tới nội dung chính

Quản lý bố cục trang (Page Builder)

Đường dẫn truy cập: /admin/cms/page-builder

Page Builder là trung tâm thiết kế giao diện trực quan thế hệ mới của hệ thống CMS CTUMP. Công cụ cho phép người quản trị tự do kéo thả, sắp xếp, thay đổi biến thể hiển thị và tùy biến các khối nội dung của bất kỳ trang nào (Trang chủ, Giới thiệu, Khoa phòng, Tuyển sinh...) một cách độc lập mà không cần can thiệp vào mã nguồn lập trình.

1. Tổng quan Không gian làm việc (Studio Workspace)​

Giao diện Studio được thiết kế 3 vùng tương tác linh hoạt với khả năng kéo giãn độ rộng (Resizable Splitter) theo ý muốn:

Màn hình Page Builder Studio

📌 Cấu trúc 3 Cột chức năng:​

  • Cột 1 (Quản Lý Trang - Trái):
    • Chọn Cổng thông tin: Chuyển đổi giữa Cổng chính CTUMP (MAIN) và các Phân hệ / Cổng đơn vị thành viên.
    • Tìm kiếm nhanh: Tìm kiếm trang theo tên hoặc đường dẫn slug.
    • Tab "Menu chính": Xem cấu trúc cây điều hướng thực tế kèm nhãn nổi bật 🏠 Trang chính và nhãn 🔗 Link ngoài.
    • Tab "Chưa gắn": Danh sách các trang độc lập chưa được kết nối lên thanh Menu để bạn gắn nhanh.
    • Kéo giãn: Rê chuột vào vạch phân cách để kéo giãn thanh Quản Lý Trang (hỗ trợ mở rộng lên đến hơn 65% màn hình).
  • Cột 2 (Khung Thiết Kế - Giữa):
    • Danh sách các Khối nội dung (Block) xếp chồng theo thứ tự từ trên xuống dưới.
    • Hiển thị thông tin tóm tắt trực quan của từng khối (ví dụ: Trang nhúng: "Leaders of Units", Nhóm banner: HOME_MAIN, v.v.).
    • Thanh công cụ phía trên gồm: Mẫu Trang, Tải lại, Nhập/Xuất JSON, Xem bài viết và Lưu bố cục.
  • Cột 3 (Thư Viện Khối - Phải):
    • Panel danh mục khối chuyên dụng, có thể mở rộng / thu gọn nhanh bằng nút bấm hoặc kéo giãn độ rộng.

2. Nạp nhanh từ Thư viện Mẫu Trang (Page Templates)​

Để tiết kiệm thời gian thiết kế trang từ đầu, bạn có thể áp dụng các mẫu bố cục đã được tối ưu sẵn chuẩn nhận diện CTUMP:

Thư viện mẫu trang

  1. Bấm nút Mẫu Trang trên thanh công cụ trung tâm.
  2. Cửa sổ Thư viện Mẫu mở ra, bạn có thể lọc theo chuyên mục (Trang Chủ, Tin tức, Tuyển sinh, Khoa / Đơn vị...).
  3. Xem trước trực tiếp bố cục trang ở chế độ Máy tính (Desktop) hoặc Điện thoại (Mobile).
  4. Bấm nút Áp Dụng (màu xanh góc trên bên phải) để nạp toàn bộ cấu trúc khối vào trang hiện tại.

3. Hướng dẫn Tạo trang mới​

Khi cần xây dựng một trang nội dung độc lập hoặc trang thông tin chuyên đề:

Thêm trang mới

  1. Tại cột bên trái (Quản Lý Trang), bấm nút + Thêm Trang Mới ở góc dưới cùng.
  2. Điền các thông tin trong hộp thoại:
    • Nhúng nhanh trang tĩnh (Khuyên dùng): Chọn bài viết đã soạn thảo sẵn trong module Quản lý Trang tĩnh. Hệ thống sẽ tự động điền Tên, Mã trang và sinh sẵn khối nhúng tĩnh chuẩn.
    • Tên trang (Tiếng Việt): Tên hiển thị của trang (VD: Cơ cấu tổ chức, Thông tin tuyển sinh).
    • Mã trang (Slug): Mã định danh tiếng Anh viết liền không dấu (VD: organization, admissions). Nếu để trống, hệ thống sẽ tự động chuyển đổi từ Tên trang.
  3. Bấm Tạo trang. Trang mới sẽ xuất hiện ngay trong tab Chưa gắn để bạn tiếp tục thiết kế và gắn lên Menu.

4. Gắn trang vào Menu Điều hướng (Menu Linker)​

Sau khi tạo trang, bạn cần gắn trang vào vị trí phù hợp trên thanh điều hướng để người dùng có thể nhấp chuột truy cập:

Gắn trang vào Menu

  1. Chuyển sang tab Chưa gắn ở cột trái.
  2. Bấm nút Gắn màu xanh tại dòng của trang bạn muốn đưa lên Menu.
  3. Cửa sổ Gắn Trang Vào Menu Điều Hướng sẽ hiển thị:
    • Bạn có thể tick chọn [x] Chỉ hiện mục chưa gắn để lọc nhanh các vị trí còn trống trên Menu.
    • Chọn mục Menu đích cần trỏ tới.
  4. Bấm Gắn vào Menu. Trang sẽ được chuyển ngay sang cây Menu chính.

5. Thêm, Sắp xếp và Tùy biến Khối Nội Dung (Blocks)​

Trong không gian Khung Thiết Kế, bạn có toàn quyền điều phối các khối nội dung:

  1. Thêm Khối mới:
    • Bấm nút Mở Thư Viện Khối ở góc phải hoặc nút + Thêm Khối ở giữa trang.
    • Chọn loại khối phù hợp (Header Slider, Quick Links, Tin tức Blog Grid, Video Area, Thống kê Counterup, Nhúng trang tĩnh, Đối tác Brand Slider...) và bấm Thêm.
  2. Thao tác nhanh trên từng Khối:
    • Kéo thả / Di chuyển: Rê chuột vào biểu tượng ⠿ để kéo thả đổi vị trí, hoặc dùng mũi tên Lên / Xuống.
    • Đổi Biến thể (Variant): Chọn mẫu giao diện khác nhau của cùng một loại khối thông qua danh sách thả xuống Variant.
    • Mở cấu hình (Cấu hình): Nhấp vào nút Cấu hình để mở rộng bảng tùy biến nội dung (tiêu đề, số lượng hiển thị, hình ảnh, văn bản HTML...).
    • Bật / Tạm ẩn khối: Sử dụng biểu tượng con mắt 👁 để tạm ẩn khối mà không cần xóa.
    • Xóa khối: Nhấp vào biểu tượng thùng rác màu đỏ 🗑 để gỡ khối ra khỏi trang.

6. Xem bài viết & Lưu bố cục​

LƯU Ý QUAN TRỌNG KHI XUẤT BẢN
  • Các thao tác chỉnh sửa khối và thay đổi vị trí trên Canvas diễn ra trong môi trường thiết kế xem trước.
  • BẮT BUỘC bấm nút Lưu bố cục (Màu xanh dương đậm ở thanh công cụ góc trên) để áp dụng chính thức toàn bộ giao diện ra cổng thông tin bên ngoài.
  • Bấm nút Xem bài viết để mở trang đích trên trình duyệt và kiểm tra trải nghiệm thực tế của người dùng.