Đây là đoạn mở đầu dùng để kiểm tra vị trí Mục lục. Mục lục không nên xuất hiện trước đoạn này. Người đọc cần nhìn thấy phần giới thiệu ngắn của bài trước, sau đó mới đến Mục lục và các phần nội dung chính.
Bài test này dùng cấu trúc HTML đơn giản của Blogger để kiểm tra Mục lục tự động, FAQ thu gọn, bảng responsive, code block có nút sao chép và các anchor H2/H3. Không chèn CSS hoặc JavaScript riêng trong bài.
Đoạn thứ ba giúp phần mở đầu đủ rõ để kiểm tra rằng theme đang chèn Mục lục ngay trước H2 đầu tiên, thay vì chèn lên đầu toàn bộ nội dung bài.
1. Tổng quan về bài test theme MIXTOOL
Phần này dùng để kiểm tra heading H2 đầu tiên, anchor tự động và vị trí Mục lục sau phần mở đầu.
2. Kiểm tra Mục lục tự động
Nếu theme hoạt động đúng, Mục lục sẽ lấy các H2 và H3 trong bài. Bài này có hơn 10 mục để kiểm tra chức năng thu gọn trên desktop.
2.1. Kiểm tra mục con cấp H3
H3 phải được thụt cấp trong Mục lục và vẫn cuộn đúng đến vị trí heading khi bấm.
2.2. Kiểm tra anchor tiêu đề
Trên desktop, hover vào H2 hoặc H3 có thể xuất hiện ký hiệu liên kết để sao chép deep-link đến đúng phần.
3. Kiểm tra thời gian đọc
Theme phải tính thời gian đọc dựa trên nội dung thật của bài. Giá trị hiển thị là ước tính, ví dụ ≈ 4 phút đọc, không phải bộ đếm thời gian đang chạy.
4. Kiểm tra bảng responsive
Bảng dưới đây cố ý có nhiều cột để kiểm tra giao diện desktop và khả năng cuộn ngang riêng trên mobile.
| Tính năng | Mức cơ bản | Mức cân bằng | Mức nâng cao | Ghi chú |
|---|---|---|---|---|
| Khoảng nghỉ | 10–15 giây | 5–10 giây | 2–5 giây | Nên điều chỉnh theo nhu cầu thực tế |
| Tỷ lệ bỏ qua | 35% | 25% | 10% | Không nên đặt cứng cho mọi tài khoản |
| Số lượt mỗi phiên | 50 | 150 | 300 | Chỉ là dữ liệu demo giao diện |
| Thiết bị | PC | PC / Mobile | Nhiều môi trường | Kiểm tra khả năng hiển thị bảng |
5. Kiểm tra Code Block và nút Sao chép
Theme phải tự nhận diện thẻ PRE bên dưới, tạo header code và nút Sao chép.
const config = {
delayMin: 5,
delayMax: 10,
skipRate: 25,
sessionLimit: 150
};
console.log("MIXTOOL theme test", config);
6. Kiểm tra code HTML
Block thứ hai giúp kiểm tra nhãn ngôn ngữ khác.
<section class="mixtool-test">
<h2>MIXTOOL Theme Test</h2>
<p>Nội dung kiểm tra code block.</p>
</section>
7. Kiểm tra ảnh trong nội dung
Nếu muốn test lazy-load, có thể chèn một ảnh thật bằng trình soạn thảo Blogger ngay dưới đoạn này. Theme không nên làm thay đổi kích thước hoặc làm vỡ bố cục ảnh.
8. Kiểm tra đoạn nội dung dài
Một bài hướng dẫn thường có nhiều đoạn văn. Phần này giúp kiểm tra khoảng cách giữa heading, paragraph, Mục lục và các block đặc biệt sau khi theme xử lý DOM.
8.1. Nội dung phụ thứ nhất
Đây là nội dung phụ để tăng số heading và kiểm tra Mục lục dài.
8.2. Nội dung phụ thứ hai
Đây là nội dung phụ thứ hai để kiểm tra thứ tự H3 trong Mục lục.
9. Một phần nội dung khác
Phần này tiếp tục tạo đủ số lượng heading để Mục lục vượt ngưỡng 10 mục trên desktop.
10. Một phần nội dung bổ sung
Nếu FIX28 vẫn được giữ đúng, Mục lục dài sẽ chỉ hiện 10 mục đầu và có nút xem toàn bộ.
11. Kiểm tra phần FAQ
Phần dưới đây là cấu trúc FAQ mà FIX31 phải nhận diện. Heading cha dùng H2 và các câu hỏi dùng H3.
Câu hỏi thường gặp
FAQ Accordion có tự thu gọn câu trả lời không?
Có. Khi theme hoạt động đúng, câu hỏi đầu tiên có thể mở sẵn và các câu hỏi còn lại được thu gọn.
Bấm vào câu hỏi có mở và đóng câu trả lời không?
Có. Click vào tiêu đề câu hỏi phải thay đổi trạng thái mở hoặc đóng mà không làm mất nội dung.
Anchor trong FAQ có còn hoạt động không?
Có. Heading câu hỏi vẫn phải giữ ID để Mục lục và deep-link hoạt động đúng.
FAQ trên mobile có gọn hơn không?
Có. Trên màn hình nhỏ, accordion giúp giảm chiều dài của bài viết vì chỉ câu trả lời đang cần xem mới mở.
Có nên tự tạo FAQ Schema ngay không?
Chưa cần trong bài test này. Trước hết chỉ kiểm tra UI và DOM hoạt động đúng, sau đó mới audit structured data riêng.
12. Kiểm tra phần kết luận
Nếu bạn nhìn thấy phần này sau FAQ và tất cả block phía trên hoạt động đúng, bài test đã đi qua các nhóm nội dung chính của theme mới.
Kết luận
Đây là bài HTML test dành riêng cho theme MIXTOOL. Sau khi đăng, cần kiểm tra desktop, mobile, Dark, Light, Mục lục, FAQ, bảng, code và điều hướng bài trước/bài tiếp theo.