Hướng dẫn tạo mục lục bài viết bằng Javascript

Mục lục bài viết (Table of Contents – TOC) mang lại nhiều lợi ích quan trọng cho cả người dùng và SEO của website.

Giới thiệu về nền tảng thiết kế website Astro

Astro là một nền tảng thiết kế website tĩnh (static site generator) hiện đại, được tối ưu hóa cho hiệu suất và trải nghiệm người dùng. Được xây dựng với mục tiêu tạo ra các website nhanh chóng, dễ bảo trì và thân thiện với SEO, Astro đã trở thành lựa chọn hàng đầu cho nhiều nhà phát triển và doanh nghiệp.

Astro nổi bật với khả năng kết hợp các framework khác nhau như React, Vue, Svelte, SolidJS… trong cùng một dự án. Điều này giúp bạn tận dụng tối đa sức mạnh của từng framework mà không phải lo lắng về hiệu suất. Ngoài ra, một trong những tính năng quan trọng của Astro là Partial Hydration — chỉ tải Javascript cần thiết trên trang, giúp giảm thiểu tài nguyên không cần thiết và tăng tốc độ tải trang.

Astro cũng hỗ trợ Markdown và MDX để quản lý nội dung, rất hữu ích cho các website tĩnh, blog hoặc tài liệu kỹ thuật. Với khả năng này, bạn có thể dễ dàng tạo nội dung và tận dụng Javascript để nâng cao trải nghiệm người dùng, chẳng hạn như thêm mục lục tự động cho bài viết dài.

Tầm quan trọng của việc có mục lục bài viết trên Website

Việc có một mục lục bài viết (Table of Contents – TOC) mang lại nhiều lợi ích quan trọng cho cả người dùng và SEO của website. Khi bài viết trở nên dài và phức tạp, mục lục sẽ giúp người đọc:

– Dễ dàng điều hướng: Mục lục cung cấp một cái nhìn tổng quan về nội dung, giúp người đọc nắm bắt nhanh các phần quan trọng mà không cần cuộn qua toàn bộ bài viết.

– Cải thiện trải nghiệm người dùng (UX): Người dùng sẽ cảm thấy dễ dàng hơn khi tìm kiếm thông tin cụ thể trong bài viết, dẫn đến thời gian ở lại trang lâu hơn.

– Tăng cường SEO: Công cụ tìm kiếm như Google đánh giá cao các website có cấu trúc rõ ràng và mục lục giúp tăng khả năng bài viết xuất hiện trong Google Sitelinks, làm tăng cơ hội tiếp cận người dùng.

Ngoài ra, mục lục còn giúp bài viết của bạn trông chuyên nghiệp hơn, đặc biệt là trong các blog kỹ thuật, tài liệu hướng dẫn hoặc các trang cung cấp thông tin chi tiết.

Tạo mục lục bài viết bằng Javascript

Để tạo mục lục bài viết bằng Javascript, bạn cần quan tâm đến 2 tệp chính: table.astro chứa Javascript tạo mục lục, và single.astro đặt vị trí mục lục. Tùy vào cấu trúc thư mục, mà 2 tệp này được định nghĩa, định dạng khác nhau, bạn cần tạo tệp table.astro và xác định vị trí của tệp single.astro để tiến hành điều chỉnh.

Tạo file Javascript để sinh mục lục

Đầu tiên, bạn cần tạo một tệp Javascript để tự động sinh ra mục lục dựa trên các thẻ tiêu đề (<h2>, <h3>, <h4>…) trong bài viết.

Tạo một tệp mới có tên table.astro và đặt chúng trong thư mục ~/components/article với đoạn code sau:

<script type="module">
	function generateTOC() {
		const index = document.getElementById('index');
		const headings = document.querySelectorAll('h2, h3, h4');

		const tocList = document.createElement('ul');
		let currentParent = null;

		headings.forEach(heading => {
			const listItem = document.createElement('li');
			const anchor = document.createElement('a');
			anchor.href = `#${heading.id}`;
			anchor.textContent = heading.textContent;
			listItem.appendChild(anchor);

			switch (heading.tagName.toLowerCase()) {
				case 'h2':
					break;
				case 'h3':
					listItem.style.fontStyle = 'italic';
					break;
				case 'h4':
					break;
			}

			if (heading.tagName.toLowerCase() === 'h3' || heading.tagName.toLowerCase() === 'h4') {
				if (currentParent) {
					const subList = currentParent.querySelector('ul') || document.createElement('ul');
					subList.appendChild(listItem);
					currentParent.appendChild(subList);
				}
			} else {
				tocList.appendChild(listItem);
				currentParent = listItem;
			}
		});

		index.appendChild(tocList);

	}

	window.onload = generateTOC;
</script>

Bước 2: Đặt mục lục vào trong bài viết

Tiếp theo, trong tệp cấu hình bài viết, bạn chèn phần tử để hiển thị mục mục. Cụ thể, trong tệp single.astro, hãy thêm đoạn code sau:

---
import Table from '~/components/article/table.astro';
---

<section>
	<Table/>
</section>

Phần tử <Table> này sẽ là nơi hiển thị toàn bộ mục lục mà chúng ta sẽ tạo ra bằng Javascript. Bạn có thể đặt phần tử này ở đầu bài viết hoặc trong một sidebar tùy thuộc vào thiết kế website của bạn.

Vị trí ~/components/article/table.astro cần điều chỉnh, xác định đúng vị trí để đoạn code có thể triển khai được trên bài viết.

Tinh chỉnh mục lục bài viết bằng Javascript

Nếu website có các thẻ heading phụ, dùng để hiển thị các thành phần không liên quan đến bài viết, thì phần mục lục sẽ hiển thị nhiều hơn các mục này. Để ẩn các mục thừa ấy, bạn cần tinh chỉnh lại đoạn code trên.

Trước tiên, cần xác định với mỗi bài viết, sẽ có bao nhiêu heading thừa, không cần tạo mục mục, ví dụ như Giới thiệu tác giả, Giới thiệu bài mới, Dịch vụ hay các thành phần khác.

Đặt giả định rằng mỗi bài viết sẽ có khoảng 20 heading thừa, không cần đưa vào mục lục, thì đoạn code sẽ được điều chỉnh lại như sau:

<script type="module">
	function generateTOC() {
		const index = document.getElementById('index');
		const headings = document.querySelectorAll('h2, h3, h4');

		const tocList = document.createElement('ul');
		let currentParent = null;

		headings.forEach(heading => {
			const listItem = document.createElement('li');
			const anchor = document.createElement('a');
			anchor.href = `#${heading.id}`;
			anchor.textContent = heading.textContent;
			listItem.appendChild(anchor);

			switch (heading.tagName.toLowerCase()) {
				case 'h2':
					break;
				case 'h3':
					listItem.style.fontStyle = 'italic';
					break;
				case 'h4':
					break;
			}

			if (heading.tagName.toLowerCase() === 'h3' || heading.tagName.toLowerCase() === 'h4') {
				if (currentParent) {
					const subList = currentParent.querySelector('ul') || document.createElement('ul');
					subList.appendChild(listItem);
					currentParent.appendChild(subList);
				}
			} else {
				tocList.appendChild(listItem);
				currentParent = listItem;
			}
		});

		index.appendChild(tocList);

		hideLastTOCItems(tocList, 20);
	}

	function hideLastTOCItems(tocList, count) {
		const items = tocList.querySelectorAll('li');
		const totalItems = items.length;

		const itemsToHide = Math.min(count, totalItems);

		for (let i = totalItems – itemsToHide; i < totalItems; i++) {
			items[i].style.display = 'none';
		}
	}

	window.onload = generateTOC;
</script>

Trong đoạn code này, hideLastTOCItems(tocList, 20) giúp ẩn 20 mục lục cuối cùng. Bạn có thể thay đổi số lượng mục lục bị ẩn hoặc loại bỏ hoàn toàn chức năng này nếu không cần.

Nếu đoạn code không hoạt động, hoặc không thể sử dụng, có thể chúng đã được điều chỉnh. Truy cập vào đây để tiếp cận đoạn code tạo mục lục bài viết mới nhất.

Như vậy, với đoạn code Javascript nêu trên, website của bạn đã có thêm mục lục bài viết, giúp nội dung hiển thị trực quan, tối ưu SEO và thân thiện với người đọc hơn rất nhiều.