雪兒Miss.Cher❤️

痞客邦（PIXNET）錨點連結的使用方法。這是一個非常實用的功能，可以讓長篇文章更容易閱讀，並改善使用者體驗。

簡單來說，錨點連結就是「頁內跳轉連結」。點擊一個連結後，頁面會自動滑動到同一篇文章的特定位置。

其使用分為兩個步驟：1. 建立錨點 和 2. 建立連結。

 

---

 

方法一：使用新版編輯器（推薦）

痞客邦的新版編輯器讓設置錨點變得非常簡單，無需手動輸入HTML碼。

步驟 1：建立錨點（設定目的地）

1. 在您想要讓讀者跳轉到的目標位置（例如某個小標題前），將游標點擊在該處。
2. 點擊編輯器工具列上的「錨點」圖示（它看起來像是一個鎖鏈的圖示，通常位於插入連結的按鈕旁邊）。
3. 系統會彈出一個小視窗，請您為這個錨點取一個名稱（例如 section1）。名稱建議使用英文或數字，不要使用特殊符號和空格。
4. 點擊「確定」後，您會發現該位置出現一個小小的錨點標記（通常是一個旗子或鎖鏈的圖示）。這就表示錨點已經設置成功了。

（圖片僅為示意，實際圖示可能略有不同）

步驟 2：建立連結（設定出發點）

1. 回到您想要讓讀者點擊的地方（通常是文章開頭的目錄列表）。
2. 反白選取要作為連結的文字（例如：「第一章、產品開箱」）。
3. 點擊工具列上的「插入/編輯連結」圖示（通常是個鎖鏈圖示）。
4. 在連結網址的欄位中，輸入您剛剛設定的錨點名稱，但請記得在前面加上一個 # 符號。
   • 例如：如果您剛剛設定的錨點名稱是 section1，那麼就在連結網址欄輸入 #section1。
5. 點擊「確定」或「套用」。這樣就完成了！

現在，當讀者在文章頂端點擊「第一章、產品開箱」這個連結時，頁面就會自動平滑滾動到您設置了 section1 錨點的位置。

 

方法二：手動輸入HTML代碼（進階）

如果您習慣使用HTML原始碼模式，或者舊版編輯器沒有提供便捷按鈕，您也可以手動操作。

步驟 1：建立錨點（使用 `` 標籤）

在您想要跳轉到的目標位置的HTML碼中，插入一個 `` 標籤並給予它一個 id。

語法：

html

<h2 id="這裡填寫錨點名稱">這是第二章的標題</h2>

範例：
你想在「產品規格」這個小標題設置錨點，可以這樣寫：

html

<h3 id="specs">產品規格詳細介紹</h3>

這裡的 id="specs" 就是你的錨點。

步驟 2：建立連結（使用 `` 標籤）

在目錄或想要放置連結的地方，建立一個超連結，並在網址最後加上 #錨點名稱。

語法：

html

<a href="#這裡填寫錨點名稱">連結文字</a>

範例：
在目錄中，你想創建一個連到「產品規格」的連結：

html

<a href="#specs">點我查看產品規格</a>

 

 

---

 

實際應用範例

假設您的文章結構如下：

文章開頭的目錄（連結區）：

html

<p>

    <a href="#open-box">產品開箱</a> | 

    <a href="#specs">產品規格</a> | 

    <a href="#conclusion">心得總結</a>

</p>

文章內文（錨點區）：

html

<h2 id="open-box">產品開箱</h2>

<p>這裡是開箱的內容...</p>

 

<h2 id="specs">產品規格</h2>

<p>這裡是規格的內容...</p>

 

<h2 id="conclusion">心得總結</h2>

<p>這裡是總結的內容...</p>

這樣就完成了一個完整的文章內目錄導覽功能！

 

 

---

 

重要提醒與技巧

1. 錨點名稱唯一性：同一篇文章中，每個錨點的 id 名稱必須是唯一的，不能重複。
2. 測試：發布文章前，務必點擊各個連結測試一下，確認都能正確跳轉到對應的位置。
3. 跳轉到別頁的錨點：您甚至可以連結到另一篇文章的特定錨點。格式為：
   文章網址#錨點名稱
   例如：https://yourblog.pixnet.net/blog/post/123456789#specs
4. 網頁網址變化：當讀者點擊錨點連結後，您會發現瀏覽器的網址列末尾也會加上 #錨點名稱。這代表讀者可以直接將這個錨點網址分享給朋友，對方一點開就會直接跳到指定段落。

 

 

 

希望這個詳細的解釋能幫助您順利地在痞客邦文章中使用錨點功能！