在信息過載成為常態的時代，結構良好的文章目錄（Table of Contents，簡稱ToC）就像燈塔一樣，可以引導讀者穿越文字海洋，本文將帶領讀者如何開發 Table of Contents，只使用最基本的網頁技術。
一個動態的文章目錄 ToC，就是一篇文章的結構，清楚表達文章的大綱，讓讀者可以快速輕易的取得各章節的位置，這可以大幅程度的增加使用者體驗也鼓勵讀者更多地參與和互動。
ToC 和 SEO 的重要性
ToC 對於網站的搜索引擎優化（Search Engine Optimization，簡稱 SEO）具有多重的重要性。
提升用戶體驗
ToC使用戶能更快地找到他們所需要的信息，這對於用戶體驗（User Experience，簡稱 UX）是非常有利的。搜索引擎越來越重視 UX 作為排名的一個因素。
降低跳出率
目錄能幫助用戶快速瀏覽文檔並找到他們想要的部分，從而降低跳出率。低跳出率通常被認為是網頁質量的一個指標，並且可能有助於提高搜索排名。
增加停留時間
通過方便的導航，用戶可能會花更多的時間在您的頁面上，這是另一個搜索引擎用來評估網頁質量的因素。
鏈接優化
許多目錄工具會自動生成錨點鏈接（anchor links），這不僅方便用戶，也讓搜索引擎更容易解析頁面結構。
促進內鏈結構
良好的內部鏈接結構不僅能提高網頁的可用性，還能將網頁權重更有效地傳遞給其他相關頁面。
增加內容可見性
目錄使得搜索引擎更容易理解內容的結構和重要性，這可能會影響到如何索引和排列您的內容。
可能出現在 Rich Results
具有良好結構和目錄的頁面更有可能出現在 Google 等搜索引擎的 Rich Results 中，這會顯著提高點擊率。
關鍵字優化
目錄項目通常直接反映了內容中的主要子主題和關鍵字，這有助於搜索引擎更準確地判斷頁面的相關性。
手機友好
對於手機用戶來說，一個清晰的目錄可以大大提高頁面的可用性，這是 Google 等搜索引擎日益重視的一個因素。
總之，一個優良的 ToC 不僅有助於用戶，也有助於搜索引擎更好地理解和評價您的內容，從而可能提高您的搜索排名。
接下來將會使用最基本的網頁開發技術，實作一個簡單可運作的 Table of Contents.
HTML：設置基礎架構
創建 ToC 首先要正確構建 HTML。 為了使 ToC 有效地工作，必須正確設置文檔的標題（如 H2, H3 等）。
您將使用HTML來創建目錄的基礎架構。這通常包括一個有序或無序列表，以及相應的列表項目 <li>。
這是一個簡化的範例：
<article>
<h1>Title of the Article</h1>
<section id="intro">
<h2>Introduction</h2>
<!-- Content -->
</section>
<section id="first-chapter">
<h2>First Chapter</h2>
<!-- Content -->
</section>
<!-- More sections -->
</article>現在讓我們在 HTML 中為 ToC 添加一個 div 位置。 將此片段插入到所需位置，之後 ToC 就會自動將文章標題轉換成目錄，放在這個 div 當中。
<div id="table-of-contents">
<h2>Table of Contents</h2>
<ul id="toc-list">
<!-- JavaScript will populate this list -->
</ul>
</div>CSS：添加樣式
接著，使用CSS來定制目錄的外觀。您可以設置字體大小、顏色、邊距等，以便使 ToC 更加吸引人。
樣式在使視覺吸引力和互動性方面起著至關重要的作用。 首先，我們為整體佈局定義一些基本樣式：
#table-of-contents {
border: 1px solid #ccc;
padding: 15px;
margin-top: 20px;
}
#table-of-contents h2 {
font-size: 1.2em;
}可以增加一點互動效果，例如滑鼠移到選單上面時，顯示一些變化效果:
#toc-list li {
list-style: none;
margin: 5px 0;
}
#toc-list li:hover {
text-decoration: underline;
cursor: pointer;
}JavaScript：實現交互性
在這一部分，您將使用 JavaScript 來添加 ToC 的交互功能。這可能包括點擊目錄項目後自動跳轉到相應部分，或者隨著網頁滾動。
“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”
Martin Fowler
JavaScript 在創建動態 ToC 中的作用佔有非常的重要地位。它的工作是掃描 HTML 文檔中的標題（例如 <h1>、<h2> 等），然後動態產生目錄標題，並放在指定位置。以下是您將採用的基本邏輯：
- 掃描 HTML 中的標題，通常是 (
<h1>,<h2>, etc.). - 建立一個清單，內容是標題，並給每個標題一個獨立 id 當作標示。
- 將這個清單列表插入 HTML 中的指定區域，以顯示目錄。
下面這個 JavaScript 範例就是依據這個流程:
document.addEventListener('DOMContentLoaded', function() {
const tocList = document.getElementById('toc-list');
const headers = document.querySelectorAll('h1, h2, h3');
headers.forEach((header, index) => {
const id = `header-${index}`;
header.id = id;
const listItem = document.createElement('li');
listItem.innerHTML = `<a href="#${id}">${header.textContent}</a>`;
tocList.appendChild(listItem);
});
});完整展示
集成 HTML、CSS 和 JavaScript 部分，將使您的 ToC 功能強大且有吸引力。關鍵是將每種技術連貫地聯繫起來，以便它們協同工作，使您的目錄栩栩如生。
<!DOCTYPE html> <!-- 文檔類型宣告 -->
<html lang="en"> <!-- 設定頁面語言為英語 -->
<head>
<meta charset="UTF-8"> <!-- 字符編碼設定為UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 為響應式設計設定視口 -->
<title>Document</title> <!-- 網頁標題 -->
<style>
/* CSS 開始 */
#table-of-contents {
border: 1px solid #ccc; /* 目錄區塊的邊框設定 */
padding: 15px; /* 目錄區塊的內間距 */
margin-top: 20px; /* 目錄區塊距離上邊緣的外間距 */
}
#table-of-contents h2 {
font-size: 1.2em; /* 目錄標題的字型大小 */
}
#toc-list li {
list-style: none; /* 列表項目不顯示點號 */
}
#toc-list a {
text-decoration: none; /* 連結無下劃線 */
margin: 5px 0; /* 連結的外間距 */
}
#toc-list a:hover {
text-decoration: green wavy underline; /* 滑鼠懸停時的下劃線樣式 */
cursor: pointer; /* 滑鼠懸停時的指針形狀 */
font-weight: bold; /* 滑鼠懸停時的字型加粗 */
}
/* CSS 結束 */
</style>
</head>
<body>
<div id="table-of-contents"> <!-- 目錄區塊 -->
<h2>Table of Contents</h2> <!-- 目錄標題 -->
<ul id="toc-list">
<!-- JavaScript 將填充此列表 -->
</ul>
</div>
<article> <!-- 文章內容 -->
<h1>Title of the Article</h1> <!-- 文章標題 -->
<section id="intro"> <!-- 引言部分 -->
<h2>Introduction</h2>
<div style="height:800px"></div> <!-- 空白區塊用於模擬文章內容 -->
</section>
<section id="first-chapter"> <!-- 第一章節 -->
<h2>First Chapter</h2>
<div style="height:800px"></div> <!-- 空白區塊用於模擬章節內容 -->
</section>
<section id="second-chapter"> <!-- 第二章節 -->
<h2>Second Chapter</h2>
<div style="height:800px"></div> <!-- 空白區塊用於模擬章節內容 -->
</section>
<section id="last-chapter"> <!-- 最後章節 -->
<h2>Last Chapter</h2>
<div style="height:800px"></div> <!-- 空白區塊用於模擬章節內容 -->
</section>
<!-- 更多章節 -->
</article>
<script>
// JavaScript 開始
// 文檔內容完全載入後執行
document.addEventListener('DOMContentLoaded', function() {
const tocList = document.getElementById('toc-list'); // 取得目錄列表元素
const headers = document.querySelectorAll('h1, h2, h3'); // 取得所有標題元素
// 對每個標題進行遍歷
headers.forEach((header, index) => {
const id = `header-${index}`; // 為每個標題生成一個獨一無二的ID
header.id = id;
const listItem = document.createElement('li'); // 創建新的列表項目
listItem.innerHTML = `<a href="#${id}">${header.textContent}</a>`; // 生成包含標題文字的連結
tocList.appendChild(listItem); // 將新創建的列表項目加入到目錄列表中
});
});
// JavaScript 結束
</script>
</body>
</html>
最後
通過本文，我們不僅探討了為何 ToC 對於網站文章和數位文件如此重要，還深入了解了如何使用 HTML、CSS 和 JavaScript 來實現這一目標。從基礎概念到進階技巧，本文提供了全面而深入的指南，旨在幫助讀者在不同的應用場景中創建高效、響應式和用戶友好的文章目錄。
無論您是一名網站開發者，內容創作者，還是普通用戶，掌握這些技術和最佳實踐都將大大提升您創建和使用 ToC 的能力。希望本文能為您提供有價值的指導和靈感。
