# Vuepress 添加 Blog 评论功能

# 注册 OAuth application

参考Gitmen官方文档（中文文档）, 申请地址Register a new OAuth application

Application name            (可随意填写)  
Homepage URL                (填写域名，例如：https://pangxieju)  
Application description     (描述，可不填写)  
Authorization callback URL  (填写域名，例如：https://pangxieju)

# 准备一个 github 仓库

Gitmen 的评论原理是将留言信息存储在自己的仓库 issue 中，所以用户用留言需要登录 github 才能评论。这里我们要先准备一个仓库。本博客托管在 Github Pages 上，所以直接使用 pangxieju.github.io 仓库来存储评论。

# 添加评论代码

在 ./vuepress 目录下打开 enhanceApp.js (如果没有创建)文件，复制代码到文件中。

import { comment } from './plugin/index.js';

export default ({
  Vue,
  options,
  router,
  siteData
}) => {
  comment(router, {
    el: '#vuepress-theme-blog__post-layout', // 用于判断是否在文章内容页面
    owner: '342885251@qq.com',               // github 账号名称
    repo: 'pangxieju.github.io',             // 仓库名称
    oauth: {
      client_id: 'xxxx', 
      client_secret: 'xxxx'
    }
  });
}

在 ./vuepress 目录创建 plugin 目录，在目录里面创建 index.js 文件和 comment.js 文件。 index.js 文件添加如下代码:

import comment from './comment.js';

export {
  comment
};

comment.js 文件添加如下代码:

const renderGitment = (config) => {
  const name = 'gitalk-container';
  let commentsEl = document.getElementById(name);
  if (!commentsEl) {
    commentsEl = document.createElement('div');
    commentsEl.id = name;
    commentsEl.classList.add('content');
  }
  
  const page = document.querySelector(config.el);

  if (page) {
    page.appendChild(commentsEl);
    new Gitment(config).render(name);
  }
};

const integrateGitment = (router, config) => {
  const linkGitment = document.createElement('link');
  linkGitment.href = 'https://imsun.github.io/gitment/style/default.css';
  linkGitment.rel = 'stylesheet';
  document.body.appendChild(linkGitment);

  const scriptGitment = document.createElement('script');
  scriptGitment.src = 'https://imsun.github.io/gitment/dist/gitment.browser.js';
  document.body.appendChild(scriptGitment);
  
  router.afterEach((to) => {
    config.id = to.path;
    config.link = location.origin + to.path;
    if (scriptGitment.onload) {
      renderGitment(config);
    } else {
      scriptGitment.onload = () => {
        renderGitment(config);
      }
    }
  })
};

export default (router, config) => {
  try {
    document && integrateGitment(router, config);
  } catch (e) {
    console.error(e.message);
  }
};

# VuePress deploy

部署项目，部署相关文章后续添加。

# 初始化页面评论区

部署之后，每一个页面的评论区需要管理员（new Giement 时填写的owner）进行初始化。

# 注意

如果自定域名需要处理跨域问题。