Gitalk 创建教程及使用经验分享

Gitalk 是一个基于 GitHub Issue 的评论系统，非常适合用于静态博客。本文将介绍如何创建和配置 Gitalk，并分享我在使用过程中遇到的问题及解决方案。

1. 创建 GitHub OAuth 应用

首先，您需要在 GitHub 上创建一个 OAuth 应用，以便 Gitalk 能够访问 GitHub API。

1. 登录到 GitHub，进入 OAuth 应用设置。
2. 点击 “New OAuth App”。
3. 填写应用信息：

• Application Name: Gitalk
• Homepage URL: https://你的GitHub用户名.github.io
• Authorization callback URL: https://你的GitHub用户名.github.io

4. 点击 “Register application”。
5. 记下 Client ID 和 Client Secret，稍后需要用到。

2. 配置 Gitalk

在你的 Jekyll 项目中，打开 _config.yml 文件，添加以下配置：

gitalk:
  clientID: '你的客户端ID'
  clientSecret: '你的客户端密钥'
  repo: 'blog-comments'
  owner: '你的GitHub用户名'
  admin: ['你的GitHub用户名']
  distractionFreeMode: false

确保repo是你想要存储评论的 GitHub 仓库的名称，并且这个仓库是公开的。

3. 添加 Gitalk 到博客模板

在你的博客模板中，找到合适的位置插入 Gitalk 代码。例如，在content.html中的content后面添加以下代码：

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="//woshisb.eu.org/js/gitalk.m.js"></script>
<script>
  var gitalk = new Gitalk({
    clientID: '{{ site.gitalk.clientID }}',
    clientSecret: '{{ site.gitalk.clientSecret }}',
    repo: '{{ site.gitalk.repo }}',
    owner: '{{ site.gitalk.owner }}',
    admin: {{ site.gitalk.admin | jsonify }},
    id: location.pathname,      // Ensure uniqueness and length less than 50
    distractionFreeMode: {{ site.gitalk.distractionFreeMode }}
  });
  gitalk.render('gitalk-container');
</script>

4. 解决问题

在使用 Gitalk 时，我遇到了一些问题，特别是在加载和 OAuth 登录时。最终，通过将官方的 JavaScript 链接替换为以下内容，我成功解决了问题：

<script src="//woshisb.eu.org/js/gitalk.m.js"></script>

这样，Gitalk 能够正常登录和使用，避免了一些网络错误和 CORS 问题。

总结

通过以上步骤，您可以成功创建和配置 Gitalk 评论系统。如果您在使用过程中遇到问题，请参考我的解决方案，希望能对您有所帮助！