Gitalk 评论组件安装和配置指南

Gitalk 评论组件安装和配置指南

gitalk Gitalk is a modern comment component based on Github Issue and Preact. 项目地址: https://gitcode.com/gh_mirrors/gi/gitalk

1. 项目基础介绍和主要编程语言

项目介绍

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的现代评论组件。它允许用户通过 GitHub 账号进行身份验证，并将评论存储为 GitHub Issue。Gitalk 支持多种语言，并提供类似 Facebook 的无干扰模式。

主要编程语言

Gitalk 项目主要使用以下编程语言和工具：

• JavaScript
• HTML
• Stylus

2. 项目使用的关键技术和框架

关键技术和框架

• GitHub Issue: 用于存储评论。
• Preact: 一个轻量级的 React 替代品，用于构建用户界面。
• GitHub OAuth: 用于用户身份验证。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

1. GitHub 账号: 你需要一个 GitHub 账号来使用 Gitalk。
2. GitHub 仓库: 创建一个公共的 GitHub 仓库来存储评论。
3. GitHub OAuth 应用: 创建一个 GitHub OAuth 应用，获取 clientID 和 clientSecret。

详细安装步骤

步骤 1: 创建 GitHub OAuth 应用

1. 登录你的 GitHub 账号。
2. 进入 GitHub Developer Settings。
3. 点击 "New OAuth App"。
4. 填写应用信息：
   • Application name: 例如 "Gitalk Comments"。
   • Homepage URL: 你的网站首页 URL。
   • Authorization callback URL: 你的网站首页 URL。
5. 点击 "Register application"，获取 clientID 和 clientSecret。

步骤 2: 安装 Gitalk

你可以通过 CDN 或 npm 安装 Gitalk。

通过 CDN 安装:

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

通过 npm 安装:

npm install --save gitalk

步骤 3: 配置 Gitalk

在你的网页中添加一个容器来放置评论组件：

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

然后使用 JavaScript 代码初始化 Gitalk：

const gitalk = new Gitalk({
  clientID: '你的 GitHub Application Client ID',
  clientSecret: '你的 GitHub Application Client Secret',
  repo: '你的 GitHub 仓库名称',
  owner: '你的 GitHub 用户名',
  admin: ['你的 GitHub 用户名'],
  id: location.pathname, // 确保唯一性且长度小于 50
  distractionFreeMode: false // 无干扰模式
});

gitalk.render('gitalk-container');

步骤 4: 运行和测试

保存并上传你的网页文件，访问页面查看 Gitalk 评论组件是否正常工作。

总结

通过以上步骤，你可以成功安装和配置 Gitalk 评论组件。Gitalk 是一个简单易用的评论系统，适合个人博客、文档网站等场景。

gitalk Gitalk is a modern comment component based on Github Issue and Preact. 项目地址: https://gitcode.com/gh_mirrors/gi/gitalk