Blogger 與 Markdown 設定 Html 雙向錨點的方法

錨點是一種文章內超連結的 html 語法，它可幫讀者快速跳到指定章節進行閱讀，特別適用在需要很多段落來論述的文章，因此對長文作者來說是相當實用的技巧。

本文糊塗流浪貓將示範如何在 Markdown 與 Blogger 文章內設定「錨點」、「雙向錨點」並讓「浮動導覽列不會遮住錨點位置」的方式。

 

 

本文目錄

1. Markdown 設定錨點
2. Blogger 設定錨點與雙向錨點
3. 讓浮動導覽列不會遮住錨點位置

Markdown 設定錨點

Markdown 的錨點語法其實和超連結一樣，如以下範例。(注意空格)

[我是第一章](####第一章)

#### 第一章
我是廢文

 

 

Blogger 設定錨點與雙向錨點

請參考以下 html 程式碼讓 Blogger 內文產生錨點與雙向錨點功能，不過如果你是用 Markdown 撰寫文章的使用者，其實輸出 html 的過程它就會自動幫你轉譯了。翠習

<h4 id="list">文章目錄</h4>
<ol>
  <li><a href="#s1">Markdown 設定錨點</a></li>
  <li><a href="#s2">Blogger 設定錨點與雙向錨點</a></li>
</ol>
<h4><span id="s1"></span><a href="#list">Markdown 設定錨點</a></h4>
<h4><span id="s2"></span><a href="#list">Blogger 設定錨點與雙向錨點</a></h4>

其實 a href 就是 html 的超連結語法，搭配上共同的 id 名稱即可產生內文超連結的效果。本文將目錄「Markdown 設定錨點」的 href 設為 #s1、把該章節的 span id 設為 s1 後，即可產生轉跳的效果。

 

而雙向錨點所產生的「回到文章目錄」效果，其實就是幫章節標題增加 href 指向文章目錄。雖然這個方法寫起來很麻煩，但對於不想安裝 JavaScript 外掛的人來說，應該算是不錯的替代方案。

 

 

讓浮動導覽列不會遮住錨點位置

由於本站採用的是響應式主題，在錨點轉跳回目錄後，文章列表會被畫面頂部的浮動導覽列擋住。要解決這個問題，只要在主題 > html 內的 head 新增以下 CSS 程式碼即可。

 

<style>
:target::before {
  content: "";
  display: block;
  height: 60px; 
  margin: -60px 0 0;
}
</style>

 

不過怪異的是，這個方法在行動版上的 Firefox 無效，即便參考了 stackoverflow 討論區所提供的程式碼也一樣。

 

結語

文章錨點的設定雖然很簡單，但雙向錨點卻有些麻煩，因為同時要幫標題設定錨點、為錨點設定標題的關係，後續維護應該會讓人抓狂吧。另外 id 名稱最好以英數為主，避免因為瀏覽器語系或編碼造成錨點失效。

 

延伸閱讀

Fixed page header overlaps in-page anchors

W3C 全球資訊網協會 HTML 與 CSS 教學

糊塗流浪貓的搜尋引擎 SEO 實驗室

更多 Blogger 戰技