Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件,可以把评论放在仓库的issues里面，支持多语言，无干扰模式（设置 distractionFreeMode 为 true 开启），快捷键提交评论

1. 申请一个OAuth application

GitHub OAuth application允许程序来操作github账户，也可以对github中仓库读写。

申请GitHub OAuth application流程：

1、打开github网站登陆后，点击右上角的用户图标，选择Settings

2、在 Settings 页面选择Developer settings选项

3、在 Developer settings 选择OAuth Apps,然后会在页面右边有一个New OAuth App按钮，点击这个按钮就进入到新建OAuth application页面

在注册OAuth应用页面有如下几个参数需要填写：

Application name：必填，OAuth的名字

Homepage URL：必填，你应用的网址，哪个网站用了Gitalk组件，就填写这个网址

Application description：选填，该OAuth的说明

Authorization callback URL：必填，授权成功后回调网址，跟Homepage URL参数保持一致就好
这些参数在注册成功后是可以修改。

参数填好后，点Register application按钮即可完成注册

2. Gitalk的参数说明

在next/_config.yml文件中

# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: true
  github_id: # 仓库的创建者
  repo:  # 存放评论的仓库,用于存放Gitalk评论
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: # Github仓库的所有者和合作者 (对这个 repository 有写权限的用户)initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
  # 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 values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

3. 进一步设置

/themes/next/source/js/third-party/comments/gitalk.js 中

/* global NexT, CONFIG, Gitalk */

document.addEventListener('page:loaded', () => {
  if (!CONFIG.page.comments) return;

  NexT.utils.loadComments('.gitalk-container')
    .then(() => NexT.utils.getScript(CONFIG.gitalk.js, {
      condition: window.Gitalk
    }))
    .then(() => {
      const gitalk = new Gitalk({
        clientID           : CONFIG.gitalk.client_id,
        clientSecret       : CONFIG.gitalk.client_secret,
        repo               : CONFIG.gitalk.repo,
        owner              : CONFIG.gitalk.github_id,
        admin              : [CONFIG.gitalk.admin_user],
        //此参数用于评论和页面对应的标识，如果想让两个页面用一个评论，可设置两个页面的id一样
        id                 : CONFIG.page.path,
        proxy              : CONFIG.gitalk.proxy,
        //设置系统语言
        language           : CONFIG.page.lang,
        //Facebook评论框的全屏遮罩效果。默认值：false
        distractionFreeMode: CONFIG.gitalk.distraction_free_mode
      });
      gitalk.render(document.querySelector('.gitalk-container'));
    });
});

4. 本地运行

登陆

???????????????

admin : [CONFIG.gitalk.admin_user],

在gitalk.js中已经加了[]，在设置 _config.yml中不需要[]

admin_user: ['WTlumos']# github仓库的所有者和合作者

改为

admin_user: 'WTlumos' # github仓库的所有者和合作者

W.T.的博客

hexo网站评论功能用Gitalk实现

1. 申请一个OAuth application

2. Gitalk的参数说明

3. 进一步设置

4. 本地运行