CleanMyMac

Table of Contents 大解密，ToC 程式就是這麼簡單

Feature image for Table of Contents 大解密，ToC 程式就是這麼簡單

目錄

在資訊過載成為常態的時代，結構良好的文章目錄（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> 等），然後動態產生目錄標題，並放在指定位置。以下是您將採用的基本邏輯：

  1. 掃描 HTML 中的標題，通常是 (<h1>, <h2>, etc.)。
  2. 建立一個清單，內容是標題，並給每個標題一個獨立 id 當作標示。
  3. 將這個清單列表插入 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 的能力。希望本文能為您提供有價值的指導和靈感。