如何製作適合手機閱讀的文章目錄、內容大綱？

在「Table of Contents – 使用 Blocksy 與 Kadence Blocks 輕鬆建立文章目錄、內容大綱」一文中我們聊到了文章目錄、內容大綱的重要性，對於內容為主的網站來說能夠讓訪客有方便的導引工具，清楚的知道目前閱讀的是哪個章節，也能快速地跳到有興趣的章節進行閱讀。

對於使用電腦瀏覽網站的訪客來說，上述文章中提到的會是最佳的方式，在足夠寬敞的畫面中能夠有一個側邊欄區塊，當上下捲動畫面時可以吸附置頂，並且會聚焦顯示目前所在的章節位置。

然而，對手機的使用者來說，裝置畫面較為窄小，多數部落客的做法是將文章目錄、內容大綱放在文章第一段落之前，但對擅長撰寫長文章的站長 (例如我們) 來說，這會讓文章的長度更長，也會讓部分訪客在閱讀時更感不耐。

少數部落客會利用第三方外掛，讓文章目錄、內容大綱在讀者向下捲動時以圖示的方式吸附在畫面的側邊或左、右下角，點擊圖示之後才會顯示包含文章目錄的小視窗，而這一般也是提高讀者體驗的最佳方式。

這篇文章將與大家分享如何製作適合手機閱讀的文章目錄、內容大綱，只需要使用到少數工具就能製作出美觀、輕巧的文章目錄、內容大綱。

• 透過 Blocksy 佈景主題編輯器，利用 Blocksy Pro 的 Content Blocks 功能，將文章目錄、內容大綱嵌入指定位置。
• 使用免費版 Kadence Blocks 區塊編輯器外掛，利用其 Table of Contents 區塊，可以自訂文章目錄、內容大綱顯示的標題階層 (H1~H6)、呈現樣式。
• 使用 Code Snippet 外掛，加入顯示文章目錄的 SVG 圖示的 HTML 代碼。

我們的目標是做出在文章頁面，當上下捲動畫面時可以吸附在角落的圖示，點擊圖示會聚焦顯示目前所在位置的文章目錄、內容大綱！

Blocksy 佈景主題編輯器

在這篇文章中我們會使用 Blocksy Pro 付費版的 Content Blocks 功能，讓我們從安裝佈景主題與外掛開始！

安裝 Blocksy 佈景主題

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能，所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

如果想先使用免費版的人，可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

安裝範本 (非必要)

Blocksy 安裝完成之後，從後台進入 Blocksy 的控制面板，點選 Starter Sites 後挑一個喜歡的範本。

這邊以 Modern Shop 為例。

點擊「Import」開始安裝步驟。

Step 1 – 安裝 Child Theme

透過安裝 Child Theme，未來可以直接新增自訂 CSS 代碼，不會因為 Blocksy 升級新版本而受到影響。

Step 2 – 選擇頁面編輯器

這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)

Step 3 – 安裝必要的外掛

Modern Shop 範本中還有使用到 Contact Form 7 的功能。

Step 4 – 匯入範本內容

實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form，是可以將 Contact Form 7 外掛移除的。

Kadence Blocks 區塊編輯器

安裝 Kadence Blocks 免費版

接著到 WordPress 後台外掛 > 安裝外掛搜尋 Kadence Blocks。

並點擊「立即安裝」。

Blocksy Pro – Content Blocks

從 WordPress 的後台找到 Blocksy 的功能選單，可以看到 3 個選項：

• Dashboard
• Content Blocks
• Account

Content Blocks (內容區塊) 就是我們將要使用到的功能，點擊 Content Blocks 進入內容區塊管理頁面。

新增 Content Blocks

點擊 Add New 按鈕新增 Content Blocks。

選擇使用 Popup 類型的內容區塊。

Kadence Blocks – Table of Contents

在剛剛建立的 Content Blocks 編輯頁面中選取新增區塊，從 Kadence Blocks 的選項中找到 Table of Contents 區塊。(也可以用搜尋功能)

插入 Table of Contents 區塊之後，編輯頁面顯示如下：

接下來就要到右邊的功能設定開始調整 Table of Contents 區塊的外觀、功能，以及顯示的位置。

General 一般設定

先從一般設定開始，H1 到 H6 的選項是讓我們決定一篇文章中的哪些標題階層需要在文章目錄、內容大綱中顯示。

一般 H1 大標題在文章中就是文章的主題，只會有一個，所以一般是不需要在文章目錄、內容大綱中顯示的。

H2 ~ H6 等標題階層可以自由決定是否顯示，因為我們要製作的是適合手機瀏覽的文章目錄，可以只選擇 H2 或 H2 + H3。

下半部是決定文章目錄、內容大綱是否可以摺疊收合，以及摺疊收合的行為機制。

• Enable Collapsible Content
  顧名思義，就是決定是否要啟用摺疊收合的功能。
• Start Collapsed
  若啟用功能，是否最初的呈現就是摺疊收合的。
• Icon Style
  收合與開啟文章目錄、內容大綱的圖示。
• Enable title to toggle as well as icon
  決定是否點選區塊標題也能收合、開啟文章目錄、內容大綱。

Style – Title 標題格式

樣式設定中的標題設定可以決定「Table of Contents」、「文章目錄」、「內容大綱」這幾個常用的區塊標題的呈現樣式。

Style – List 清單列表格式

樣式設定中的清單列表設定可以決定動態抓出的文章標題階層的呈現樣式。

包含每個標題階層彼此之間的間距、標題階層退縮的距離等。

Style – Container 容器格式

樣式設定中的容器設定則可以決定整個 Table of Contents 區塊背景色彩、是否要有圓角、陰影。

Advanced 進階設定

在進階設定中可以決定 Table of Contents 區塊在嵌入位置中與其他物件之間的距離。

此外，在 Scroll Settings 捲動設定中更提供了當讀者在文章中上下捲動畫面時與文章目錄、內容大綱間的互動關係。

• Enable Smooth Scroll to ID
  當點選文章目錄、內容大綱中的標題階層時，是否要滑順的捲動到文章的相對標題位置。
• Enable Highlighting Heading when scrolling in active area
  當讀者在文章中上下捲動畫面時，文章目錄、內容大綱中相對應的標題階層會顯示聚焦/強調顏色。

文章目錄顯示位置

在 Content Blocks 編輯頁面右上角的 Blocksy 頁面設定中可以找到設定顯示條件、位置的功能。

顯示條件

點擊顯示條件按鈕，可以看到 Blocksy 提供了進階的顯示條件功能；可以按設定的條件決定這個內容區塊顯示的時機與頁面類型。

當然，文章目錄、內容大綱我們一般都是與「單一文章」一起出現就可以了。

視窗跳出方式 Popup Animation

對 Popup 類型的 Content Blocks 來說，就是決定文章目錄小視窗跳出的方式了。

• Fade in fade out
  小視窗會以淡入、淡出的方式出現。
• Zoom in zoom out
  小視窗會以放大、縮小的方式出現。
• Slide in from left
  小視窗會從畫面左側滑入。
• Slide in from right
  小視窗會從畫面右側滑入。
• Slide in from top
  小視窗會從畫面上方滑入。
• Slide in from bottom
  小視窗會從畫面下方滑入。

顯示位置 Popup Position

決定 Popup 視窗進入畫面的位置，對手機瀏覽來說，選擇下面或側邊會比較合適，較不會遮擋到文章的上半部。

可見度

可見度的部分就選擇手機裝置即可，這樣一來在其他裝置瀏覽時也不會額外載入相關資源，不會影響到其他裝置瀏覽時的頁面載入效能。

設定完成之後回到 Blocksy > Content Blocks 的管理頁面就能看到剛剛儲存好的 Popup 內容區塊了。

將 Output 中的區塊代號記下來，後面會用到。

文章目錄圖示

透過前面章節的說明，我們已經將文章目錄的主體準備好了，接下來就是將文章目錄的小圖示放到螢幕畫面角落，並將點擊文章目錄圖示連結至剛剛製作的 Popup 內容區塊。

SVG 圖示

要找到適合自己網站的文章目錄圖示，建議可以直接 Google 搜尋關鍵字「文章目錄 + SVG」就能找到不少提供 SVG 圖示的網站服務，其中多數都需要建立帳號、登入才能使用相關功能，下載 SVG。

建議大家可以到 SVG Repo 看看，網站上提供了相當豐富的 SVG 資源，找到想要的圖示之後，可以自訂色彩、尺寸、圖示、轉置，不需要建立、登入帳號，相當方便。

調整完成之後，按下 COPY SVG 即可將這個 SVG 的代碼儲存起來。

先將代碼貼到電腦的文件編輯器中 (如下)。

<svg
    fill="#000000"
    viewBox="-3.2 -3.2 38.40 38.40"
    id="icon"
    xmlns="http://www.w3.org/2000/svg"
    transform="rotate(180)"
    stroke="#000000"
    stroke-width="0.00032"
>
    <g id="SVGRepo_bgCarrier" stroke-width="0">
        <rect
            x="-3.2"
            y="-3.2"
            width="38.40"
            height="38.40"
            rx="19.2"
            fill="#7ed0ec"
            strokewidth="0"
        ></rect>
    </g>
    <g
        id="SVGRepo_tracerCarrier"
        stroke-linecap="round"
        stroke-linejoin="round"
    ></g>
    <g id="SVGRepo_iconCarrier">
        <defs>
            <style>
                .cls-1{fill:none;}
            </style>
        </defs>
        <title>table-of-contents</title>
        <rect x="4" y="6" width="18" height="2"></rect>
        <rect x="4" y="12" width="18" height="2"></rect>
        <rect x="4" y="18" width="18" height="2"></rect>
        <rect x="4" y="24" width="18" height="2"></rect>
        <rect x="26" y="6" width="2" height="2"></rect>
        <rect x="26" y="12" width="2" height="2"></rect>
        <rect x="26" y="18" width="2" height="2"></rect>
        <rect x="26" y="24" width="2" height="2"></rect>
        <rect
            id="_Transparent_Rectangle_"
            data-name="<Transparent Rectangle>"
            class="cls-1"
            width="32"
            height="32"
        ></rect>
    </g>
</svg>

感謝 Anbobo 的測試回饋，如果直接複製貼上到 WordPress 的編輯頁面，會帶有一些 SVG Repo 的宣傳連結，也會讓產出結果不如預期的美觀，因此建議大家一定要先把代碼貼到電腦的文件編輯器，之後在設定功能的時候再轉貼到 WordPress 的 Code Snippet 或 Content Blocks 中。

Anbobo 管理的網站學習星系是有美感、有內容、具設計風格的網站，大家可以去逛逛唷！

Code Snippet

有了漂亮好看的文章目錄圖示之後，接下來就能透過一點點 HTML 代碼插入按鈕囉！

將程式碼片段嵌入網站的方式都是相同的，可以將以下程式碼片段加到子佈景主題中，或是利用 Code Snippet 外掛，例如 (我們使用的) WPCodeBox 外掛，加入程式碼並啟用。

<style>
    .btn-TOC-off-canvas {
    position: fixed;
    bottom: 25px;
    left: 20px;
    width: 40px;
    height: 40px;
    z-index:99;
    }
</style>
<a href="#ct-popup-8943" class="btn-TOC-off-canvas" target="_blank">
將取得的 SVG 代碼放到這來！
</a>

<Style> 標籤中定義了按鈕的名稱與呈現樣式，可以自行修改設定，改變按鈕距離左邊、底部或右邊的距離，以及圖示的尺寸調整，都是簡單的 CSS 語法。

在 <a> 標籤中，要確保 class 名稱與前面 style 中的名稱一致；連結的部分則是指定為之前記下來的 Popup Content Block 的區塊代號 #ct-popup-xxxx。

這樣一來，當訪客使用手機瀏覽文章時，點下角落的圖示按鈕，就會開啟文章目錄的 Popup 視窗。

---

建議可以使用具備進階功能的 Code Snippet 程式碼片段外掛，這樣才能自訂這個程式碼片段的執行頁面與條件。

以我們的文章目錄圖示按鈕為例，我們只需要在以下條件出現而已：

• 單一文章頁面
• 手機裝置

對網站上的其他頁面就不會造成載入效能的負面影響了。

使用 Content Blocks (替代方案)

另一種完全不需要 Code Snippet 程式碼片段外掛的方式就是利用 Blocksy Pro Hook 類型的 Content Blocks。

在剛剛建立的 Hook 類型 Content Blocks 編輯頁面中選取新增區塊，從小工具類別中找到「自訂 HTML」區塊。插入區塊之後，將上面的 HTML 代碼加入即可。

編輯頁面顯示如下：

接著仿照上述的 Table of Contents Popup 類型內容區塊的顯示條件與可見度的設定方式：

• 顯示條件：讓此內容區塊只在單一文章中顯示
• 可見度：選擇只有手機裝置可以見到這個內容區塊

重點就是上述 Popup 類型與這個 Hook 類型的條件一致就可以了。

最後，因為是 Hook 類型的內容區塊，需要決定插入的 Hook 勾點位置。可以隨意插入頁面中，只要文章頁面載入的時候有把這段 HTML 代碼加入即可；為了確保只有「單一文章」頁面會載入此 HTML 代碼，可以從「單一文章」的類別下找到適合的勾點即可。

結語

這樣就完成了在文章頁面，當上下捲動畫面時可以吸附在角落的圖示，點擊圖示會聚焦顯示目前所在位置的文章目錄、內容大綱了！是不是很簡單呢！

綜合以上的說明，我們知道了：

• 如何使用 Blocksy 佈景主題編輯器，利用 Blocksy Pro 的 Content Blocks 功能，將文章目錄、內容大綱與 SVG 圖示按鈕連結。
• 如何使用免費版 Kadence Blocks 區塊編輯器外掛，利用其 Table of Contents 區塊，自訂文章目錄、內容大綱顯示的標題階層與樣式。
• 如何使用 Code Snippet 外掛，加入顯示文章目錄的 SVG 圖示的 HTML 代碼。

希望這些對大家在建立適合手機閱讀的文章目錄、內容大綱時能幫得上忙。

如果有什麼心得、想法或建議，也歡迎大家加入社團一起討論唷！

參考文章 – 「Table of Contents – 使用 Blocksy 與 Kadence Blocks 輕鬆建立文章目錄、內容大綱」