本篇使用的是utterances留言板
utterances是由TypeScript所構成的留言區套件,透過串接GitHub issue的方式來完成留言區功能(但需要GitHub帳號),簡而言之就是它可以在文章底下留言,並且同步到GitHub專案留下一個issue留言。
為什麼選擇用 utterances 留言板?
因為Blog全部架在GitHub上,感覺統一管理比較方便。
套件引用
- utterances: https://utteranc.es/
Step 1
進入 utterances 後找到 configuration
Step 2
先點擊 utterances app 進到下個頁面
Step 3
點擊安裝,然後再到個人GitHub的Setting裡的Applications設定utterances
看是要所有的Repo都可以引用這個套件,或是只有選擇的Repo可以使用,這邊我是選擇指有特定的選擇Repo可用
Step 4
回到 utterances頁,輸入你的repo資料
我自己的範例是 doug0849/doug0849.github.io
Step 5
再來 Blog Post ↔️ Issue Mapping 大概就是當有人留言後會出現的樣式,選第一個即可。
Step 6
選一個你喜歡的樣式風格
Step 7
複製JavaScript 到你模板裡要放Comment的位置
每個模板的位置不太一樣,必須要找到正確的地方引入此段JS
以Hexo Next 模板來說,請丟到 Next 主題資料夾下 > layout > _partials > comments.swig
開啟 comments.swig 找到
1 | {%- if page.comments %} |
把它丟在它下面
最後到主題_config.yml最後補上
utterances:
enable: true
這樣就完成啦!