1. 留言板

我本來是使用 Cusdis，一款不限 Github 用戶就可留言的外掛，但某天 Cusdis 直接 shut down，所以我就轉用 utterances。 介面一樣好看，使用方便，唯一缺點就是只限 Github 用戶留言。

使用utterances，copy 代碼後填上自己的 repo，貼在 themes/layouts/partials/comments.html 內即可使用。

2. 友鏈

參考Aimer’s Blog的 code 架設。
目前還沒有網友，但這個版型很好看，之後也可以當作放作品集的頁面。

3. Buy me a coffee

使用bmc-button by isqua shortcode。

如果想要點入時另開新視窗，可以在 shortcodes/bmc-button.html 下在原本 code 的 href 後增加 target="_blank"。

<a
  class="hugo-shortcodes-bmc-button"
  href="{{ $url | safeURL }}"
  target="_blank"
></a>

4. 目錄放側邊

原出處 Sulv 的文章好像已經失效了，我是參考使用3rd’s Blog 的 code 設置的。 設置完後在文章打開目錄。

---
showToc: true # 顯示目錄
TocOpen: true # 預設打開目錄
---

5. Search 建立搜尋

參考使用小 M 平碎碎念 的 code 設置。

6. 文章分類設置

使用Page bundles 的方式設置。

在 VSC 就將文章架構整理好，我目前的文章設置是只有一個分類(好少…)。有了這個文章分類後我就把 Category 從 Menu remove 掉了，覺得功能有點重複了。

content
├── posts
│   ├── _index.md
│   ├── 架網站
│   │   └── _index.md
├── about.md
├── archive.md
└── search.md

7. 置頂文章

PaperMod 本身有支援置頂功能，只需要在文章 Front Matter 中增加 Weight=1 即可置頂文章

---
title: "這是一篇置頂文章"
weight: 1
---

如果想要在置頂文章標題旁邊增加 [置頂] 的 CSS 文字，首先是改 list.html 取代原本 list.html 中的 entry title Code

<h2 class="entry-hint-parent">
  <span class="entry-title">
    {{- .Title }}
    {{- if eq .Weight 1 }}
      <span class="pinned-tag">[置頂]</span>
    {{- end }}
  </span>
  {{- if .Draft }}
    <span class="entry-hint" title="Draft">
      <svg>...</svg>
    </span>
  {{- end }}
</h2>

再來是在 css/extened/下增加 CSS 檔案

.entry-title {
  display: inline-block;
}

.pinned-tag {
  font-size: 0.7em;
  color: #888;
  margin-left: 6px;
}

最後在 config.yaml 中啟動這個 CSS

params:
  assets:
    customCSS:
      - css/extended/blank.css

我自己又做了一些 modify 讓置頂文章只會生效在文章分類下的頁面，在首頁則是維持 by date 排序方式。



持續增加中...

Buy me a croissant