為標題增加錨點

HackMD 用習慣了,和 Hexo 的 Markdown 還是有些不同,編輯整理資料時有錨點還是比較方便,查了一下 Markdown 的語法,發現只使用 Markdown 的狀況,還是可以增加錨點

觀察 id 生成規則

Markdown 不同版本都有些細節不同,先觀查 id 生成規則如下表:

HeaderIdentifier
Header identifiers in HTMLHeader-identifiers-in-HTML
Dogs?-in my house?Dogs-in-my-house
[HTML], [S5], or [RTF]?HTML-S5-or-RTF
3. Applications3-Applications
3333
大小寫會被保留,符號會被去除,空格補上連字號

使用 Markdown 建立錨點

原標題

## 新增錨點

加上錨點

## [新增錨點](#新增錨點)

需要按照 id 生成規將連結指向標題的 id 若命名不同錨點就會失效

如果錨點需要給定 “別名” 可參考此篇 Hexo 里的标题锚点链接 | mdluo ( 需要另外安裝套件 )

修改樣式

themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 自訂錨點樣式
h1 a:nth-child(2),
h2 a:nth-child(2),
h3 a:nth-child(2),
h4 a:nth-child(2),
h5 a:nth-child(2),
h6 a:nth-child(2) {
// 移除 a 預設下底線
border-bottom: none;
// 新增錨點 Pseudo-elements
&:hover {
&::after {
content: "#";
margin-left: 0.5em;
position: absolute;
color: #0e83cd;
}
}
}

滑鼠移到標題上便會出現錨點樣式 #

參考資料
Pandoc’s Markdown 語法中文翻譯 | tzengyuxio
Hexo 里的标题锚点链接 | mdluo

0%