nodejs版本的Gitalk/Gitment评论自动初始化

原文发表于nodejs版本的Gitalk/Gitment评论自动初始化

前言

今天搭建blog的最后一步，添加评论功能，一番搜索，看中了Gitalk和Gitment，因为Gitment在github上的代码断更太久，最终选择了Gitalk，关于具体安装和配置，可以参见下面官网和两篇文章

Gitalk官网

Hexo中Gitalk配置使用教程-可能是目前最详细的教程

Hexo NexT主题中集成gitalk评论系统

遇到的问题

Gitalk配置完成后，启动hexo，打开文章页面，会出现如下的界面，需要登陆github，完成初始化后才能使用

文章这么一篇一篇的点过去，操作贼麻烦，如果有自动化操作一波，才符合懒人天性，就百度了一下有没有同道中人，已经解决过了，果然有【这里】，一顿操作后，只能放弃。

原因：

1. 发布的时候，每次执行这个脚本，都会为每个链接 创建一个issue，并没有对已经创建的做过滤。
2. ruby手生，改不动

如此如此，只能自己动手了，nodejs大法。

解决问题

生成sitemap站点地图

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

1. 安装插件

   在你hexo的根目录，执行下面两个命令来安装针对google和百度的插件

   npm install hexo-generator-sitemap --save
   npm install hexo-generator-baidu-sitemap --save
   

2. 在站点根目录下的_config.yml添加如下代码

   # hexo sitemap网站地图
   sitemap:
     path: sitemap.xml
   
   baidusitemap:
     path: baidusitemap.xml
   

   现在在执行hexo generate的时候，在博客根目录下的public文件夹下面，就会生成sitemap.xml和baidusitemap.xml。

获取github接口的调用权限

1. 创建一个access token，点击链接进入

2. 点击Generate new token按钮

3. 输入一个描述，为token添加所有的repo权限，然后点击最下方的Generate token按钮，就可以生成一个新的Token备用

   
   生成的token，在后面使用
   

脚本文件

1. 安装依赖包

   在你hexo的根目录，执行下面的命令

   npm install request --save
   npm install xml-parser --save
   npm install yamljs --save
   npm install cheerio --save
   

2. 创建脚本文件

   在站点根目录下创建comment.js文件，将下面的代码粘贴进文件中，然后修改config中的配置项，其中token就是上一步中获取的值

   const request = require("request");
   const fs = require("fs");
   const path = require("path");
   const url = require("url");
   const xmlParser = require("xml-parser");
   const YAML = require("yamljs");
   const cheerio = require("cheerio");
   // 根据自己的情况进行配置
   const config = {
       username: "GitHub 用户名", // GitHub 用户名
       token: "GitHub Token",  // GitHub Token
       repo: "daihaoxin.github.io",  // 存放 issues的git仓库
       // sitemap.xml的路径，commit.js放置在根目录下，无需修改，其他情况自行处理
       sitemapUrl: path.resolve(__dirname, "./public/sitemap.xml"),
       kind: "Gitalk",  // "Gitalk" or "Gitment"
   };
   let issuesUrl = `https://api.github.com/repos/${config.username}/${config.repo}/issues?access_token=${config.token}`;
   
   let requestGetOpt = {
       url: `${issuesUrl}&page=1&per_page=1000`,
       json: true,
       headers: {
           "User-Agent": "github-user"
       }
   };
   let requestPostOpt = {
       ...requestGetOpt,
       url:issuesUrl,
       method: "POST",
       form: ""
   };
   
   console.log("开始初始化评论...");
   
   (async function() {
       console.log("开始检索链接，请稍等...");
       
       try {
           let websiteConfig = YAML.parse(fs.readFileSync(path.resolve(__dirname, "./_config.yml"), "utf8"));
           
           let urls = sitemapXmlReader(config.sitemapUrl);
           console.log(`共检索到${urls.length}个链接`);
           
           console.log("开始获取已经初始化的issues:");
           let issues = await send(requestGetOpt);
           console.log(`已经存在${issues.length}个issues`);
           
           let notInitIssueLinks = urls.filter((link) => {
               return !issues.find((item) => {
                   link = removeProtocol(link);
                   return item.body.includes(link);
               });
           });
           if (notInitIssueLinks.length > 0) {
               console.log(`本次有${notInitIssueLinks.length}个链接需要初始化issue：`);
               console.log(notInitIssueLinks);
               console.log("开始提交初始化请求, 大约需要40秒...");
               /**
                * 部署好网站后，直接执行start，新增文章并不会生成评论
                * 经测试，最少需要等待40秒，才可以正确生成， 怀疑跟github的api有关系，没有找到实锤
                */
               setTimeout(async ()=>{
                   let initRet = await notInitIssueLinks.map(async (item) => {
                       let html = await send({ ...requestGetOpt, url: item });
                       let title = cheerio.load(html)("title").text();
                       let pathLabel = url.parse(item).path;
                       let body = `${item}
   
   ${websiteConfig.description}`;
                       let form = JSON.stringify({ body, labels: [config.kind, pathLabel], title });
                       return send({ ...requestPostOpt, form });
                   });
                   console.log(`已完成${initRet.length}个！`);
                   console.log("可以愉快的发表评论了！");
               },40000);
           } else {
               console.log("本次发布无新增页面，无需初始化issue!!");
           }
       } catch (e) {
           console.log(`初始化issue出错，错误如下：`);
           console.log(e);
       } finally {
       
       }
   })();
   
   function sitemapXmlReader(file) {
       let data = fs.readFileSync(file, "utf8");
       let sitemap = xmlParser(data);
       return sitemap.root.children.map(function (url) {
           let loc = url.children.filter(function (item) {
               return item.name === "loc";
           })[0];
           return loc.content;
       });
   }
   
   function removeProtocol(url) {
       return url.substr(url.indexOf(":"));
   }
   
   function send(options) {
       return new Promise(function (resolve, reject) {
           request(options, function (error, response, body) {
               if (!error) {
                   resolve(body);
               } else {
                   reject(error);
               }
           });
       });
   }
   

3. 执行脚本

   需要注意的是第一步中的sitemap插件会生成的sitemap.xml会包含全部的界面，包括标签页、关于页等，执行上面的代码也会对这些页面生成评论框(也就是issue)

   完成上述操作后，执行下面的命令，就可以部署站点，并初始化所有的评论了。

   hexo clean
   hexo generate
   hexo deploy
   node ./comment.js
   

   也可以通过在站点根目录的package.json文件中，新建npm脚本，一个命令搞定清除缓存、生成静态文件、提交git并生成issue的所有操作。

   "scripts": {
       "start": "hexo clean && hexo s",
       "deploy": "hexo clean && hexo generate && hexo deploy && node ./comment.js"
   }
   

   完成文章编写，或者其他的更新操作后，直接执行deploy即可。

   npm run deploy
   

后记和一些坑

计划半个小时搞定的，最后花了三四个小时，程序猿评估工作量的水平依然很稳定^_。

在使用nodejs完成脚本的过程中，因为找不到在页面点击直接登录github完成的初始化规则，踩了不少坑。

1. 第一版完成的时候，测试发现相同的地址，还是会生成issue，后来才发现github获取issues的接口是分页的，默认返回的30条。在官方文档可以找到分页的设置方式，每页的最大记录1000条，所以代码里指定了1000。博客文章数超过1000貌似要写很久很久，就没有做进一步的处理
2. 在_config.yml站点网址的时候，使用了http协议，而登陆自动生成规则使用的是https协议，导致过滤手动初始化的判断一直有问题(一个s引发的血案)。通过去除链接里的协议，然后比较进行解决，兼容了http和https;
3. Gitalk在页面登陆初始化的时候，默认生成的issue label是链接的path，最开始处理的是直接使用链接，与默认规则生成的在一起很不统一，就全部处理为path
4. 代码完成后，测试发现并不是每次生成都会成功，也没有错误，测试调试尝试各种办法，花了一个多小时，发现部署完成后，最少需要等待40秒，才可以正确完成issue的初始化， 怀疑跟github的api有关系，没有找到实锤，知道原因或者有更好的解决方案可以在下面留言给我，谢谢
5. sitemap.xml没有使用网站部署后的，因为想在部署后，直接执行脚本进行初始化，而deploy命令执行后，通过网络获取sitemap.xml不是最新的，具体更新时间没有规律，所有选择了读取本地生成在public下的sitemap.xml获取最新的链接，确保初始化顺利完成。

参考

Gitment/Gitalk自动初始化

自动初始化 Gitalk 和 Gitment 评论