因為是筆記部落格，所以我也想嘗試像 HackMD 一樣，有個右側選單做快速連接。
以下內容就是本人自己想出來的，可能不是最佳解。
一樣是修改post.html為主，因為不是貼文的文章我不想要有書籤功能。
增加以下程式碼在最外層。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="post-tags">
<a href="#"><p>{{ '{{ page.title ' }}}}</p></a>
<ul>
{{ '{% for bookmark in page.bookmarks %' }}}
<li class="post-tag-title">
{{ '{% for item in bookmark limit:1 %' }}}
{{ '{% assign ritem = item | downcase | replace : " ", "-" | replace : "#", "" | replace : ".", "" %' }}}
<a href="#{{ '{{ ritem|slugize ' }}}}"><p>{{ '{{ item ' }}}}</p></a>
{{ '{% endfor %' }}}
<ul>
{{ '{% for item in bookmark offset:1 %' }}}
<li class="post-tag-subtitle">
{{ '{% assign ritem = item | downcase | replace : " ", "-" | replace : "#", "" | replace : ".", "" %' }}}
<a href="#{{ '{{ ritem|slugize ' }}}}"><p>{{ '{{ item ' }}}}</p></a>
</li>
{{ '{% endfor %' }}}
</ul>
</li>
{{ '{% endfor %' }}}
</ul>
</div>
|
CSS 的部分為
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .post-tags {
position: fixed;
top: 6rem;
left: 77%;
margin-top: 3rem;
font-size: 1em;
border-radius: .313rem;
width: 14rem;
overflow: auto;
max-height: calc(70vh - 150px);
}
.post-tag-title,
.post-tag-subtitle {
list-style: none;
}
.post-tags > a > p,
.post-tag-title > a > p,
.post-tag-subtitle > a > p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-tags > a:hover,
.post-tag-title > a:hover,
.post-tag-subtitle > a:hover {
text-decoration: none;
}
|
由上面程式碼可以看到，我所使用的方法如同標籤功能，增加一個 bookmarks 屬性，再去針對該屬性去產生連結，然而我想分成兩層，所以使用二階陣列，每一個元素的第一個為該項目的大標，第二個之後為小標。
透過 HTML 的書籤方法，使用超連結加上 # 標題名稱即可快速移動頁面。由於是用 MD 檔產生 HTML 檔案，所以我只加在 ### 與 #### 當作我的標題名稱，字體大小比較舒服，然後透過 bookmarks 屬性內容對照到 ### 與 #### 來做連結。如下
在檔案屬性標頭用下面方式加入書籤列。
1
2
3
| ---
bookmarks: [["h3_name","h4_name","h4_name"],["h3_name","h4_name","h4_name"]]
---
|
然後在你的檔案如下
1
2
3
4
5
6
7
8
9
10
11
| ### h3_name
#### h4_name
#### h4_name
### h3_name
#### h4_name
#### h4_name
|
Jekyll 轉成 HTML 時會增加 ID 特性，然後透過 HTML 錨點的使用，只要 # 後面帶有 head 的 id 就會跳過去，進而實現書籤功能。