透過新增 CSS snippets 進入 Obsidian Settings 在彈出的視窗中，前往「外觀」(Appearance)，然後向下捲動直到你看到「CSS 程式碼片段」(CSS snippets)。 你應該會在右側看到一個資料夾圖示，點擊它以開啟程式碼片段資料夾。 這時 Windows 資料夾應該會跳出，在空白處點右鍵，選擇「新增」->「文字文件」。 將這個文字文件重新命名為 Canvas-Snippets.css（系統可能會詢問你是否確定要重新命名，請確認）。 雙擊這個檔案，然後將以下提供的 CSS 程式碼貼上並儲存（關閉檔案並確認儲存變更）。 .canvas-node-content:not(.is-loaded):not(:has(.has-list-bullet)) { text-align: center; } 關閉資料夾視窗，別忘了啟用剛剛建立的 Canvas-Snippets（此時你的 Obsidian 設定應該還是開著的）。 Ref
如何將 Mermaid 轉換到 draw.io 先談談什麼是 Mermaid Mermaid 是 Mermaid.js，它是一個 JavaScript-based 用來畫流程圖、甘特圖、時序圖等的開源圖表語言。可以透過簡單的文字描述來產生圖表。 很常使用在 Markdown 文件中，例如 Github 中的 readme.md 文件。 為什麼要這樣做呢？ 因為我慣用的是 draw.io，有時候後透過 GPT 產生的流程圖，可以直接複製貼上到 draw.io。 插入 Mermaid 流程圖 Reference
如何將 Hugo 文章目錄移到側邊 產生 custom 的 css 產生一個 blank.css touch assets/css/extended/blank.css 產生的檔案位置會如下 assets └── css └── extended └── blank.css 貼上以下的 css 內容 :root { --nav-width: 1380px; --article-width: 650px; --toc-width: 300px; } .toc { margin: 0 2px 40px 2px; border: 1px solid var(--border); background: var(--entry); border-radius: var(--radius); padding: 0.4em; } .toc-container.wide { position: absolute; height: 100%; border-right: 1px solid var(--border); left: calc((var(--toc-width) + var(--gap)) * -1); top: calc(var(--gap) * 2); width: var(--toc-width); } .wide .toc { position: sticky; top: var(--gap); border: unset; background: unset; border-radius: unset; width: 100%; margin: 0 2px 40px 2px; } .toc details summary { cursor: zoom-in; margin-inline-start: 20px; padding: 12px 0; } .toc details[open] summary { font-weight: 500; } .toc-container.wide .toc .inner { margin: 0; } .active { font-size: 110%; font-weight: 600; } .toc ul { list-style-type: circle; } .toc .inner { margin: 0 0 0 20px; padding: 0px 15px 15px 20px; font-size: 16px; /*目录显示高度*/ max-height: 83vh; overflow-y: auto; } .toc .inner::-webkit-scrollbar-thumb { /*滚动条*/ background: var(--border); border: 7px solid var(--theme); border-radius: var(--radius); } .toc li ul { margin-inline-start: calc(var(--gap) * 0.5); list-style-type: none; } .toc li { list-style: none; font-size: 0.95rem; padding-bottom: 5px; } .toc li a:hover { color: var(--secondary); } 產生 layouts 的 html 產生一個 toc.html ...
架設 Hugo 起手式 環境： Mac OS Sequoia 15.3 Terminal: iTerm2 安裝 Hugo brew install hugo HUGO 指令測試 安裝完成後，在 Terminal 輸入以下指令，確認是否安裝成功。 hugo version 建立新 Blog hugo new site blog 建立新文章 為了方便管理，我會將文章放在 posts 資料夾中。 hugo new posts/2025/2025.md 啟動 HUGO 伺服器 -D 參數可以讓草稿文章也顯示在網頁上。 hugo server -D 開啟 http://localhost:1313/ 即可看到 Hugo 預設的網頁。 安裝佈景主題 進入 Hugo Themes 選擇一個喜歡的主題，將它加入到 Blog 中。 這邊選擇 PaperMod 主題。 透過官方推薦的將 submodule 加入到專案中。 git init git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically) 修改 hugo.toml # 新增 theme theme = 'PaperMod' Local Build 出可以部署的檔案 ## --gc: 執行完後清除 cache ## --minify: 壓縮檔案 hugo --gc --minify 部署到 Github Pages 在 Github 上建立一個新的 Repository，名稱為 {你的 Github id 名稱}.github.io。 ...