0%

Hexo Next主題添加留言板

本篇使用的是utterances留言板

utterances是由TypeScript所構成的留言區套件,透過串接GitHub issue的方式來完成留言區功能(但需要GitHub帳號),簡而言之就是它可以在文章底下留言,並且同步到GitHub專案留下一個issue留言。

為什麼選擇用 utterances 留言板?

因為Blog全部架在GitHub上,感覺統一管理比較方便。

套件引用

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

這樣就完成啦!

Welcome to my other publishing channels