Hướng dẫn tích hợp liên kết phương thức hướng hành động

Last updated on Jun 23, 2026 10:37

Giới thiệu

Trong thiết kế web hiện đại, việc thu hút người dùng mà không buộc họ phải rời khỏi trang hiện tại là điều tối quan trọng. PolyCMS có khối Liên kết phương thức năng động, được tối ưu hóa cao, cho phép tác giả nhúng các lớp phủ phương thức tương tác (cửa sổ bật lên) trực tiếp trong các bài viết hoặc trang đích.

Cho dù bạn muốn hiển thị biểu mẫu đăng ký nhanh, hiển thị tài liệu điều khoản dịch vụ hay nhúng trang web bên ngoài phản hồi bên trong iframe, thành phần Modal Link đều cung cấp giải pháp dễ dàng.

Tính năng và cấu hình tương tác

Khối Liên kết Phương thức có thể cấu hình cao thông qua Trình chỉnh sửa Khối, cung cấp khả năng kiểm soát chi tiết về kiểu dáng, kích thước và nội dung:

1. Chế độ hiển thị kích hoạt

Bạn có thể trình bày trình kích hoạt phương thức theo hai kiểu trực quan:

Chế độ liên kết (link): Hiển thị dưới dạng liên kết nội tuyến nhẹ (.poly-modal-trigger-link) với gạch chân chấm, hoàn hảo cho các điều khoản và điều kiện hoặc ghi chú nhỏ bên lề trong một đoạn văn.
Chế độ nút (button): Hiển thị dưới dạng nút hành động hình viên thuốc được cách điệu hóa cao (.poly-modal-trigger-button) có các hoạt ảnh vi mô dịch di chuột mượt mà (translateY(-2px)) và bóng đổ màu xanh lam rõ rệt.

2. Đặt trước kích thước

Lớp phủ thích ứng nhanh với ba chiều rộng vùng chứa tiêu chuẩn:

Nhỏ (sm): Độ rộng tối đa được giới hạn ở 500px — lý tưởng cho các cảnh báo thông báo đơn giản, lời nhắc đăng nhập hoặc hộp thoại xác nhận nhỏ gọn.
Lớn (lg): Chiều rộng tối đa được giới hạn ở 800px — hoàn hảo cho các bài viết, biểu mẫu hoặc nội dung đa phương tiện HTML tùy chỉnh.
Toàn màn hình (full): Mở rộng tới 95% chiều rộng khung nhìn và chiều cao 85vh — được tối ưu hóa cho bảng điều khiển phức tạp hoặc trình đọc tài liệu nặng.

3. Các loại nội dung linh hoạt

Bố cục HTML (html): Hiển thị đánh dấu HTML khối theo kiểu thô ngay bên trong thẻ với vùng đệm 24px thoải mái.
IFrame Embeds (iframe): Tích hợp các mục tiêu web bên ngoài với độ an toàn tuyệt đối, đặt lại phần đệm thẻ về 0px để đảm bảo hiển thị khung canvas từ cạnh này sang cạnh kia liền mạch.

Kiến trúc kết xuất cơ bản

Quy trình hiển thị trong lõi ContentRenderer.php sử dụng mẫu thu thập hai pha phức tạp để đảm bảo HTML trang được tạo sạch, hợp lệ và có hiệu suất cao:

graph TD
    A[Post Rendering Initiated] --> B[Parse Block content_raw]
    B --> C{Detect modalLink Block?}
    C -->|Yes| D[Phase 1: Render Inline Trigger Link/Button]
    C -->|Yes| E[Phase 2: Generate Modal Overlay & Script Markup]
    D --> F[Inject into Content Flow]
    E --> G[Collect inside $this->modalOverlays Array]
    F --> H[Combine and Apply Filter hooks]
    G --> I[Append Overlays at End of Document Flow]
    H --> J[Final Rendered HTML Output]
    I --> J

Giai đoạn 1: Kích hoạt thẻ cụm từ

Khối tạo ra một phần tử cụm từ nội tuyến (<a> hoặc <button>) với ID ml-* duy nhất. Bởi vì nó được hiển thị dưới dạng phần tử cấp độ nội tuyến mà không có đánh dấu cấp độ khối lồng nhau nên nó duy trì khả năng tương thích ngữ nghĩa hoàn hảo và có thể được đặt một cách an toàn bên trong các đoạn văn bản tiêu chuẩn.

Giai đoạn 2: Trì hoãn lớp phủ

Thay vì đưa trực tiếp đánh dấu lớp phủ nặng vào luồng đoạn văn (điều này sẽ phá vỡ các nguyên tắc ngữ nghĩa và quy tắc lồng nhau), trình kết xuất sẽ đẩy thẻ phương thức và các phân đoạn tập lệnh vào một mảng toàn cục ($this->modalOverlays). Khi kết thúc vòng đời kết xuất, hệ thống sẽ tổng hợp tất cả các vùng chứa phương thức đã thu thập và thêm chúng vào cuối luồng tài liệu, ngay sau đó là các tập lệnh khởi tạo của chúng.

Trình xử lý sự kiện và khả năng truy cập

Các phương thức PolyCMS được trang bị đầy đủ các tương tác gốc, đáp ứng ngay lập tức:

Đóng cửa nhấp chuột bên ngoài: Nhấp vào lớp phủ phông nền tối sẽ đóng thẻ phương thức đang hoạt động một cách an toàn.
Escape Key Listener: Nhấn phím Escape sẽ ngay lập tức đóng mọi hộp thoại đang mở, quay lại tiêu điểm bố cục.
Chế độ tối đáp ứng: Có các quy tắc tạo kiểu @media (prefers-color-scheme: dark) độc lập để tự động chuyển đổi các thẻ phương thức thành bố cục đá phiến đẹp mắt, ít chói khi bật chế độ tối trên thiết bị khách.

Ví dụ thực tế: Bảng điều khiển tương tác được nhúng

Dưới đây là ví dụ trực tiếp trong thế giới thực minh họa cả việc nhúng trang tổng quan iframe có chiều rộng đầy đủ trực tiếp và trình kích hoạt liên kết phương thức hướng hành động.

Nhúng trực tiếp trực tiếp (Mô hình bảng điều khiển toàn chiều rộng)

Bạn có thể nhúng các báo cáo tương tác trực tiếp vào bài viết của mình bằng cách sử dụng vùng chứa iframe có độ rộng đầy đủ, đáp ứng:

Trình kích hoạt chế độ toàn màn hình tương tác

Bạn cũng có thể đóng gói báo cáo giống hệt này vào một liên kết phương thức hướng hành động, cho phép người đọc mở báo cáo đó trong lớp phủ toàn màn hình đẹp mắt chỉ bằng một cú nhấp chuột.

Đây là nút kích hoạt phương thức trực tiếp đang hoạt động:

Mở phương thức báo cáo tương tác

Trình kích hoạt văn bản neo đoạn văn nội tuyến

Ngoài các nút hành động nổi bật, bạn có thể kích hoạt các lớp phủ phương thức một cách liền mạch từ trong đoạn văn bản tiêu chuẩn. Cách tiếp cận nội tuyến này có hiệu quả cao khi tham khảo các điều khoản dịch vụ, dữ liệu nghiên cứu phụ trợ hoặc các tiện ích tương tác mà không làm gián đoạn động lực của người đọc.

Đây là một đoạn trực tiếp minh họa trình kích hoạt phương thức nội tuyến thông qua văn bản liên kết:

Chúng tôi liên tục theo dõi tình hình kinh doanh của mình để tối ưu hóa chi phí hoạt động. Ví dụ: bạn có thể xem lại báo cáo hiệu suất tài chính chi tiết hàng tháng của chúng tôi ngay trong cửa sổ này mà không cần phải chuyển đi, cho phép các bên liên quan đưa ra quyết định nhanh chóng, dựa trên dữ liệu một cách nhanh chóng.

Cách nhúng qua Markdown/HTML

Để sao chép iframe có chiều rộng đầy đủ này được nhúng trên trang web của bạn, hãy thêm đánh dấu sau vào bài viết Markdown của bạn:

<iframe src="https://databuilder.polyxgo.com/embed/report/monthly-expense-vs-payment?chart=1&table=1&type=bar&chart_hidden=1" style="width: 100%; height: 500px; border: none; border-radius: 12px;" allowfullscreen></iframe>