在Hugo的anatole模板增加utterance留言板

• 2022/11/6
• 閱讀時間 1 分鐘

原本的版型很美，但是缺少了一些互動的功能讓人有點空虛，因此新增了「utteranc留言板」，使來部落格的網友可以透過留言板和作者互動，這篇向大家介紹「utteranc留言板」。

為什麼選擇utterance留言板

這個版型原本就有支援加入各種留言功能，因此要在頁面掛進utterance留言板其實不算太難，至於會選擇utterance是因為這個部落格基本上就是使用GitHub建制的，因此使用連接GitHub Issue的小工具在看留言時相對便於管理，而且無廣告及載入快這二點也很優秀，小缺點是要登入後才能留言，不過這樣也可以減少廣告留言，所以也不完全是壞事就是了。

在選擇留言板種類的時候有參觀了一下別人的部落格，看到一些使用disqus留言板，研究了一下設置只需要申請帳號後掛入一行代碼，基本上就設置完成，但是在使用上就是一定要掛個廣告在留言板附近，跟utterance留言板一樣也是要登入後才能留言，然後不知道留言板的資料儲存在哪裡，如果珍貴的留言消失也找不回來（哭），因此就不考慮disqus留言板了。

utterance留言板設置

在設置的時候參考了網路上的資料，基本步驟如下：

1. 要先在自己的GitHub帳號內加入utterance的APP

2. 參考utterances 🔮表單頁面上的說明並進行以下的設定

   1. 將要掛utterance留言板的網頁專案設置成公開專案，這樣留言才會在網頁上顯示
   2. 確認utterance的APP是安裝在同一個GitHub帳號
   3. 在repo的格子內填上帳號/專案名稱
   4. Blog Post ↔️ Issue Mapping選擇建立留言的時候在Issue的命名原則
   5. Issue Label填寫要加上什麼標籤，也可以空白
   6. Theme選擇留言板要套用的主題顏色，在選擇的時候網頁背景顏色也會跟著改變，非常酷！

3. 第二步驟填完後會生成Enable Utterances的內容，將這一段貼到您希望顯示的部分就完成基本的配置，我是配置在single.html的底部，讓留言板顯示在每個頁面的最底下

4. 這個主題的作者原本就有配置utterance留言板的配置，但是有點複雜，所以我將原本的single.html配置的先關掉，並且換上樣板

   <!-- comments -->
   <script src="https://utteranc.es/client.js"
               label="comment"
               repo="{{ .Site.Params.utteranc.repo }}"
               issue-term="{{ .Site.Params.utteranc.issueTerm }}"
               theme="{{ .Site.Params.utteranc.theme }}"
               crossorigin="anonymous"
               async>
   </script>
   

5. 在config.toml加入以上配置所需要的資料，這裡放置了幾乎所有的網站基本設定，這樣以後再修改網站基本資料時，就可以都在config.toml的頁面修改，所以比較建議這樣的配置，以下有包含我所選擇的設定，請再依照自己的專案進行修改

   [params.utteranc]
     enable = true
     repo = "您的GitHub帳號 / 您要放置留言的GitHub專案名稱" ##請依照您實際要設置的資料修改
     issueTerm = "title" ##Issue的命名原則我是設定和文章名稱相同
     label="✨💬✨" ##我使用了浮誇的標籤，這邊可以空白
     theme = "gruvbox-dark" ##留言板的主題目前我選擇gruvbox-dark風格
   

6. 請執行Hugo server看頁面中的utterance留言板有沒有出現，如果沒有出現的話再檢查一下配置是否正確，也可以參考hugo官網有關comment配置的文件，查看您的主題若沒設置時該如何修改，也可以在選擇主題時查看說明，選擇有預設可以增加utterances留言功能的主題

小結

在一開始設定的時候，因為作者寫的太好了，所以我一開始不會設置，還去問老師該怎麼修改，之後選擇先忽略原本作者寫的很漂亮的程式碼，而使用老師所提供的程式碼，就顯示出來了，其實老師提供的和我參考資料的內容很像，只能說功力還不夠，學習的路上還有很長的一段要走，不過可以解決真的好開心！果然在自己的專案裡解決問題真的很能夠增加對於程式語言的興趣，也能夠增加自己的自信，再來要想還有什麼有趣的專案來實做了！

參考資料：

• liva-hugo樣式 https://github.com/gethugothemes/liva-hugo
• 给hugo博客添加评论功能 https://liangyuanpeng.com/post/hugo-comment/
• GitHub App utterances https://github.com/apps/utterances
• utterances 🔮 https://utteranc.es/
• HUGO / Comments https://gohugo.io/content-management/comments/

這個系列的帖子

• 在Hugo的anatole模板增加Likecoin拍手功能
• 在Hugo的anatole模板增加utterance留言板
• Hugo的anatole模板修改