据说,有代码的文章就不会被看出来是水文了。

什么是gitalk

Gitalk是某个大佬做的基于 Github Issue 和 Preact 开发的评论插件,类似gitment。
并且支持markdown语法,棒棒哒!
对于一些没有评论的博客程序,比如Hexo,就很有用。
当然也可以加在纯手写的静态页面里,目前我实验室就是用的这个插件。

为静态页面加入gitalk

首先放出gitalk演示地址:https://gitalk.github.io/

然后我们来了解一下插入gitalk的code:

<!-- 引入gitalk样式及js -->

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<!-- gitalk评论div所处位置 -->
<div id="gitalk-container"></div>

<!-- 主要是gitalk的参数 -->
    <script type="text/javascript">
    var gitalk = new Gitalk({

    // gitalk的主要参数
        clientID: `Github Application clientID`,
        clientSecret: `Github Application clientSecret`,
        repo: `存储你评论 issue 的 Github 仓库名`,
        owner: 'Github 用户名',
        admin: ['Github 用户名'],
        id: '页面的唯一标识,gitalk会根据这个标识自动创建的issue的标签',
    
    });
    gitalk.render('gitalk-container');
</script>

然后我们需要关心的就是这个部分:

    // gitalk的主要参数
        clientID: `Github Application clientID`,
        clientSecret: `Github Application clientSecret`,
        repo: `存储你评论 issue 的 Github 仓库名`,
        owner: 'Github 用户名',
        admin: ['Github 用户名'],
        id: '页面的唯一标识,gitalk会根据这个标识自动创建的issue的标签',

前两个参数你可能看不懂,我们之后再说,先看后面4个。

        repo: `存储你评论 issue 的 Github 仓库名`,
        owner: 'Github 用户名',
        admin: ['Github 用户名'],
        id: '页面的唯一标识,gitalk会根据这个标识自动创建的issue的标签',

这些应该能理解吧,先创建一个github仓库,
repo填写这个仓库名,owner填你的github用户名,admin如果你不懂,可以只填你的名字,管理员其实可以有多个
id就是用于区分不同的页面,用于创建&读取issue,没有这个的话每个页面就都是同一个评论了
id就可以随便填写,只要保证每个页面不重复,我一般是写的页面的相对地址,例如:page/1.html

如果你是用什么程序建站的话,就需要一个变量,比如:文章的cid,文章所在的链接。
例如Typecho输出cid的方式为:<?php $this->cid() ?>,id里就可以填写这个

然后就是前面两个参数了,首先你需要申请一个Github Application

依次来:
第一个填你的网站名称
第二个填你的首页地址
第三个填你的一句简介
第四个也是填首页地址

然后就可以了,注意协议头也要填进去,点击Register Application

然后就会跳转到这个页面,复制里面的clientIDclientSecret,然后填进之前的参数里,就好啦!

刚开始把代码放进页面时,会需要初始化,用你的github账号登录一下就OK啦!

现在我们来看下效果:

申请Application的时候,首页地址和回调地址千万不要填错,包括协议头,否则会出现无法登录的错误。
Gitalk创建Issue的时候会自动读取页面title作为Issue的名称,所以title千万不能太长。