- Tại sao nên chọn Init Read?
- Không cần dependency
- Thiết kế dark theme hiện đại
- Tự động nhận diện ngôn ngữ
- Mục lục tự động và chính xác
- Tự động cập nhật khi nội dung thay đổi
- Các tính năng chính của Init Read
- Hướng dẫn cài đặt Init Read
- Cách 1: Auto-inject (đơn giản nhất)
- Cách 2: Custom container
- Cách 3: Với cấu hình tùy chỉnh
- Bảng cấu hình đầy đủ của Init Read
- Hướng dẫn tùy chỉnh ngôn ngữ
- Cách tích hợp Init Read vào WordPress
- Phương pháp 1: Thêm vào theme file
- Phương pháp 2: Sử dụng plugin Insert Headers and Footers
- Phương pháp 3: Sử dụng functions.php
- Phương pháp 4: Sử dụng Code Snippets plugin
- API JavaScript của Init Read
- Câu hỏi thường gặp
- Init Read có miễn phí không?
- Init Read có làm chậm website không?
- Init Read có hoạt động trên Safari không?
- Làm sao để thay đổi màu sắc widget?
- Widget có hỗ trợ heading H4 không?
- Kết luận
Khác với các giải pháp khác trên thị trường, Init Read không phụ thuộc vào bất kỳ framework UI nào như Bootstrap, UIkit hay Tailwind. Bạn chỉ cần nhúng một file JavaScript duy nhất, widget sẽ tự động inject CSS và hoạt động ngay lập tức.
Tại sao nên chọn Init Read?
Trước khi đi vào hướng dẫn cài đặt, hãy cùng xem qua những lý do khiến Init Read trở thành lựa chọn hàng đầu cho việc thêm thanh tiến độ đọc vào website của bạn.
Không cần dependency
Init Read được viết hoàn toàn bằng vanilla JavaScript. Không cần jQuery, không cần React, không cần Vue. File JavaScript chỉ khoảng 25KB và CSS được tự động inject vào trang khi widget khởi động. Điều này có nghĩa là bạn có thể sử dụng Init Read trên bất kỳ website nào, từ blog WordPress cá nhân đến các trang tin tức lớn, mà không lo xung đột với các thư viện hiện có.
Thiết kế dark theme hiện đại
Giao diện của Init Read được thiết kế theo phong cách dark theme với hiệu ứng glassmorphism, bo góc mềm mại và animation mượt mà. Nút trigger hình tròn nổi bật trên mọi nền trang, dropdown mục lục có độ trong suốt với backdrop-filter blur, tạo cảm giác cao cấp và chuyên nghiệp. Widget tự động điều chỉnh vị trí và kích thước trên thiết bị di động, đảm bảo trải nghiệm người dùng tốt nhất.
Tự động nhận diện ngôn ngữ
Một trong những tính năng nổi bật của Init Read là khả năng tự động phát hiện ngôn ngữ từ thuộc tính lang của thẻ html. Nếu trang web của bạn có <html lang="vi">, widget sẽ hiển thị tiếng Việt. Nếu là <html lang="en">, widget sẽ chuyển sang tiếng Anh. Bạn cũng có thể ghi đè ngôn ngữ bằng cách truyền object i18n trong cấu hình, cho phép hỗ trợ thêm bất kỳ ngôn ngữ nào bạn muốn.
Mục lục tự động và chính xác
Init Read tự động quét các thẻ heading H2, H3 trong vùng nội dung bài viết và tạo mục lục phân cấp. Nếu heading chưa có ID, widget sẽ tự động tạo ID duy nhất dựa trên nội dung text. Khi bạn click vào một mục trong dropdown, trang sẽ scroll mượt mà đến vị trí heading tương ứng. Widget còn theo dõi vị trí scroll hiện tại để highlight mục đang đọc trong mục lục.
Tự động cập nhật khi nội dung thay đổi
Nếu website của bạn sử dụng lazy loading, infinite scroll hoặc AJAX để tải thêm nội dung, Init Read vẫn hoạt động chính xác nhờ MutationObserver. Widget theo dõi sự thay đổi trong DOM và tự động cập nhật danh sách heading cùng tiến độ đọc.
Các tính năng chính của Init Read
Dưới đây là tổng hợp đầy đủ các tính năng mà Init Read cung cấp:
- Vòng tròn tiến độ SVG với màu sắc và kích thước tùy chỉnh
- Mục lục tự động từ heading H2, H3 với phân cấp indent
- Smooth scroll đến heading khi click mục lục
- Highlight mục đang đọc theo vị trí scroll
- Tự động nhận diện ngôn ngữ từ
html lang(tiếng Anh và tiếng Việt) - Hỗ trợ override ngôn ngữ tùy chỉnh qua config
- Dark theme với glassmorphism, không tooltip rườm rà
- Responsive trên mọi thiết bị, tự động điều chỉnh vị trí
- MutationObserver tự cập nhật khi DOM thay đổi
- Hỗ trợ bàn phím (Escape để đóng dropdown)
- Đầy đủ ARIA labels cho accessibility
- Zero dependency, file ~25KB
- CSS tự động inject, không cần thêm file stylesheet
Hướng dẫn cài đặt Init Read
Có hai cách để cài đặt Init Read trên website của bạn. Cách đơn giản nhất là auto-inject, widget sẽ tự động tạo nút ở góc màn hình. Cách thứ hai là chèn vào container tùy chỉnh nếu bạn muốn kiểm soát vị trí hiển thị.
Cách 1: Auto-inject (đơn giản nhất)
Chỉ cần thêm một dòng script vào cuối thẻ body hoặc trong thẻ head:
<script src="init-read/init-read.min.js"></script>Widget sẽ tự động tạo nút ở góc dưới bên phải màn hình với cấu hình mặc định.
Cách 2: Custom container
Nếu bạn muốn đặt widget vào một vị trí cụ thể trong layout, hãy tạo container với ID initread-control:
<div id="initread-control"></div>
<script src="init-read/init-read.min.js"></script>Cách 3: Với cấu hình tùy chỉnh
Để tùy chỉnh widget, bạn cần định nghĩa object window.InitReadConfig trước khi load script:
<script>
window.InitReadConfig = {
articleSelector: 'article',
contentSelector: '.entry-content',
headingTags: ['h2', 'h3'],
progressColor: '#6366f1',
trackColor: 'rgba(128,128,128,0.18)',
position: 'bottom-right',
edgeOffset: 24,
autoInject: true
};
</script>
<script src="init-read/init-read.min.js"></script>Bảng cấu hình đầy đủ của Init Read
Dưới đây là danh sách đầy đủ các tùy chọn bạn có thể cấu hình cho Init Read:
| Tùy chọn | Mặc định | Mô tả |
|---|---|---|
articleSelector | article, .article, .post-content... | Selector để tìm phần tử article chính |
contentSelector | .content, .article-content... | Selector vùng nội dung bài viết |
headingTags | ['h2', 'h3'] | Các thẻ heading để tạo mục lục |
progressColor | #6366f1 | Màu vòng tròn tiến độ |
trackColor | rgba(128,128,128,0.18) | Màu nền vòng tròn |
circleSize | 22 | Kích thước vòng tròn (px) |
strokeWidth | 2.5 | Độ dày nét vẽ vòng tròn |
offsetTop | 80 | Khoảng cách offset khi scroll đến heading |
position | bottom-right | Vị trí widget: bottom-right, bottom-left, top-right, top-left |
edgeOffset | 24 | Khoảng cách từ cạnh màn hình (px) |
autoInject | true | Tự động tạo nút nếu không tìm thấy container |
i18n | null | Ghi đè ngôn ngữ tùy chỉnh |
Hướng dẫn tùy chỉnh ngôn ngữ
Init Read tự động phát hiện ngôn ngữ từ thuộc tính lang của thẻ html. Nếu lang="vi" hoặc lang="vi-VN", widget hiển thị tiếng Việt. Các giá trị khác sẽ mặc định tiếng Anh.
Nếu bạn muốn ghi đè hoàn toàn hoặc thêm ngôn ngữ mới, hãy sử dụng tùy chọn i18n:
<script>
window.InitReadConfig = {
i18n: {
tocTitle: 'Mục lục',
tocEmpty: 'Không có mục lục',
readingProgress: 'Tiến độ đọc'
}
};
</script>
<script src="init-read/init-read.min.js"></script>Cách tích hợp Init Read vào WordPress
Để thêm Init Read vào website WordPress, bạn có thể sử dụng một trong các cách sau:
Phương pháp 1: Thêm vào theme file
Mở file footer.php của theme và thêm script trước thẻ đóng </body>:
<script src="init-read/init-read.min.js"></script>
</body>Phương pháp 2: Sử dụng plugin Insert Headers and Footers
Cài đặt plugin Insert Headers and Footers, sau đó vào Settings > Insert Headers and Footers và dán script vào ô Scripts in Footer.
Phương pháp 3: Sử dụng functions.php
Thêm đoạn code sau vào file functions.php của theme:
function enqueue_initread() {
wp_enqueue_script('initread', 'init-read/init-read.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_initread');Phương pháp 4: Sử dụng Code Snippets plugin
Nếu bạn không muốn chỉnh sửa file theme, hãy cài đặt plugin Code Snippets và tạo một snippet mới với code tương tự như phương pháp 3.
API JavaScript của Init Read
Sau khi widget được khởi tạo, bạn có thể truy cập instance thông qua biến toàn cục để điều khiển widget:
// Làm mới headings và tiến độ (hữu ích sau khi tải nội dung động)
window.__initread_instance__.refresh();
// Hủy widget và dọn dẹp DOM
window.__initread_instance__.destroy();
// Khởi tạo lại widget
window.initRead();
// Truy cập class để tạo instance thủ công
const widget = new window.InitRead();Câu hỏi thường gặp
Init Read có miễn phí không?
Có, Init Read là thư viện mã nguồn mở được phát hành dưới giấy phép MIT. Bạn có thể sử dụng miễn phí cho cả dự án cá nhân và thương mại.
Init Read có làm chậm website không?
Không. File JavaScript chỉ khoảng 25KB, được nén và tối ưu. CSS được inject tự động nên không cần thêm request HTTP nào khác. Widget sử dụng requestAnimationFrame cho scroll handler để đảm bảo hiệu suất mượt mà.
Init Read có hoạt động trên Safari không?
Có, Init Read hỗ trợ tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Widget sử dụng các API web chuẩn như SVG, MutationObserver và requestAnimationFrame.
Làm sao để thay đổi màu sắc widget?
Bạn có thể thay đổi màu vòng tròn tiến độ bằng tùy chọn progressColor trong config. Ví dụ: progressColor: '#ff6b6b' sẽ đổi thành màu đỏ san hô.
Widget có hỗ trợ heading H4 không?
Có, bạn chỉ cần thêm 'h4' vào mảng headingTags trong config: headingTags: ['h2', 'h3', 'h4'].
Kết luận
Init Read là giải pháp lý tưởng nếu bạn đang tìm kiếm một widget tiến độ đọc nhẹ, đẹp và dễ sử dụng. Với thiết kế không phụ thuộc framework, khả năng tự động nhận diện ngôn ngữ và giao diện dark theme hiện đại, Init Read sẽ nâng cao trải nghiệm đọc bài viết trên website của bạn mà không làm tăng độ phức tạp của dự án.
Bình luận