Mục Lục Tự Động Thông Minh (Auto TOC)
Tính năng Auto TOC (Mục lục tự động thông minh) của theme TanaFlows (được thiết lập trong tệp nguồn toc.ts) là một trợ lý điều hướng độc đáo giúp biến trải nghiệm đọc các bài viết dài trên blog của bạn trở nên thú vị, chuyên nghiệp và mượt mà hơn bao giờ hết.
Thay vì một khối mục lục tĩnh thô cứng ở đầu trang, Auto TOC của TanaFlows hoạt động như một “Viên thuốc điều hướng di động” (Floating Pill) vô cùng thông minh.
🌟 Những lợi ích vượt trội cho người đọc (UX)
- Biết chính xác mình đang ở đâu: Khi bạn cuộn bài viết, dòng chữ trên “viên thuốc” sẽ tự động thay đổi bằng hiệu ứng trượt lên/xuống mượt mà để hiển thị tên tiêu đề của phần bạn đang đọc.
- Ước lượng độ dài bài viết trực quan: Xung quanh biểu tượng nút mục lục có một vòng tròn tiến trình chạy động (Radial Progress Bar). Vòng tròn này sẽ đầy dần lên tương ứng với tiến trình cuộn trang của bạn, giúp bạn biết mình đã đọc được bao nhiêu % bài viết.
- Nhảy nhanh đến phần quan trọng: Bạn chỉ cần nhấp nhẹ vào viên thuốc, một danh sách đề mục bài viết (Mục lục) sẽ hiện lên tuyệt đẹp. Bấm vào bất kỳ mục nào, trang sẽ tự động cuộn êm ái đến đúng phần đó mà không bị giật lag hay nhảy trang đột ngột.
- Thiết kế thông minh, không làm phiền:
- Mục lục chỉ xuất hiện khi bạn cuộn qua phần mở đầu của bài viết và sẽ tự động biến mất khi bạn cuộn đến cuối trang (khu vực chân trang), trả lại không gian tối đa để bạn tương tác với các bình luận hay bài viết liên quan.
- Nếu bài viết ngắn (dưới 2 tiêu đề chính), mục lục sẽ tự động ẩn đi vì không cần thiết.
- Nếu bài viết quá dài, mục lục sẽ tự động rút gọn (chỉ hiển thị các tiêu đề lớn
H2) để danh sách không bị rối mắt.
⚙️ Cách thức hoạt động dưới góc nhìn phổ thông
Để mang lại những lợi ích trên, hệ thống ngầm xử lý các tác vụ phức tạp một cách vô cùng nhẹ nhàng:
- Quét tự động: Ngay khi bài viết được mở, hệ thống sẽ quét qua toàn bộ bài viết để tìm các tiêu đề chính (các phần
H2,H3bạn tạo trong bài) và dựng thành một thực đơn điều hướng. - Mắt đọc thông minh (Intersection Observer): Thay vì liên tục tính toán vị trí cuộn của trang (gây tốn pin và giật lag điện thoại), theme sử dụng cảm biến thông minh của trình duyệt để nhận biết khi nào một tiêu đề mới xuất hiện trên màn hình và cập nhật tên tiêu đề đó lên thanh điều hướng.
- Tối ưu hóa không gian hiển thị (Smart Offsets): Khi bạn bấm vào một mục, trang sẽ cuộn đến phần đó nhưng luôn chừa ra một khoảng trống nhỏ ở phía trên (20 pixel trên điện thoại và 100 pixel trên máy tính) để đảm bảo dòng tiêu đề không bị che khuất bởi thanh menu (Header) của trang web.
- Hiệu ứng vi chạm (Micro-interactions): Trên máy tính sử dụng chuột, khi bạn di chuột quanh viên thuốc mục lục, một hiệu ứng ánh sáng nhẹ sẽ tự động bám đuổi theo hướng di chuyển của chuột để phản hồi lại hành động của bạn, tạo cảm giác giao diện vô cùng cao cấp và sống động.