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

在書籍的最開頭一般都會有文章目錄、內容大綱，目的是協助讀者能快速地了解這本書的架構與內容章節，除了讓讀者在初次閱讀時能方便掌握作者的思路之外，讀者後續再次閱讀也能挑選喜歡的章節快速進入內容。

部落格、內容網站也是如此，善加利用文章目錄、內容大綱可以讓訪客有方便的導引工具，清楚的知道目前閱讀的是哪個章節，也能快速地跳到有興趣的章節進行閱讀。

這篇文章與大家分享我們設定文章目錄、內容大綱的方式，只需要使用到少數工具就能製作出美觀、輕巧的文章目錄、內容大綱。

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

我們的最終目標是做出在文章頁面側邊欄顯示，當上下捲動畫面時可以吸附置頂，並且會聚焦顯示目前所在位置的文章目錄、內容大綱！

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。

並點擊「立即安裝」。

Table of Contents 文章目錄、內容大綱

Blocksy Pro – Content Blocks

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

• Dashboard
• Content Blocks
• Account

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

新增 Content Blocks

點擊 Add New 按鈕新增 Content Blocks。

Kadence Blocks – Table of Contents

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

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

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

General 一般設定

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

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

H2 ~ H6 等標題階層可以自由決定是否顯示。

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

• 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 提供了進階的顯示條件功能；可以按設定的條件決定這個內容區塊顯示的時機與頁面類型。

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

顯示位置 (Hook/勾點)

而 Location & Priority 則可以決定此內容區塊要嵌入在文章頁面中的哪個部分。

透過 Blocksy 顯示勾點 (Show Hooks) 功能可以清楚的知道頁面中的每一個部分的勾點名稱。

例如，如果要嵌入在側邊欄的最上方，就要選擇 Sidebar Start 勾點；如果想要嵌入在文章內容的最上面，就要選擇單一文章的 Top Content 勾點。

側邊欄捲動時置頂

最後，我們透過決定側邊欄的行為來讓文章目錄、內容大綱能夠在上下捲動畫面時置頂不動。

從「外觀」>「自訂」進入佈景主題的編輯模式。

在佈景主題的自訂編輯模式中點選「一般選項」>「資訊欄」。

在資訊欄設定選項中最下方啟用「吸附資訊欄」，接著就能決定資訊欄吸附置頂的行為。包含：

• 吸附上方偏移
  吸附置頂時距離螢幕畫面上方的距離有多遠。
• 黏附行為
  整個資訊欄吸附置頂，或是從資訊欄中最後第 X 個小工具的位置算起。

適合不同尺寸的螢幕

最後，再加上一點點調整就可以讓這個側邊欄的文章目錄、內容大綱更加完美了。

對於習慣撰寫長文章的站長來說，文章的章節目錄可能也會較長，這時候如果遇到使用筆電、螢幕解析度較低，或是將字體放大 (如長輩) 的讀者，文章目錄可能就會因為長度太長超過畫面而無法閱讀了。

為了解決這個問題可以把下面這段 CSS 代碼加上：

• overflow-y: auto
  當螢幕高度不夠時，會出現捲動視窗的功能；當螢幕高度足夠時，捲動視窗功能會隱藏起來。
• max-height: 70vh
  限制區塊最高的高度為螢幕可視範圍的 70%。(可調整為適合的百分比)

.kb-table-of-content-wrap {
    overflow-y: auto;
    max-height: 70vh;
}

如此一來，不僅是對大螢幕或小螢幕的讀者來說都可以正常的使用文章目錄、內容大綱的功能了！

感謝 Anbobo 的建議回饋，不然我也沒發現小螢幕的訪客無法完全顯示長文章的章節目錄。

結語

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

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

• 如何使用 Blocksy 佈景主題編輯器，利用 Blocksy Pro 的 Content Blocks 功能，將文章目錄、內容大綱嵌入至文章的側邊欄，並且將側邊欄吸附置頂。
• 如何使用免費版 Kadence Blocks 區塊編輯器外掛，利用其 Table of Contents 區塊，自訂文章目錄、內容大綱顯示的標題階層與樣式。

希望這些對大家在建立文章目錄、內容大綱時能幫得上忙。

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

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