利用Gitalk给Vuepress搭建的blog增加评论功能

点这里查看效果

这两天折腾了一下comment功能

自己写花的代价肯定更大

所以选择用组件

目前用的比较多的有Gitalk Gitment

Gitment因为实践之后不能评论(可能是很久没人维护了

于是最后选择更实(hao)用(kan)的Gitalk

OAuth application

Gitalk, Gitment 都是基于GitHub Issue作为Comment

那么Gitalk和Gitment的原理就相对于调用Github issue的接口对issue内容进行提取展示在div内

那么必须对你的某个repository的issue进行授权

这就是OAuth application

参考官方文档

initial Issue

刚才说了Gitalk大致的思路

实际上,它调用的接口如下

https://api.github.com/repos/${owner}/${repo}/issues?client_id=${clientID}&client_secret=${clientSecret}&labels=Gitalk,${id}

可以看出这个调用的HTTP请求中存在如下参数

  1. owner: github username
  2. repo: github repository name(ps: 不包括username,仅是repo name)
  3. clientID: OAuth application得到的id
  4. clientSecret: OAuth application得到的secret
  5. id: 可以看出这个是issue的参数,所以我们需要在issues中建立相应带labels为id的issue?
    • 因为Lz比较懒,只想建一个issue放comment,所以这里id设为'comment',你可以用fullPath给每个页面一个comment issue

enhanceApp.js

vuepress 支持个性定制

用户通过/docs/.vuepress/enhanceApp.js对js渲染做相应的改动

参考官方文档

其中Gitalk中的各参数参考initial Issue

附上enhanceApp.js作为参考

function integrateGitalk(router) {
  const linkGitalk = document.createElement('link');
  linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
  linkGitalk.rel = 'stylesheet';
  document.body.appendChild(linkGitalk);
  const scriptGitalk = document.createElement('script');
  scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
  document.body.appendChild(scriptGitalk);

  router.afterEach((to) => {
    if (scriptGitalk.onload) {
      loadGitalk(to);
    } else {
      scriptGitalk.onload = () => {
        loadGitalk(to);
      }
    }
  });

  function loadGitalk(to) {
    let commentsContainer = document.getElementById('gitalk-container');
    if (!commentsContainer) {
      commentsContainer = document.createElement('div');
      commentsContainer.id = 'gitalk-container';
      commentsContainer.classList.add('content');
    }
    const $page = document.querySelector('.page');
    if ($page) {
      $page.appendChild(commentsContainer);
      if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
        renderGitalk(to.fullPath);
      }
    }
  }
  function renderGitalk(fullPath) {
    const gitalk = new Gitalk({
      clientID: 'xxx',
      clientSecret: 'xxx', // come from github development
      repo: 'blog',
      owner: 'iofu728',
      admin: ['iofu728'],
      id: 'comment',
      distractionFreeMode: false,
      language: 'zh-CN',
    });
    gitalk.render('gitalk-container');
  }
}

export default ({Vue, options, router}) => {
  try {
    document && integrateGitalk(router)
  } catch (e) {
    console.error(e.message)
  }
}

FAQ

  1. 如果出现Error: Container not found, document.getElementById: gitalk-container
    • 确保本地启动没这个报错,可能是service 缓存的问题
    • 也有可能是真的没有初始化gitalk-container div
      • 为解决这个问题,对已经scriptGitalk的页面重新建立gitalk-container div
  2. GET https://api.github.com/user 401 (Unauthorized)
    • 无影响
  3. vue-router.esm.js?8c4f:1905 ReferenceError: Gitalk is not defined
    • js包还在下载中,找不到Gitalk
  4. NetWork Error
    • 一开始还以为是js加载顺序的问题(于是把拖了快一个月问题3的bug修了)
    • 后来才发现那段时间GitHub Api不稳定 你频繁请求的时候 是会出现Network Error的状态
    • 这个就无解了

如果有其他问题 可以在comment中留言

参考

. VuePress 集成第三方评论模块
. 评论系统

你可能感兴趣的:(JavaScript)