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}<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 评论

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值