use gitalk in next theme

Gitalk

基于github的评论组件

设置github OAuth

Gitalk can only use GitHub accounts for comments.
Click here to sign up for a new OAuth Application
Other content can be filled in at will, but be sure to fill in the correct callback URL (usually the domain name corresponding to the comment page). Then you will get a Client ID and a Client secret.

创建github仓库存储评论数据

Create a repository you want to store Gitalk comments in your GitHub.

配置

Set the value enable to true, add Client ID (client_id) and Client secret (client_secret) in step 1,
add your Github username (github_id and admin_user) and the created repository name (repo) in step 2,
and edit other configurations in gitalk section in the theme config file as following:

##next/_config.yml
    # Gitalk
    # Demo: https://gitalk.github.io
    gitalk:
      enable: false     #使用时设为true
      github_id:        # Github repo owner，用户名
      repo:             # Repository name to store issues，新建的用于保存评论数据的仓库名，比如： comment_blog
      client_id:        # Github Application Client ID，
      client_secret:    # Github Application Client Secret
      admin_user:       # GitHub repo owner and collaborators, only these guys can initialize github issues
      distraction_free_mode: true # Facebook-like distraction free mode
      # Gitalk's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available value: en, es-ES, fr, ru, zh-CN, zh-TW
      language:

可将网站所有配置保存在根目录下的_config.yml文件中，需注意将这些配置放在next主题的配置区域中，这是因为gitalk是内置在next主题中的，对hexo进行配置无效，需要在next主题中配置才能生效。配置gitalk时需将这些配置的级别和

1	scheme： Pices

保持一致即gitalk配置是theme_config的子集。

theme_config:
#========================================================
#===================== Scheme Settings =================
#======================================================== 
  #scheme: Muse
  #scheme: Mist
  scheme: Pisces
  #scheme: Gemini

OAuth

OAuth Application

Application name            随便填
Homepage URL			    站点网址，没有买域名就用XXXX.github.io，有域名需要配置到域名上填域名，如我的是https://www.programnotes.cn
Application description     随便填
Authorization callback URL  网址，没域名填XXXX.github.io（github pages的地址）；
                            设为域名则同上，如我的：https://www.programnotes.cn

如果，域名放置了顶级域名通过CNAME改变为二级域名的，即网站配置为XXX.com或者XXX.cn类的，homepage URL这里需要填写网站配置的，不能填CNAME指向的二级域名如blog.XXX.com等，会导致gitalk异常。

Gitalk使用

需要登录github账号，点击Issues初始化，这会在github创建的用于保存评论的仓库中新建一个issue用于评论，如果点击后没有自动跳转并出现评论界面说明前面的配置有误。比如Homepage URL设置出错会跳转但是仍然无法评论，仔细看看网站会发现在原始url后有一串新出现的，其中有gitalk的错误信息“error…”一长串。

gitalk cdn

js ,css文件放cdn里

1
2
3

# Gitalk
#gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
#gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css

代理接口

国内的
https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
接口被墙导致gitalk 无法获取 token问题

换个接口就行了

在gitalk.min.js中将

1	proxy:"https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"

修改为自部署的接口如

1	proxy:"https://proxy-gitalk-api.netlify.app/github_access_token"

接口部署

使用 netlify或vercel等平台部署 kurisaW 实现的接口

netlify
fork项目到自己的github账号下,在netlify选择”Add new site”->”import an existing project”即可

部署完可以通过修改默认域名

编程笔记