Blogger 文章自動產生目錄大綱區塊

今年的 Blogger 架站案例中，好幾個都要求在文章中製作一個區塊，裡面擺放多個錨點超連結，點擊後可跳到文章中對應的大標題。

雖然每個案例的客製執行效果都不同，有的將這個區塊放在側邊欄浮動，有的希望每個錨點分別出現在自訂位置，有的希望所有錨點集中在文章開頭，不過目的都是相同的，把文章目錄大綱明顯的標示出來，讓讀者很輕鬆就能點擊前往對應的區塊，這是很友善的閱讀體驗設計。

點此看範例網頁

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

(圖片出處: pexels.com)

一、Blogger 錨點問題

1. 錨點語法

其實做這件事並不困難，只要瞭解基本的 HTML 就可完成。例如：

• 手動在文章建立幾個 A 標籤的錨點語法
• 將錨點指向各個大標題，例如 H2、H3 標籤
• 為這些 H2、H3 標籤設定獨一無二的 ID 參數

舉例來說，使用下面的範例 HTML 碼：

<a href="#anchor1">點擊後跳到 anchor1</a>
<h2 id="anchor1">這裡是標題</h2>
點擊超連結後，畫面就會捲到 H2 標籤的位置。


2. 錨點問題

然而 Blogger 文章中使用錨點語法，長期以來有很嚴重的問題，可參考「超連結 A 標籤及錨點, 你不知道的操作技巧」→「二、Blogger 難搞的錨點」，只要 Blogger 文章編輯器有切換過模式，這些錨點語法就會失效了。

解決方法文章有說明，但是很麻煩，或許比較簡單的方法，還是使用本篇的程式碼。

二、範例效果

點此看範例網頁

本篇提供的範例效果可參考範例網頁，這個工具的執行原理大致是這樣：

• Blogger 文章編輯器在「撰寫」模式下，可設定「標題」、「子標題」、「小標題」
• 設定完後，會分別對應到 HTML 碼中的 H2、H3、H4 標籤
• 此工具會自動抓這些 H2 ~ H4 標籤的文字，出現在「大綱索引區塊」
• 在「大綱索引區塊」會自動產生錨點，點擊後自動跳到對應的 H2~H4 標籤位置
• 「大綱索引區塊」可自行設定要出現在文章中的指定位置

三、安裝程式碼

1. 準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
.post-body .headline {
margin: 30px 0;
padding: .5em;
background: #C1D6C5;
font-size: 1.3rem;
}
.headline a {
color: #4E5750;
}
.headline a:hover {
color: initial;
text-decoration: none;
}
</style>


第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數。


2. 安裝程式碼

接著在範本中搜尋以下程式碼，應該只有一個搜尋結果：

<b:include data='post' name='post'/>

找到後在其下一行插入以下程式碼：

儲存後還沒結束，請繼續設定文章中要出現「大綱目錄區塊」的地方。

四、設定「大綱目錄區塊」的位置

請按以下步驟進行：

• 進入 Blogger 後台，隨意挑選一篇文章來編輯
• 切換到 HTML 模式
• 在文章中想出現「大綱索引區塊」的位置，插入以下 HTML 碼
• <div class="headline"></div>

儲存後即可看到效果。

當然別忘了在文章內設定「標題」、「子標題」、「小標題」，否則是不會有效果的。

五、浮動導覽列問題

有些網站會使用「浮動導覽列」功能，由於導覽列長期佔用網頁上方固定高度，導致網頁上的任何錨點位置，都會被「浮動導覽列」遮住。

那麼使用本篇工具時，也會遇到這樣的問題，解決辦法請參考這篇「解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧」，另外設定相關的 CSS 即可。

六、聯絡表單

加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

本文標題或網址：(必填)

會員編號：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

更多 Blogger 小工具：