使用 Gitalk 搭建评论区

2024年05月31日技术

前言

我这博客也是建立了许久，但始终没有任何的反馈还是令我没有一点更新的动力，因此我决定要为我的博客添加一个评论区！

经过一番挑选，最终决定使用 Gitalk 来进行评论区的搭建

至于为什么选择 Gitalk，理由也相当简单，仅仅因为我看其他很多人使用的是 Gitalk（

以下为基于 Hexo 与 Nexmoe 进行的教程，如果您使用的是其他博客系统或主题，也可以参阅本文作为参考

操作

1. 创建一个 Github OAuth Apps

进入 Github 点击右上角头像，【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】

创建完成后，你应当获得 Client ID 和 Client secrets 并将其记录

2. 博客相关配置

我所使用的博客主题 Nexmoe 中提供了**插槽**功能，以下 Gitalk 的安装与配置也基于此功能进行

找到博客根目录下的 _config.nexmoe.yml 文件并找到以下设置项进行以如下修改，将【】内的内容根据自己情况进行更改（修改后不含【】）

slotHead: |
  <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>
  
slotComment: |
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '【由上一步获取】',
      clientSecret: '【由上一步获取】',
      repo: '【GitHub仓库名】',
      owner: '【GitHub用户名】',
      admin: ['【GitHub用户名】'],
      id: location.pathname,      // Ensure uniqueness and length less than 50
      distractionFreeMode: false  // Facebook-like distraction free mode
    })
    gitalk.render('gitalk-container')
  </script>

以下为示例

slotHead: |
  <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>
  
slotComment: |
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '手动打码',
      clientSecret: '手动打码',
      repo: 'Blog',
      owner: 'windowBR',
      admin: ['windowBR'],
      id: location.pathname,      // Ensure uniqueness and length less than 50
      distractionFreeMode: false  // Facebook-like distraction free mode
    })
    gitalk.render('gitalk-container')
  </script>

重新生成博客内容，然后打开博客文章，在评论区登录你的 GitHub 账号后会自动进行初始化，初始化完成后你应当看到类似如下样式代表评论区搭建完成：

每一篇文章都需要单独初始化，或者你也可以自己写一个初始化脚本来进行

3. 我不是 Hexo 或 Nexmoe 的用户，我应该怎么办

使用任何合适的方式在你的文章页面中插入以下 HTML 标签（两种方案任选其一，推荐放在 <head><head/> 标签中）

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

<!-- or -->

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

然后在你希望插入评论区的地方插入以下 HTML 标签

<div id="gitalk-container"></div>
<script type="text/javascript">
  var gitalk = new Gitalk({
    clientID: '手动打码',
    clientSecret: '手动打码',
    repo: 'Blog',
    owner: 'windowBR',
    admin: ['windowBR'],
    id: location.pathname,      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
  })
  gitalk.render('gitalk-container')
</script>

再按照上方说明初始化评论区后搭建完成

文章分类

文章归档

使用 Gitalk 搭建评论区

前言

操作

1. 创建一个 Github OAuth Apps

2. 博客相关配置

3. 我不是 Hexo 或 Nexmoe 的用户，我应该怎么办