Cover Image

如何在 Hugo 中安裝 Disqus 系統,以 PaperMod 主題為例

這邊記錄一下如何在 Hugo 中安裝 Disqus 評論系統,佈景主題為 PaperMod。 安裝步驟 在 Disqus 註冊帳號並創建一個新的網站。 在 Disqus 的網站設定中,找到 Shortname,這是用來識別你的網站的。 在你的 Hugo 網站的 config.toml 或 config.yaml 中添加以下配置: [params] disqusShortname = "your_disqus_shortname" comments = true 或者如果你使用的是 YAML 格式: params: disqusShortname: your_disqus_shortname comments: true 確保你的 Hugo 佈景主題支持 Disqus。PaperMod 佈景主題已經內建支持 Disqus,所以只需要確保上述配置正確即可。 複製 themes/PaperMod/layouts/partials/comments.html 到 layouts/partials/comments.html 確認 Disqus 的代碼已經包含在內。 如果沒有,你可以手動添加以下代碼到你的 layouts/partials/comments.html: {{- /* Comments area start */ -}} <div class="disqus markdown"> {{ partial "disqus.html" . }} </div> {{- /* Comments area end */ -}} 建立 layouts/partials/disqus.html 檔案,並添加以下內容: {{ if .Site.Params.disqusShortname }} <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = '{{ .Permalink }}'; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = '{{ .File.Path }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://{{ .Site.Params.disqusShortname }}.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> {{ end }} 在 local 確認是否有完成

June 18, 2025 · 1 分鐘 · Steven Chang
Cover Image for toc

如何將 Hugo 文章目錄移到側邊

如何將 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 ...

February 12, 2025 · 5 分鐘 · Steven Chang
Cover Image

使用 Hugo 架設 Blog

架設 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。 ...

February 7, 2025 · 1 分鐘 · Steven Chang