vue中使用gitalk，给自己的博客加个评论。

r囧r小猫 2023-06-22 13:54 83阅读 0赞

先贴个官方中文说明，[https://github.com/gitalk/gitalk/blob/master/readme-cn.md][https_github.com_gitalk_gitalk_blob_master_readme-cn.md]

1.引入

有俩种引入方式，这里我用了第一种，省事，而且节约你服务器空间！

在你的index.html中引入

2.申请GitHub Application

重点说明一下，你必须得是上线的项目才可以申请，无线上项目申请的最后出不来。

申请地址，[https://github.com/settings/applications/new][https_github.com_settings_applications_new] ，如下图

![format_png][]

注册成功，在下图中你会找到你的注册好的应用，我的应用如下图

![format_png 1][]

此时，你需要记住上图中的Client ID和Client Secret。

3.在github创建一个新的仓库，在issues中存这些评论，我的新仓库如下图

![format_png 2][]

名字没必要和你的应用名称一样。

4.应用

在你需要写评论的位置加入

<div class="social-section">

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

</div>

var gitalk = new Gitalk({
        clientID: '你的Client ID',
        clientSecret: '你的Client Secret',
        repo: '你的新创建仓库名称',
        owner: '新仓库所属人',
        admin: ['新仓库的所属人'],//如果此仓库有多个开发中，以数组的格式加入
        id: location.pathname //用于标记评论是哪个页面的，确保唯一，并且长度小于50
    })

5.效果图！

![format_png 3][]

点击绑定即可，此处当时遇到坑，跳转到绑定页面就没有反应了，如果大家出现此问题，换台网络好的电脑再试试！

终极效果如下图

![format_png 4][]

6.查看评论

到你新创建的仓库中，在issues中即可看到

![format_png 5][]

### 加入我们群 ###

如果有需要，欢迎可以加入我们的QQ群！（QQ搜索 816175200，加入我们的QQ群吧！）  
有任何问题，也可以加入我们的QQ群，欢迎交（che）流（dan）！也欢迎参观我的博客[www.aquestian.cn][]！

[https_github.com_gitalk_gitalk_blob_master_readme-cn.md]: https://github.com/gitalk/gitalk/blob/master/readme-cn.md
[https_github.com_settings_applications_new]: https://github.com/settings/applications/new
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MTIvMjAxOTEyMTYxNDAxMzU0MTMucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MTIvMjAxOTEyMTYxNDA0MjE3MDUucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MTIvMjAxOTEyMTYxNDE5NTE0OTkucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MTIvMjAxOTEyMTYxNDIyMzQ2NTEucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MTIvMjAxOTEyMTYxNDI1NTg1MjMucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MTIvMjAxOTEyMTYxNDI3MzkxNTYucG5n?x-oss-process=image/format,png
[www.aquestian.cn]: http://www.aquestian.cn