網站昇級復出紀錄

和許多人的2020年一樣,充滿許多預期計畫之外的變數。開始了我的一直想經營的podcast;開始經營在地的可重製科學推廣社群;預想能結束的研究專案要改變收集資料的方法;無法出國卻因緣際會開啓新的研究專案。在新的一年開始重新整理個人網站是個不錯的開始。

剛開始podcast時想過整合到個人網站,當時也遇到更新網站的Hugo Academic theme。那時的更新造成原來的disqus失效,造成一些想聯絡我的朋友只能從我的臉書連絡。趁這次更新,我換成以github留言系統為基礎的API ~ utterances。更新個人網站的過程只有找到英文的說明與安裝心得,在此留下我的經驗做為參考:

utterance安裝前置作業

網站github repo安裝utterance api

  1. 透過app網頁,依照指示將utterance api安裝到存放網站資料的github repo。

  2. utterances生成網頁模板。首先在以下欄位輸入github帳號/repo名稱。下圖是這個網站的例子。

  1. 評論標籤(label)以及留言頁面背景(Theme)可自行決定要不要設定。按下範例圖最下方的Copy,複製網頁模板內容。

設定網頁模板

  1. 前一步驟複製的網頁模板存於檔案utterances.html,檔案存放路徑為[根目錄]/layouts/partials/comments

  2. 修改[根目錄]/layouts/partials/comments.html的內容如下:

{{ if site.Params.comments.engine | and (index site.Params.comments.commentable .Type) | and (ne .Params.commentable false) | or .Params.commentable }}
<section id="comments">
  {{ if eq site.Params.comments.engine 1 }}
    {{ partial "comments/disqus.html" . }}
  {{ else if eq site.Params.comments.engine 2 }}
    {{ partial "comments/commento.html" . }}
  {{ else if eq site.Params.comments.engine 3 }}
    {{ partial "comments/utterances.html" . }}
  {{ end }}
</section>
{{ end }}
  1. 修改[根目錄]/config/_default/params.toml裡有關留言的設定。這個網站設定可留言的部分是網誌與專案,因此設定如下:
############################
## Comments
############################
[comments]
  # Comment provider:
  #   0: Disabled
  #   1: Disqus (https://disqus.com)
  #   2: Commento (https://commento.io)
  #   3: Utterances (https://utteranc.es/)
  engine = 3

  # Which page types are commentable?
  commentable = {page = false, post = true, docs = false, project = true, publication = false, talk = false}
  1. 置入留言模板的shortcode 到網誌與專案的模板網頁,分別存放於[根目錄]/layouts/_default/single.html[根目錄]/layouts/project/single.html
網誌模板
專案模板

使用須知

utterance使用github的留言系統,因此留言者必須註冊並登入github帳號是一個不方便的地方。不過對於像我一樣許多公開專案在github部署的使用者,可運用這個機制引導想深入學習者使用github,更能讓高手直接指出專案的問題。

陳紹慶
陳紹慶
認知心理學副教授