Lời nhắc có cấu trúc giúp cải thiện UI/UX của blog dựa trên giao diện Tistory Poster của bạn lên cấp độ chuyên nghiệp. Dựa trên tài liệu tham khảo inpa.tistory.com.
1## Vai trò2Bạn là nhà thiết kế giao diện người dùng cấp cao chuyên về tùy chỉnh chủ đề blog. Bạn nâng cao giao diện blog Tistory lên UI/UX cấp chuyên nghiệp.34## Bối cảnh5- **Cơ sở**: Giao diện "Áp phích" Tistory với Anh hùng tùy chỉnh, lưới thẻ, hoạt ảnh AOS, thanh bên tối6- **Tham khảo**: inpa.tistory.com (blog nhà phát triển chuyên nghiệp với 872 bài đăng, giao diện người dùng phong phú)7- **Hệ màu**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe0668- **Chủ đề tối**: Độ dốc thanh bên #0f0c29 → #1a1a2e → #16213e910## Ràng buộc11- Chỉ hệ thống giao diện Tistory (mẫu HTML + CSS, JS nội tuyến)12- Biến mẫu: [##_var_##], khối s_tag, ID nội dung (tt-body-index, tt-body-page, v.v.)13- Không có thư viện JS bên ngoài (chỉ JS vanilla)14- Nhà viết kịch + biên tập viên Monaco để triển khai tự động15- Phải bảo toàn AOS hiện có, hoạt ảnh gõ, chức năng thị sai1617## Danh sách kiểm tra nâng cao (Thứ tự ưu tiên)1819### A-Tier (Tác động cao, dễ thực hiện)201. **Thanh tiến trình cuộn**: Đã sửa lỗi thanh trên cùng hiển thị tiến trình đọc trên các trang bài đăng21 - CSS: chiều cao 3px, màu nhấn phù hợp với độ dốc, z-index 999922 - JS: sự kiện cuộn → tính phần trăm chiều rộng23 - Chỉ hiển thị trên tt-body-page (chi tiết bài viết)24252. **Nút nổi quay lại đầu**: Dưới cùng bên phải, xuất hiện sau khi cuộn 300px26 - CSS: hình tròn 48px, độ dốc nhấn, chuyển đổi độ mờ mượt mà27 - JS: chuyển đổi ngưỡng cuộn, cuộn mượt màTo(0,0)28 - Biểu tượng: Mũi tên chevron chỉ CSS29303. **Phần hồ sơ bên**: Avatar + tên blog + mô tả các danh mục trên31 - HTML: Sử dụng [##_blogger_##] hoặc khối hồ sơ thủ công32 - CSS: Căn giữa, avatar viền gradient, card hình thủy tinh33 - Desktop: Bên trong khu vực trên cùng của thanh bên tối34 - Di động: Ngăn trượt bên trong35364. **Cải tiến huy hiệu số lượng danh mục**: Huy hiệu thuốc màu cho mỗi danh mục37 - CSS: Huy hiệu tròn nhỏ với nền gradient tạo điểm nhấn38 - Mức độ mờ khác nhau cho danh mục chính và danh mục phụ3940### Cấp B (Tác động trung bình)415. **Dụng cụ tách sóng anh hùng**: Cạnh dưới cong trên phần anh hùng42 - CSS: clip-path hoặc ::after phần tử giả với sóng SVG43 - Chuyển đổi mượt mà từ vùng nội dung bóng tối sang vùng nội dung ánh sáng44456. **TOC nổi**: Mục lục cố định bên phải trên các trang bài viết46 - JS: Phân tích cú pháp các tiêu đề h2/h3 từ #article-view, xây dựng TOC động47 - CSS: Cố định vị trí, dấu viền trái trên phần hoạt động48 - Chỉ trên tt-body-page, ẩn trên di động49 - Đánh dấu phần hiện tại qua IntersectionObserver5051## Yêu cầu đầu ra52- Cung cấp các bổ sung CSS hoàn chỉnh (thêm vào biểu định kiểu hiện có)53- Cung cấp các sửa đổi HTML hoàn chỉnh (tối thiểu, sử dụng cấu trúc mẫu hiện có)54- Cung cấp JS nội tuyến (thêm vào khối tập lệnh hiện có)55- Tất cả mã phải ở dạng sẵn sàng sản xuất, không phải nguyên mẫu
