返回

Markdown评论系统Gitalk设置入门指南:让你的网站支持用户交流

前端

用 Gitalk 为你的个人网站添加用户评论功能

集成评论功能的优势

为个人网站集成评论功能不仅可以提高用户参与度,增强网站活跃度,而且还有助于收集用户反馈,指导网站的持续改进。 Gitalk 是一个免费开源的评论系统,可轻松集成到个人网站中,且评论数据安全存储在 GitHub 仓库中。

Gitalk 安装指南

1. 创建 GitHub 仓库

首先,在 GitHub 上登录并创建一个新仓库。

2. 克隆仓库到本地

将 Gitalk 仓库克隆到本地计算机。

3. 将 Gitalk 文件夹复制到网站根目录

将克隆的 Gitalk 文件夹复制到网站的根目录。

4. 创建 config.js 文件

在网站根目录下,创建一个名为 config.js 的文件。

5. 配置 config.js 文件

在 config.js 文件中添加以下代码,并用自己的信息替换 YOUR_CLIENT_ID、YOUR_CLIENT_SECRET、YOUR_REPO 和 YOUR_OWNER:

module.exports = {
  clientID: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET',
  repo: 'YOUR_REPO',
  owner: 'YOUR_OWNER'
};

6. 修改网站模板文件

在网站模板文件中,添加以下代码:

<script src="/gitalk/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>

<script> 代码添加到 <head> 标签中,将 <div> 代码添加到 <body> 标签中。

Gitalk 配置

1. 将仓库协作者添加到 GitHub

在 GitHub 上打开创建的 Gitalk 仓库,然后将你的用户名添加到 Collaborators 部分。

2. 添加 Webhook

在 Webhooks 部分,点击添加 Webhook 按钮,在 Payload URL 字段中输入 http://你的网站域名/gitalk/webhook,选择 Content type 为 application/json,然后点击添加 Webhook 按钮。

Gitalk 使用指南

1. 在文章页面添加评论容器

在你的文章页面中,添加以下代码:

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

<div> 代码添加到 <body> 标签中。

2. 创建 issue_body.md 文件

在网站根目录下,创建一个名为 issue_body.md 的文件。

3. 配置 issue_body.md 文件

在 issue_body.md 文件中添加以下代码,并用文章标题和内容替换文章标题和文章内容:

---
title: 文章标题
---

文章内容

4. 保存 issue_body.md 文件

保存 issue_body.md 文件。

现在,当用户访问你的文章页面时,他们将看到评论框,可以发表和回复评论。

常见问题解答

1. Gitalk 是否免费?

是的,Gitalk 是一个免费开源的评论系统。

2. 如何存储评论数据?

Gitalk 的评论数据存储在 GitHub 仓库中,非常安全可靠。

3. 我可以自定义评论外观吗?

可以,Gitalk 提供了多种选项来自定义评论外观,包括颜色、字体和布局。

4. Gitalk 是否支持 Markdown?

是的,Gitalk 支持 Markdown,用户可以在评论中使用 Markdown 语法。

5. 如何修复 Gitalk 评论加载失败的问题?

确保已正确配置 Gitalk,并检查 GitHub Webhook 是否已正确设置。