03 — Quản lý trang với Mantis Web Page (Block Builder)

Mantis Web Page là công cụ dựng trang theo khối (block-based) của Mantis Tech Web. Mỗi trang là một chuỗi khối (block) xếp từ trên xuống — bạn có thể thêm, xoá, sắp xếp lại, đổi biến thể (variant) và sửa nội dung từng khối mà không động vào code.

1. Các trang block-based hiện có

Vào /app/mantis-web-page để xem danh sách. Các trang quan trọng:

Mỗi bản ghi Mantis Web Page có field route. Ví dụ route home → URL công khai là /, route about → /about, route p/chinh-sach → /p/chinh-sach.

2. Cấu trúc form Mantis Web Page

Khi mở một trang (ví dụ home), bạn thấy các section sau:

1. Thông tin cơ bản
   • Page Title — tên nội bộ.
   • Route — đường dẫn URL (không dấu / đầu). Đổi route sẽ đổi luôn URL công khai.
   • Published — tick để trang xuất hiện trên site.
2. Blocks — bảng các block đã thêm vào trang (xem mục 3).
3. SEO & Social (có thể thu gọn)
   • Meta Title — tiêu đề SEO (fallback là Page Title).
   • Meta Description — mô tả cho Google / mạng xã hội.
   • Open Graph Image — ảnh hiển thị khi share Facebook/Zalo/Twitter.

3. Bảng Blocks

Mỗi dòng trong bảng Blocks là một khối giao diện. Cột quan trọng:

• Block Key — loại block (hero, feature_grid, pillars_grid, products_featured,…). Xem danh sách các block có sẵn ở phần 6.
• Variant — biến thể của block (ví dụ hero có center / left). Một số block không có variant.
• Order — thứ tự hiển thị (1, 2, 3…). Kéo thả dòng để đổi thứ tự.
• Content (JSON) — nội dung thực tế của block (tiêu đề, mô tả, ảnh…). Thông thường bạn không cần sửa trực tiếp JSON này — dùng Inline Editor (xem 04) thuận tiện hơn.

3.1. Thêm một block mới

1. Vào trang Mantis Web Page cần sửa.
2. Dưới bảng Blocks, bấm Add Row hoặc phím ↓ ở ô cuối.
3. Chọn Block Key từ dropdown (ví dụ cta_banner).
4. Chọn Variant nếu có (ví dụ light).
5. Đặt Order cho phù hợp.
6. Save trang.
7. Mở site ở tab mới → kéo xuống vị trí block mới → dùng Inline Editor để điền nội dung.

3.2. Xoá block

• Tick ô đầu dòng block → bấm nút Delete trên thanh action của bảng.
• Save trang.

3.3. Đổi thứ tự

• Kéo biểu tượng ≡ ở đầu dòng để kéo thả, hoặc đổi trường Order rồi Save.

3.4. Đổi variant (biến thể)

• Sửa trường Variant trong dòng block → Save.
• Ví dụ: đổi cta_banner từ dark sang light để nền sáng.

4. Quy trình biên tập khuyến nghị

┌──────────────────────────┐      ┌───────────────────────────┐
│  Desk: Mantis Web Page    │      │  Site (tab mới, incognito)│
│  - Thêm/xoá/sắp xếp block │  ←→  │  - Inline editor sửa chữ, │
│  - Đặt variant, SEO       │      │    ảnh trực tiếp          │
└──────────────────────────┘      └───────────────────────────┘

Nguyên tắc:

• Thay đổi cấu trúc (thêm/xoá block, đổi variant, đổi thứ tự) → làm trên Desk.
• Thay đổi nội dung chữ và ảnh → làm trên site bằng Inline Editor (nhanh và trực quan hơn).

5. Xuất bản (Publish)

• Field Published phải được tick.
• Nếu một trang đang ẩn (Published = 0), chỉ Content Editor/Website Manager đăng nhập mới xem được qua route. Khách truy cập (Guest) sẽ nhận 404.

6. Danh sách block có sẵn

Nhóm theo mục đích. Có thể thay đổi trong quá trình phát triển — xem luôn danh sách thực tế tại /app/mantis-web-page-block hoặc trong kho block ở folder mantistech_web/block_templates/.

Hero (khối đầu trang)

• hero — Hero lớn với tiêu đề + CTA + ảnh nền.
• hero_compact — Hero nhỏ gọn, dùng cho trang con.
• hero_split_stats — Hero + thống kê (số khách hàng, năm kinh nghiệm…).

Giới thiệu / nội dung

• story_split — Câu chuyện 2 cột (chữ + ảnh).
• mission_vision — Callout Sứ mệnh & Tầm nhìn.
• image_text — Section 2 cột ảnh + chữ, variant image-left / image-right.
• capabilities_grid — Lưới 5 năng lực cốt lõi (tick-list).
• milestones_timeline — Dòng thời gian các cột mốc.
• team_grid — Lưới thành viên đội ngũ.
• why_us_ticklist — Vì sao chọn Mantis Tech (danh sách tích).

4 Trụ cột

• pillars_grid — Lưới 4 card (AI/IoT/ERP/Hardware) cho Home.
• pillars_grid_lg — Phiên bản lớn cho trang /solutions.
• pillar_overview — Tổng quan 1 trụ cột (trang Solutions chi tiết).
• pillar_features_grid — Key Features của trụ cột.
• pillar_benefits_list — Danh sách lợi ích nghiệp vụ.
• pillar_use_cases_grid — Use cases.
• pillar_products_grid — Sản phẩm liên quan tới trụ cột.

Sản phẩm

• products_featured — Carousel sản phẩm nổi bật (Is Featured = 1).
• products_filterable — Grid + filter theo pillar.

Dịch vụ

• service_group_services — Danh sách dịch vụ trong một nhóm.

Blog

• blog_posts_filterable — Grid bài blog + filter theo Blog Category.

Hạ tầng

• industry_cards — Logo ngành.
• feature_grid — Lưới tính năng tổng quát (3 cột).
• testimonial — Trích dẫn khách hàng.
• cta_banner — Banner kêu gọi hành động (variant dark / light).
• contact_form_section — Khối form liên hệ.

Mỗi block đều render tự động dữ liệu từ DocType tương ứng (Pillar, Product, Service…). Bạn không cần điền lại dữ liệu trong JSON nếu nó đến từ DocType — chỉ cần cập nhật DocType nguồn và refresh trang.

7. Mẹo

• Mobile — Luôn kiểm tra trang trên khung 375 px (DevTools → Toggle Device Toolbar).
• Tiếng Việt — Tránh tiêu đề dài quá 60 ký tự để không bị tràn trên mobile.
• Sao lưu nhanh — Trước khi sửa lớn (xoá nhiều block), copy JSON của trường Blocks sang file text để có thể khôi phục nếu cần.