博客添加Gitalk评论

正文

关于Gitalk

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

• 使用 GitHub 登录
• 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
• 支持个人或组织
• 无干扰模式（设置 distractionFreeMode 为 true 开启）
• 快捷键提交评论 （cmd|ctrl + enter）

在线演示

使用

创建一个Github Application

如果没有 点击申请，也可以

Github头像下拉菜单 > Settings > 左边Developer settings下的OAuth Application > Register a new application，填写相关信息：

点击创建，获得Client ID和Client Secret。

配置gitalk

将下面这段代码插入到你的网站，
或创建一个gitalk.html直接调用

{{ partial "gitalk.html" . }}

代码如下：

<!-- 评论系统 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<!-- 配置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的标签',
    //其他参数
    distractionFreeMode: false // 全屏遮罩,jia
  });
  gitalk.render('gitalk-container');
</script>

<div id="gitalk-container"></div>

推送到 Github 仓库

没什么问题的话，当你点击进入你的博客页面后就会出现评论框了。

当你用 github 帐号登录（管理员），并且第一次加载该会比较慢，因为第一次加载会自动在你 repo 的仓库下创建对应 issue。

链接与资源

Github gitalk

相关

[Gitalk出现Error:Validation Failed问题的解决办法]({{< ref “post/gitalk-Validation-Failed/index.md” >}})

[Gitalk出现Error: Comments Not Initialized问题的解决办法]({{< ref “post/gitalk-initialize/index.md” >}})
italk-Validation-Failed/index.md" >}})

[Gitalk出现Error: Comments Not Initialized问题的解决办法]({{< ref “post/gitalk-initialize/index.md” >}})