Init Docs cung cấp một Demo metabox dành cho các bài viết tài liệu cần hiển thị ví dụ trực quan, code tương tác hoặc kết quả chạy thực tế. Tính năng này được thiết kế cho tài liệu kỹ thuật, nơi việc minh hoạ bằng HTML, CSS và JavaScript giúp người đọc hiểu nội dung nhanh và chính xác hơn.
Demo metabox không hiển thị mặc định. Việc sử dụng demo được kiểm soát thông qua Theme Settings và shortcode trong nội dung bài viết.
Điều kiện để sử dụng Demo metabox
Demo metabox chỉ xuất hiện khi đáp ứng đầy đủ các điều kiện sau:
- Tuỳ chọn Post Demo Mode đã được bật trong Theme Settings
- Người dùng có quyền administrator
- Bài viết thuộc loại post
Cách tiếp cận này giúp hạn chế việc chèn code tuỳ tiện và giữ môi trường quản trị an toàn, gọn gàng.
Vị trí và vai trò của Demo metabox
Khi được kích hoạt, Demo metabox sẽ xuất hiện trong màn hình chỉnh sửa bài viết, cho phép nhập trực tiếp các đoạn mã:
- HTML cho nội dung demo
- CSS cho phần trình bày
- JavaScript cho hành vi tương tác
Demo metabox chỉ lưu trữ code và không tự động hiển thị ra frontend nếu không có chỉ định rõ ràng trong nội dung bài viết.
Shortcode [demo]
Để hiển thị demo trên trang bài viết, bạn cần sử dụng shortcode [demo] tại vị trí mong muốn trong nội dung.
Shortcode này quyết định chính xác nơi demo xuất hiện, cho phép bạn:
- Đặt demo sau phần giải thích lý thuyết
- Chèn demo giữa các section nội dung
- Kiểm soát luồng đọc của người dùng
Nếu không sử dụng shortcode, nội dung demo sẽ không được hiển thị.
Cách Init Docs xử lý HTML demo
Nội dung HTML được nhập trong Demo metabox sẽ được render trực tiếp tại vị trí shortcode [demo].
HTML chỉ được hiển thị trong ngữ cảnh:
- Trang bài viết đơn lẻ
- Bài viết hiện tại
Cách xử lý này đảm bảo demo không bị render ngoài ngữ cảnh tài liệu.
Cách Init Docs xử lý CSS demo
CSS trong Demo metabox được chèn inline vào trang thông qua thẻ style trước khi kết thúc phần head.
Đặc điểm của cách xử lý này:
- CSS chỉ áp dụng cho trang bài viết hiện tại
- Không ảnh hưởng tới các trang khác
- Không cần tải thêm file CSS riêng
CSS demo được phân tách rõ ràng và chỉ tồn tại khi bài viết có nội dung demo.
Cách Init Docs xử lý JavaScript demo
JavaScript trong Demo metabox được chèn inline vào cuối trang, ngay trước thẻ đóng body.
Cách triển khai này giúp:
- Đảm bảo DOM đã sẵn sàng khi script chạy
- Giảm rủi ro ảnh hưởng tới hiệu năng trang
- Giữ phạm vi script giới hạn trong trang hiện tại
JavaScript demo không được load trên archive hoặc trang khác.
Lưu ý về bảo mật và hiệu năng
Demo metabox được thiết kế cho mục đích tài liệu và ví dụ kỹ thuật.
Khi sử dụng, bạn nên:
- Chỉ chèn code cần thiết cho việc minh hoạ
- Tránh sử dụng thư viện ngoài không cần thiết
- Không dùng demo cho mục đích tracking hoặc marketing
Việc giới hạn quyền sử dụng demo cho administrator giúp giảm rủi ro và giữ hệ thống ổn định.
Khi nào nên sử dụng Demo metabox?
Demo metabox phù hợp trong các trường hợp sau:
- Minh hoạ kết quả HTML/CSS
- Ví dụ JavaScript tương tác
- Hướng dẫn kỹ thuật cần xem kết quả trực tiếp
Với các nội dung không cần tương tác, bạn nên ưu tiên code block hoặc hình ảnh minh hoạ.
Tổng kết
Demo metabox là công cụ mạnh mẽ giúp Init Docs trở thành một theme phù hợp cho tài liệu kỹ thuật và developer. Việc kết hợp Demo metabox với shortcode [demo] cho phép kiểm soát chính xác vị trí hiển thị, giữ nội dung rõ ràng và trải nghiệm đọc tập trung.