前言

懶懶以前是 Love it 主題的使用者，但因為對 Google PageSpeed 分數及性能的執著，改為採用 PaperMod 主題。儘管如此，懶懶仍然想念那些精美的 admonition shortcodes，所以就著手進行移植。

在移植過程中，雖然遇到了一些困難，所幸懶懶找到了其他人分享的代碼，於是就順手記錄下來，給未來有需要的人做為參考

教學

1. 首先訪問 hugo-backup 專案的 Github 主頁，然後找到下列 4 個檔案及fa資料夾
   hugo-backup 專案

   • admonition.css
   • details.css
   • admonition.html
   • fa-all.css
   • fa 資料夾(字型檔)

2. 然後複製下列檔案至你 hugo 路徑下指定位置

admonition.css
此為 admonition 的 CSS 設定檔，可以自訂各標籤的顏色、大小、邊界、字體大小等等
複製到 hugo 路徑下.\assets\css\extended\admonition.css

details.css
此為 admonition 右上角箭頭符號的 CSS 設定檔
複製到 hugo 路徑下.\assets\css\extended\details.css

admonition.html
此為 admonition 的模板，其中有部分能用來修改各標籤的 icon (其他部分為 go 語言，想修改就餵給 AI 吧！)
複製到 hugo 路徑下.\layouts\shortcodes\admonition.html

fa-all.css
此為 fontawesome(V5版本) 的 CSS 設定檔，裡頭是 fontawesome 的 icon 設定檔
複製到 hugo 路徑下.\assets\css\extended\fa-all.css

fa資料夾
此為 fontawesome(V5) 的字型檔
將fa資料夾裡頭的所有字型檔，複製到 hugo 路徑下.\static\font\fa\

3. 修改你的extend_footer.html檔案
   原作者的 extend_footer.html 檔案

   • extend_footer.html

• 複製原作者的extend_footer.html程式碼片段(204行-217行)，新增至你 hugo 目錄下.\layouts\partials\extend_footer.html底部即可
• 此為 admonition 的程式片段，用來處理 admonition 的點擊展開／收合
• 沒去原作者的 github 複製的話，我已經幫你複製出來了!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{{- /* admonition toggle */}}
<script>
    let details = document.getElementsByClassName('details')
    details = details || [];
    for (let i = 0; i < details.length; i++) {
        let element = details[i]
        const summary = element.getElementsByClassName('details-summary')[0];
        if (summary) {
            summary.addEventListener('click', () => {
                element.classList.toggle('open');
            }, false);
        }
    }
</script>

成果展示