共計 1746 個字符,預計需要花費 5 分鐘才能閱讀完成。
這篇文章將為大家詳細講解有關如何使用 utterances 給靜態博客實現評論功能,丸趣 TV 小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
了解 utterances
utterances 是一款基于 Github Issue 的 Github 工具, 優點主要是無廣告、加載快、配置簡單,輕量開源! 由于我沒有使用過其他評論工具的經驗,因此只講述一下 utterances 自身的優點,具體對比情況無法給出,但是看到有的博主表示之前使用 disqus, 但是廣告多,加載也比較慢,體驗了一把 utterances 后,馬上切換到 utterances。相信 utterances 足夠讓我使用很久了。
安裝 utterances
由于 utterances 是一款 Github App,因此安裝 utterances[1]非常簡單,只需要授權特定 repo 權限給 utterances 就可以了, 注意一個點:授權的這個 repo 必須是 public 的,可以選擇多個 repo,但是建議選擇一個就可以了,也比較安全。
給出我授權的 repo 作為參考,我是選擇博客的 repo 作為 utterances 評論的存放點(在博客評論的內容都會以 issue 的形式發布在 repo 下).
到目前為止 utterances 就已經安裝好了,接下來是需要在博客將評論的客戶端顯示出來。
配置 utterances 評論顯示
可以配置在你希望顯示評論的地方,這里給出一個簡單的實現:配置在 footer.html 的頂部(顯示在每篇文章的底部).
把具體的倉庫改成自己授權給 utterances 的倉庫即可。
script src= https://utteranc.es/client.js repo= liangyuanpeng/liangyuanpeng.github.io issue-term= title theme= github-light crossorigin= anonymous async /script
這是當前最簡單的方式,更優雅的方式是以配置文件的方式實現,例如:
html 中的配置模板
{{ if .Site.Params.utteranc.enable }} script src= https://utteranc.es/client.js repo= {{ .Site.Params.utteranc.repo }} issue-term= {{ .Site.Params.utteranc.issueTerm }} theme= {{ .Site.Params.utteranc.theme }} crossorigin= anonymous async /script {{ end }}
配置文件中的配置項:
## 配置 utteranc 評論, 教程參考 https://utteranc.es/[params.utteranc] enable = false repo = liangyuanpeng/liangyuanpeng.github.io ## 換成自己得 issueTerm = title theme = github-light
這樣的話需要修改倉庫或者主題都可以很方便的修改一下配置文件就可以了,同時也可以選擇不開啟評論。
評論顯示的主題有多種,具體可以在 utterances 官方 [2] 查看,這里給出當前時間點的一個列表:
1.github-light2.github-dark3.github-dark-orange4.icy-dark5.dark-blue6.photon-dark7.preferred-color-scheme8.boxy-light
映射到 issue 也有幾種方式:
1.pathname2.url3.title4.og:title5.issue-number6.specific-term
我選擇的是 title 的方式,對應評論會以文章標題作為 issue 的標題創建在對應倉庫下。
到目前為止,給 hugo 靜態博客添加評論的功能已經做好了,不需要服務器就可以擁有評論功能,實用!
關于“如何使用 utterances 給靜態博客實現評論功能”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。