如何移植HUGO Loveit主題的admonition shortcodes
前言 以前的懶懶是 Love it 主題的粉絲，最近因為對 Google PageSpeed 分數的執著，已經改用 PaperMod 主題。儘管如此，懶懶仍然非常想念那些精美的 admonition shortcodes。 在移植過程中，遇到了一些困難。幸好，懶懶找到了其他人分享的代碼，於是便順便記錄下來，以便給有需要的人參考 自訂範例標題 我是範例 我是範例 我是範例 教學 來源網站 LoveIt(原作者) https://github.com/dillonzq/LoveIt hugo-backup https://github.com/YazidLee/hugo-backup 首先訪問hugo-backup的Github主頁，然後找到下列4個檔案及fa資料夾 檔案來源 hugo-backup admonition.css details.css admonition.html fa-all.css fa資料夾(字型檔) 然後對複製下列檔案至你的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語言，想修改就餵給ChatGPT吧~) 複製到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\即可 變更字型檔路徑 因hugo-backup的fa-all.css預設將字型檔放在.\static\font\fa\資料夾內，故若想將字型檔目錄變更至.\static\webfont\ 需修改fa-all.css檔，以取代的方式將所有路徑為\font\fa\變更為\webfont\(其中相對路徑前綴.\static省略) 然後新增下列檔案並進行修改(亦可從Papermod原始檔內複製一份至hugo根目錄修改) 檔案來源 hugo-backup/layouts/partials/extend_footer.html extend_footer.html extend_footer.html 此為admonition的模板，用來控制右上方箭頭的點擊行為 複製原作者extend_footer.html198-211行的代碼，新增至你hugo根目錄下.\layouts\partials\extend_footer.html即可 註:懶懶將代碼複製出來，可直接複製下方代碼喔! 懶懶的extend_footer.html檔案↘ 成果展示 網站 摘要 訊息 提示 成功 問題 警告 失敗 危險 BUG 範例 引用