2019年7月10日

Blogger 文章自動產生大綱索引錨點區塊

Blogger 文章自動產生大綱索引錨點區塊

Wayne Fu 0 A+
blogger-post-headline-anchor-area.jpg-Blogger 文章自動產生大綱索引錨點區塊今年的 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-post-headline-anchor-area-1.png-Blogger 文章自動產生大綱索引錨點區塊




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

blogger-post-headline-anchor-area-2.jpg-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 小工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 我用的blogger新版官方主题:Emporio,当中没有找到有这个标签,找到了这种标签,我把后面那段代码粘贴到这标签后面,结果是显示不出来文章目录。请问博主,blogger官方自带的模板应该放在什么地方?

    回覆刪除
    回覆
    1. 我也許在其他地方的留言回覆有提醒過了,官方 RWD 範本不建議做任何修改喔(下面留言注意事項也有註明):https://www.wfublog.com/2017/03/blogger-rwd-official-template.html

      要改範本的話,建議使用官方 "非" RWD 範本

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP