Table of Contents (ToC) 插件
💻

Table of Contents (ToC) 插件

Tags
Web
2021
Published
Published November 1, 2021

前言

Table of Contents (ToC) 中文意思為目錄,目錄是書本正式內容開始前的一份清單,上面會標出書本章節標題以及各個章節起始段所對應的頁碼。而早期中國古代的目錄是放在整本書的最後一頁,因大多數的著作分成很多冊,通常都是全書完成之後,才編定目錄;後來,印刷術發達後,為了方便檢索,才把目錄移到書本最前方。
說完 ToC 的歷史之後,言歸正傳,書本有 ToC,網頁也可以有 ToC,其實我們可以把很長的網頁也把它想像成一本書,當今天網頁內容非常的多,如果能夠搭配 ToC 的運用,這樣也能方便使用者在瀏覽你的網站時,透過快速檢索的方式加快他找到想要的內容。

配置方式

  1. 今天要使用到的插件在 這裡,這是我之前在寫 Project 的時候找到的,這個插件能自動適應 Bootstrap 格式,且允許你根據標題元素(<h1><h2>等)為任何頁面自動生成目錄
  1. 今天主要會以 Bootstrap v4.x 以上作示範,較舊的 Bootstrap 版本範例請 點此
  1. <head></head> 之間加入 Required meta tags & Bootstrap CSS
    1. <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css>" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  1. <body></body> 之間加入 jQuery & Bootstrap Bundle
    1. <script src="<https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js>" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="<https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js>" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
  1. bootstrap.min.css 後加入 ToC CSS
    1. <link rel="stylesheet" href="<https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css>" />
  1. bootstrap.min.js 後加入 ToC Javascript
    1. <script src="<https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js>"></script>
  1. 設定完以上步驟後,接下來就要在你的網頁中加入 ToC 的插件啦,這裡作者提供了兩種方法,一種是透過網頁中的 data attributes,另一種則是透過網頁中的 Javascript 來實現,我自己是使用後者,因為我在使用前者時有時會發生 ToC 無法響應的問題
      • 透過 data attributes
        • 建立一個帶有 id="toc"data-toggle="toc" 屬性的 <nav> 元素,你可以把它放在你喜歡的頁面上的任何地方
          • <nav id="toc" data-toggle="toc"></nav>
        • 接下來,由於這個插件利用了 Bootstrap 的 Scrollspy 插件,因此你還需要在 body</body> 之間添加幾個屬性
          • <body data-spy="scroll" data-target="#toc"></body>
      • 透過 Javascript
        • 建立一個帶有 id="toc" 屬性的 <nav> 元素,你可以把它放在你喜歡的頁面上的任何地方
          • <nav id="toc"></nav>
        • 接下來在 </body> 之前添加以下 script
          • <script> $(function() { var navSelector = "#toc"; var $myNav = $(navSelector); Toc.init($myNav); $("body").scrollspy({ target: navSelector }); }); </script>
  1. 這樣就完成啦!
    1. notion image

其他設定

  1. 讓 ToC 固定在某個位置。可以在 <nav></nav> 之間加入 class="sticky-top" 屬性
    1. <body data-spy="scroll" data-target="#toc"> <div class="container"> <div class="row"> <!-- sidebar, which will move to the top on a small screen --> <div class="col-sm-3"> <nav id="toc" data-toggle="toc" class="sticky-top"></nav> # add here </div> <!-- main content area --> <div class="col-sm-9">...</div> </div> </div> </body>
  1. 設定 ToC 離頁面頂端保持一個固定的距離(以 42px 為例)。可以在 <style></style> 之間加入以下設定
    1. notion image
      nav[data-toggle="toc"] { # ToC selector top: 42px; }
  1. 小型顯示器自動隱藏 ToC 並將主要內容區塊延伸至原 ToC 的位置,使主要內容置中。可以在 <style></style> 之間加入以下設定
    1. notion image
      @media (max-width: 992px) { /* override stickyness so that the navigation does not follow scrolling */ nav[data-toggle="toc"] { # ToC selector position: static; # ToC 固定位置 display: none; # ToC 隱藏 } .col-sm-9 { # 主要內容 class selector width: 100%; } }

插件優點

最後補充一下插件的優點:
  • 若你的網站只有一個 <h1> 級別標題、一個 <h2> 級別標題,但有多個 <h3> 級別標題。<h3> 級別會成為 ToC 中最高級導航項,<h3> 下的次級標題 <h4> 將成為次級導航,這樣可以確保 ToC 所列出來的標題都是有用的
  • 若不想要使用上一點所描述的插件預設標題級別模式,可以透過 Javascript 建立 ToC,能夠自定義想要顯示的 ToC 標題級別有哪些,詳細可參考 作者提供的方法