butterfly+gitalk 实现评论功能

效果

image-20230710191200220

步骤

gitalk本地部署

gitalk/gitalk：Gitalk是一个基于Github Issue和Preact的现代评论组件。

1
npm i --save gitalk

github申请OAuth Apps的Client ID和Client Secret

Profile-Settings->Developer Setings->OAuth Apps

创建OAuth Apps

image-20230710191611194
image-20230710191920642

得到Client ID和Client Secret

butterfly配置

官方文档及其简略，容易出错

配置如下

1
2
3
4
5
6
7
gitalk:
  client_id: "client_id"
  client_secret: "client_secret"
  repo: Center-cr.github.io 
  owner: Center-cr
  admin: Center-cr
  option:

repo不要带上你的用户名如“Center-cr/Center-cr.github.io”的写法是错误的，解析的时候是按照admin/repo在github上找仓库

1
2
3
4
5
6
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # use: # Valine,Disqus
  use: Gitalk

这个use: Gitalk本来是use: # Valine,Disqus，要进行修改

初始化第一个issue

登录自己的github账号随便发一条评论即可