.st0{fill:#FFFFFF;}

如何使用 Thrive Theme Builder 在長篇文章中構建固定式目錄 (Sticky Table of Contents) 

 2021-12-17

By  Mason - 預計閱讀時間約  分鐘

為了方便讀者閱讀文章,通常作者都會在文章開始時放置一個文章目錄,以方便讀者預覽整篇文章的主要章節。

如果你的文章屬於長篇式文章,或者是內容含有教學式的步驟流程,建議應該有一個固定式目錄,以方便讀者隨時追蹤閱讀的進度。

本篇文章將介紹給你:如何使用 Thrive Theme Builder 在長篇文章中構建固定式目錄 (Sticky Table of Contents)。

若你還沒有安裝 Thrive Theme Builder,或想了解什麼是 Thrive Theme Builder 的話,可以參考此篇文章。

>>> 超好用的 WordPress 全方位外掛 – Thrive Suite 介紹 ! Thrive Architect 和 Thrive Theme Builder 有什麼不同?

若你已經完成 Thrive Theme Builder 安裝,則可以按照下面的步驟開始構建文章的固定式目錄 (Sticky Table of Contents)了。

步驟一:登入 Thrive Theme Builder

  • 在 WordPress 後台中,將滑鼠移至 Thrive Dashbord 標籤,點擊 Thrive Theme Builder 登入。
sticky table of contents - Thrive Theme Builder
  • 在左側中,點擊 Templates 標籤登入。
sticky table of contents -Thrive Theme Template
  • 在右側中,點擊 Add New 按鈕新增一個文章模板。
sticky table of contents - add new
  • 1. 為你的模板命名。
  • 2. 選擇 "Single"。
  • 3. 選擇 "文章"。
  • 4. 選擇 "Standard"。
  • 5. 點擊 "Choose Template" 按鈕。
sticky table of contents - 長篇文章模板

步驟二:挑選文章模板

於此步驟中,挑選一個自己喜歡的模板。

sticky table of contents5-choose a template
  • 將滑鼠移至剛剛挑選好的模板中,點擊 "Edit" 按鈕編輯此模板。
sticky table of contents-edit the template
  • 點擊右上方的下拉選單之後,下方會列出你所有文章列表,挑選你想要呈現固定式目錄的長篇文章,點擊後即可開始編輯。
sticky table of contents - 選擇文章

步驟三:開始編輯固定式目錄

  • 1. 點擊右上方""打開功能選單。
  • 2. 在上方的搜尋欄位輸入 " Table of Content"。
  • 3. 在下方處找到 " Table of Content" 按鈕選項,按住滑鼠左鍵不放將它拖曳到右側側邊欄的最上方處。
sticky table of contents - 加入目錄
  • 挑選一個你喜歡的目錄模板。
sticky table of contents - 挑選目錄樣板
  • 1. 設定 Headings (標題),建議勾選 H2 即可。
  • 2. List Type 選擇 "None"。
  • 3. 關閉目錄可以收和功能,讓目錄保持打開模式。
  • 4. 點擊 "SAVE WORK" 按鈕儲存設定。
  • 5. 接著,點擊 "Edit table of contents" 按鈕。
sticky table of contents - 目錄設定
  • 1. 接著將滑鼠往下滑至 "Scroll Behavior",點擊之。
  • 2. 在 Behavior on Scroll 選項中,點擊選取 " Sticky"。
  • 3. 在 "Visible on" 選項中,點擊選取最左邊圖標 (只適用於電腦)。
  • 4. 在 "Stick to screen" 選項中,點擊選取 " Top"。
  • 5. 在 "Sticky until" 選項中,選取 "End of parent container" 。
  • 6. 點擊 "SAVE WORK" 按鈕儲存。
sticky table of contents - 目錄設定2
  • 1. 點擊 Table of Contents (目錄)。
  • 2. 點擊右上方最右邊的刪除按鈕,刪除目錄抬頭。
  • 3. 點擊 "DONE" 按鈕儲存。
sticky table of contents 刪除目錄標題
  • 刪除側邊欄所有小工具,僅留上方之目錄。
sticky table of contents 刪除所有側邊攔小工具

步驟四:套用新模板到文章 (Post) 中

sticky table of contents - 套用模板
  • 1. 在編輯頁面左上方處,點擊 "文章"。
  • 2. 在 "文章 Template Settings" 中,找到剛剛構建好的模板,點擊 "Activate"。
  • 3. 最後點擊 "SAVE WORK" 按鈕儲存。
sticky table of contents - 套用模板2

大功告成! 你可以重新刷新網頁看看成果了。

希望此篇文章對你有所幫助,若你有任何問題或想法,歡迎在下方留言給我們!

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >