Charlie
Home Archives About
Home Archives About

[Hexo] How to setup a simple comments in hexo blog

hexo
N 人看过

在Hexo上架設留言區

我個人使用的主題Aomori有支援多種留言的套件

以下為嘗試過的各種版本



Gitalk

先是使用了Github出的Gitalk

使用上看起來很棒，但是在網址上有 #XXX 的頁面導航的情況很常出問題

明明是同一篇卻看不到之前的人的留言

Disqus

後來換成了Disqus，使用上非常的棒

支援多個平台登入留言

而且可以支援針對個別的留言搭樓層回覆

不過個人感覺..整體的排版有點太花了

utteranc

最後看到了utteranc

跟Gitalk相同是以Github的issue的方式留言

整體的使用上非常簡潔


綜合以上所述，我最後選擇了utteranc

以下則是記錄了utteranc設定的過程

[utteranc留言區設置]

1. 建立留言用的repo

如果hexo是搭建在github上的也可以直接使用該repo

也可以創建一個新的


2. 安裝utteranc外掛

安裝連結： https://github.com/apps/utterances

點選install按鈕 這邊已經安裝過了所以顯示的是Configure

a02.jpg

這邊只要選擇要存放issue的留言的repo就好

選擇完後，點選左下角的install 這裡已經安裝過了所以顯示的是save

a03.jpg

之後會被導向到說明的頁面 https://utteranc.es/

a04.jpg


3. 增加script至comments.ejs

最下方會看到產生script的區塊

a05.jpg

repo填入你github的repo

<script src="https://utteranc.es/client.js"
        repo="username/username.github.io"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

因為我這邊選擇的是Aomori主題，並沒有支援utteranc，所以需要這邊直接修改程式碼

要把這段script放入到comments.ejs中

themes資料夾結構

├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs
├── languages
├── layout
│   ├── _partial
│   │   ├── page
│   │   ├── post
│   │       ├── comments.ejs
│   ├── _widget
├── source
│   ├── dist
│   ├── javascripts
│   ├── modules
│   └── stylesheets
└── stylelint.config.js

直接貼在comments.ejs最下方即可


[增加_config.yml外部設置 (optional)]

如果想要在_config.xml增加設定檔

script可以這樣調整

comments.ejs

<% if (config.utteranc_comment){ %>
<script src="https://utteranc.es/client.js"
        repo="<%= config.utteranc_comment.repo || '' %>"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
<% } %>

_config.yml

utteranc_comment:
  repo: username/username.github.io

[Demo畫面]

a06.jpg