今年的 Blogger 架站案例中，好幾個都要求在文章中製作一個區塊，裡面擺放多個錨點超連結，點擊後可跳到文章中對應的大標題。雖然每個案例的客製執行效果都不同，有的將這個區塊放在側邊欄浮動，有的希望每個錨點分別出現在自訂位置，有的希望所有錨點集中在文章開頭，不過目的都是相同的，把文章大綱明顯的標示出來，讓讀者很輕鬆就能點擊前往對應的區塊，這是很友善的閱讀體驗設計。
本篇會提供其中一種作法的範例程式碼，熟悉 JS 的話可自行修改，而如果需要更便利的客製功能請再發案給本站。
(圖片出處: 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 搜尋
<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 小工具：