Blogger 與 Markdown 設定 Html 雙向錨點的方法
錨點是一種文章內超連結的 html 語法，它可幫讀者快速跳到指定章節進行閱讀，特別適用在需要很多段落來論述的文章，因此對長文作者來說是相當實用的技巧。
本文糊塗流浪貓將示範如何在 Markdown 與 Blogger 文章內設定「錨點」、「雙向錨點」並讓「浮動導覽列不會遮住錨點位置」的方式。
本文目錄
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 名稱最好以英數為主，避免因為瀏覽器語系或編碼造成錨點失效。
留言