【Gitalk】网站中加入Gitalk评论系统

Cheng_Blog

发布于 2022-02-25 09:15:49

5040

发布于 2022-02-25 09:15:49

文章被收录于专栏：Cheng's Blog

1. 效果预览

2. 注册github应用

进入github注册页面：Register a new OAuth application
Application name：应用名
Homepage URL：网站地址
Application description：应用描述
Authorization callback URL：网站地址

注册成功后会生成Client ID和Client Secret

3. 创建评论仓库

进入github创建仓库页面：Create a new repository
Repository name：仓库名

4. 页面配置

4.1 引用js,css文件

<!-- 引入gittalk评论插件 start -->
    <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>
    <!-- 引入gittalk评论插件 end -->

4.2 添加容器

<-- 添加一个容器-->
<div id="gitalk-container"></div>

4.3 添加js代码来生成 gitalk 插件：

 //生成 gitalk 插件
    var gitalk = new Gitalk({
        clientID: 'f53240a793ca5b295f', //Client ID
        clientSecret: '4d23741e09d116bf26d0e5c2639496391b368', //Client Secret
        repo: '*****',//仓库名称
        owner: '*****',//仓库拥有者
        admin: ['*****'], //你的Git用户名
        id: window.location.pathname,      // 页面ID，不知道就默认的就好了
        distractionFreeMode: true,  //是否启用评论全屏遮罩.
        createIssueManually: false, //如果当前页面没有相应的 isssue ，且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
        perPage: 15, //每页多少个评论
        pagerDirection: // #排序方式是从旧到新（first）还是从新到旧（last）
    });
    gitalk.render('gitalk-container');

参数配置：

clientID String 必须. GitHub Application Client ID.
clientSecret String 必须. GitHub Application Client Secret.
repo String 必须. GitHub repository.
owner String 必须. GitHub repository 所有者，可以是个人或者组织。
admin Array 必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
id String Default: location.href. 页面的唯一标识。长度必须小于50。
number Number Default: -1. 页面的 issue ID 标识，若未定义number属性则会使用id进行定位。
labels Array Default: ['Gitalk']. GitHub issue 的标签。
title String Default: document.title. GitHub issue 的标题。
body String Default: location.href + header.meta[description]. GitHub issue 的内容。
language String Default: navigator.language || navigator.userLanguage. 设置语言，支持 [en, zh-CN, zh-TW]。
perPage Number Default: 10. 每次加载的数据大小，最多 100。
distractionFreeMode Boolean Default: false。类似Facebook评论框的全屏遮罩效果。
pagerDirection String Default: 'last' 评论排序方式， last为按评论创建时间倒叙，first为按创建时间正序。
createIssueManually Boolean Default: false. 如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
proxy String Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token. GitHub oauth 请求到反向代理，为了支持 CORS。
enableHotKey Boolean Default: true. 启用快捷键(cmd|ctrl + enter) 提交评论。
flipMoveOptions Object Default: { staggerDelayBy: 150, appearAnimation: 'accordionVertical', enterAnimation: 'accordionVertical', leaveAnimation: 'accordionVertical', }

#更多GitHub REST API v3 GitHub 提供了很多方便第三方开发的 API，当然，github issues 的增删改查 API 也在其中，有了这些 API，你才能各种施展奇技淫巧，比如我们现在要写的评论系统。另外，有人怀疑我们应不应该“滥用”这些 API，但是，个人觉得，既然，GitHub 提供了这些 API，就是说明要开放给大家这些权限，应该就不怕你“滥用”。那么，要满足我们现在的需求需要哪些 API 呢，下面我列举一下，:owner 为 Github 名，:repo 为仓库名，:issue_number为issue编号。

GET: https://api.github.com/repos/:owner/:repo/issues 获取所有issues信息

GET: https://api.github.com/repos/:owner/:repo/issues/:issue_number 获取某个issue下的信息（11 为 issue 编号）

GET: https://api.github.com/repos/:owner/:repo/issues/:issue_number/comments 获取某个issue下的评论

GET: https://api.github.com/repos/:owner/:repo/issues/comments/111/reactions 获取评论 ID 为 111 下的所有 reactions（reactions 包含顶[+1]、踩[-1]、喜欢[heart]等字段）

POST: https://api.github.com/repos/:owner/:repo/issues 创建一个 issue

POST: https://api.github.com/repos/:owner/:repo/issues/:issue_number/comments 在传入编号的 issue 下创建一条评论

POST: https://api.github.com/repos/:owner/:repo/issues/comments/111/reactions 在 ID 为 111 的评论下创建一条 reactions（如 heart）

POST：https://developer.github.com/v3/markdown/markdown 语法解析接口