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

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

前言

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

Gitalk官网java

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

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

遇到的问题

Gitalk配置完成后,启动hexo,打开文章页面,会出现以下的界面,须要登录github,完成初始化后才能使用github

image.png

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

缘由:npm

  1. 发布的时候,每次执行这个脚本,都会为每一个连接 建立一个issue,并无对已经建立的作过滤。
  2. ruby手生,改不动

如此如此,只能本身动手了,nodejs大法。json

解决问题

生成sitemap站点地图

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

  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按钮

    image.png

  3. 输入一个描述,为token添加全部的repo权限,而后点击最下方的Generate token按钮,就能够生成一个新的Token备用

    image.png
    生成的token,在后面使用
    image.png

脚本文件

  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}<br><br>${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 评论

相关文章
相关标签/搜索