Hướng dẫn table of contents html - mục lục html
Như các bạn đã biết một trong bảy tiêu chí quan trọng để SEO một trang, là mỗi bài viết phải có một Table of Contents.Table of Contents. Show Table of Contents (TOC) là một mục lục của bài viết. Thông thường đầu mỗi bài viết đều có một mục lục, giúp cho người đọc có cái nhìn tổng quan về bài viết, có thể truy cập nhanh và chính xác đến một mục trong bài viết. Làm cho người đọc có trãi nghiệm tốt hơn, thân thiện hơn.mục lục của bài viết. Thông thường đầu mỗi bài viết đều có một mục lục, giúp cho người đọc có cái nhìn tổng quan về bài viết, có thể truy cập nhanh và chính xác đến một mục trong bài viết. Làm cho người đọc có trãi nghiệm tốt hơn, thân thiện hơn. Trong bài viết này, tôi sẽ hướng dẫn các bạn từ A đến Z cách tạo một Table of Contents. Nếu bạn có kiến thức tốt về CSS và jQuery thì chắc chắn sau khi xem xong video và bài viết này các bạn có thể tự xây dựng một Table of Contents riêng cho chính mình. Nếu bạn chưa hiểu lắm thì có thể dùng tạm code của mình, rồi từ từ hiểu sau cũng được. Vì đây là code do bản thân mình tự tạo ra nên sẽ dễ phát hiện và xử lý khi xảy ra lỗi. Nếu các bạn muốn lấy để chia sẻ trên trang cá nhân thì mong rằng các bạn để rõ nguồn nhé. -contents-ch Liên kết giữa Table of Contents với Post ContentThông qua cách thức liên kết giữa Table of Content với Post Content, tôi đã vẽ lại một mô hình để các bạn có thể dễ hình dung sự liên kết này. Giải thích mô hình trên như sau:: Bên trong các bài viết đều có gắn các thẻ Heading (H2, H3. H4, H5). Trên mỗi heading có một ID duy nhất, và các ID này không trùng nhau. Để liên kết được một mục trong Table of Contents với một Heading, thì phải lấy ID của heading đó đưa vào thuộc tính href của thẻ a (href="#id_of_heading"). ID duy nhất, và các ID này không trùng nhau. Để liên kết được một mục trong Table of Contents với một Heading, thì phải lấy ID của heading đó đưa vào thuộc tính href của thẻ a (href="#id_of_heading"). Mô hình hoạt động của Table of ContentsĐể có thể xây dựng được các hàm cho Table of Contents thực thi hoàn toàn tự động. Thì chúng ta cùng tham khảo qua mô hình sau: Chúng ta sẽ dùng một cặp thẻ có chứa id ở ngoài cùng, mục đích để bao trọn tất cả. Trên đầu bài viết thì được chèn thêm vào một đoạn code để hiện thị Table of Contents. Dưới thân của bài viết chúng ta thêm function getHeading(). Chức năng của hai function trên được miêu tả như sau: 1. fuction getHeading(), chờ bài viết tải lên hoàn tất, rồi thực thi nhiệm vụ:
2. function onClick() có nhiệm vụ thăm dò tác động của người dùng. Nếu người dùng nhấp vào biểu tượng trên Table of Content thì Table of Content sẽ được mở rộng ra. Nếu người dùng nhấp vào biểu tượng thêm ần nữa thì Table of Content sẽ thu vào. Thêm Table of Content vào bài viếtCác bạn vào phần quản lý của Blogger, tiếp theo chọn Theme \ Edit HTML. Sau đó nhấn tổ hợp phím Ctrl + F, và tìm chuỗi . Thay thế bằng đoạn code sau đây:Theme \ Edit HTML. Sau đó nhấn tổ hợp phím Ctrl + F, và tìm chuỗi Trong đó chứa Table of Contents gồm: Để tạo giao diện của Table of Content, các bạn vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi ]]>:Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi ]]>: Và dán đoạn code CSS sau đây vào trên vị trí vừa tìm gặp. Nếu các bạn muốn biết mỗi đoạn CSS trên có ảnh hưởng đến Table of Contents thế nào thì xem chi tiết ở video đầu bài viết nhé. Các bạn tiếp tục vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi . Dán đoạn code jQuery sau đây vào trên thẻ .Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi . Dán đoạn code jQuery sau đây vào trên thẻ . Cuối cùng các bạn lưu lại và load lại bài viết xem thành quả nhé. |