Blogger 使用錨點的操作方式(新版文章編輯器)

如果不熟悉 HTML 語法的話，要製作出錨點效果不太容易。Blogger 新版文章編輯器增加了不少功能，其中「錨點」算是非常實用的一個，就算不懂語法也能實現這個效果。

本篇會說明錨點的原理，以及如何在新版文章編輯器做出錨點。

(圖片出處: hippopx.com)

一、錨點的原理

1. 錨點效果

如果不知道什麼是錨點效果，可以看本站的每篇文章，開頭往下捲一點會看到一個獨立區塊「本文索引」，包含了該篇文章的大綱標題，點擊標題字串後就會跳到對應的文章區塊，這就是錨點效果：

• 「本文索引」的每個大綱都是超連結，但不是對外的超連結，而是該頁面的「錨點連結」
• 而文章裡的每個大綱標題都是對應的「錨點定位點」，也就是點擊錨點連結後，螢幕會捲動到達的位置。
• 分別做出一個「錨點連結」、一個「錨點定位點」，就能實現錨點功能

如果想知道錨點的 HTML 語法，請見以下說明。


2. 「錨點連結」語法

在想要放置「錨點連結」的地方，輸入以下語法：

<a href="#anchor1">這裡是錨點連結</a>

• 紅字 "#anchor1" 是為錨點設定的 ID 字串，每個錨點都需要使用獨一無二的字串，必須以井字號 "#" 開頭
• 錨點 ID 字串有其規則限制，這裡不詳述，建議使用 "英數字串" 比較保險
• 藍字可改為自訂文字

3. 「錨點定位點」語法

在想要放置「錨點定位點」的地方，輸入以下語法：

<a id="anchor1">這裡是錨點定位點</a>

• 紅字請輸入前面設定的錨點 ID 字串，但去除井字號 "#" 即可
• 藍字可改為自訂文字

二、Blogger 新版文章編輯器操作

如果熟悉 HTML 語法，可在「HTML」模式下直接輸入語法即可。如果不懂語法也沒關係，Blogger 新版文章編輯器新增了「錨點」功能可設定，以下流程供不熟悉 HTML 語法的站長參考：




上圖兩處紅框的位置，分別描述了「錨點定位點」、「錨點按鈕」的定義，點擊了下方的「錨點按鈕」，畫面就會捲到上方「錨點定位點」。

我們一一說明如何操作，首先用滑鼠選取文字「這裡是前往錨點的按鈕」，然後點擊錨點圖示 → 「建立/編輯網址」

• 可自訂要顯示的文字
• 點選「連結至網址」
• 設定「連結的網址」，如上圖輸入 "#anchor1"，這是為錨點設定的 ID 字串，每個錨點都需要使用獨一無二的字串，必須以井字號 "#" 開頭
• 錨點 ID 字串有其規則限制，這裡不詳述，建議使用 "英數字串" 比較保險
• 最後按「確定」

接著用滑鼠選取文字「這裡是錨點位置」，然後點擊錨點圖示 → 「建立/編輯錨點」，會出現上圖畫面：

• 編輯顯示的文字
• 名稱請輸入前面設定的錨點 ID 字串，但去除井字號 "#" 即可
• 最後按「確定」

三、錨點的應用

文章裡使用錨點有很多不錯的應用，除了前面提到的「大綱索引」區塊，效果可參考「Blogger 文章自動產生大綱索引錨點區塊」。

另外就像實體書籍的「註解」功能，有些詞彙需要特別解釋、但又不想影響文章閱讀的流暢度時，使用註腳錨點就非常實用了，這部分的效果可參考「專業又有質感的網頁文章註解外掛 BigFoot」。

更多 Blogger 使用技巧：