用 utterances 簡單快速的幫 blog 加上留言功能

2021/09/16

# 序

原本留言功能是用 Vssue (opens new window) 實現
後來在閱讀別人的文章時時發現了 utterances (opens new window)
同樣基於 Github issues 但有更多樣式可以選，而且可以對留言按 emoji（重要）

# 安裝

因為是基於 Github issues，所以要用作留言使用的 repo 必需是公開（public）的
安裝utterances app (opens new window)設置允許訪問的 repo
在欲放置留言功能的地方引入 client.js 即可

<script
  src="https://utteranc.es/client.js"
  type="text/javascript"
  async
  repo="{ repo }"
  label="{ label }"
  issue-term="{ issue-term }"
  theme="{ theme }"
  crossorigin="anonymous"
></script>

repo: Github帳號/repo名稱 ex. clipwww/blog
label: 就 Github issue 的 label (選填)
issue-term: blog 文章跟 issue 之間的 Mapping
- pathname: 建立時會以 blog 文章的 pathname 作為 issue標題
- url: 建立時會以 blog 文章的 url 作為 issue標題
- title: 建立時會以 blog 文章的標題作為 issue 標題
- og:title: 建立時會以 blog 文章的 og:title 作為 issue 標題
- 自行定義 Term: 建立時會以自定義的 Term 作為 issue 標題
```
<script
  src="https://utteranc.es/client.js"
  issue-term="YEE"
  ...
></script>
```
issue-number: 指定特定的 issue number
設定 issue-number 時不能設定 issue-term，不然沒有用
且無法自動創建 issue ，必需要指定已經存在的 issue number
ex: https://github.com/clipwww/blog/issues/{ Issue Number }/
theme: 主題
github-light、github-dark...等
詳細可參考 utterances 官方文件 (opens new window)

# Vue Component

因為是用 VuePress 的 @vuepress/theme-blog 建置 blog
那就要替換掉原本在 layouts > Post.vue 裡使用的 @vuepress/plugin-blog - Comment 組件

<template>
  <div>
    <script
      src="https://utteranc.es/client.js"
      type="text/javascript"
      async
      label="Utterances"
      issue-term="title"
      :theme="theme"
      repo="clipwww/blog"
      crossorigin="anonymous"
    ></script>
  </div>
</template>

<script>
export default {
  props: {
		theme: {
			type: String,
			default: 'github-dark'
		}
	}
};
</script>

 <Utterances :theme="theme" :key="theme" />

這樣切換明亮/深色模式時就會重新 render 了

# 參考

Last Updated: 2021/09/24 15:23:25