> 文章列表 > 如何给自己的网站添加 gitalk 评论系统

如何给自己的网站添加 gitalk 评论系统

如何给自己的网站添加 gitalk 评论系统

如何给自己的网站添加 gitalk 评论系统

自己写评论系统会比较复杂,需要管理用户信息等。不如直接使用 github 的用户信息。
gitalk 就是实现这种评论的插件。

  • https://github.com/gitalk/gitalk

效果如下:
如何给自己的网站添加 gitalk 评论系统

一、安装方法

在 gitalk 的官方说明中介绍的比较清楚了,直接看那个就行,如下

https://github.com/gitalk/gitalk/blob/master/readme-cn.md

我只说一些它没有介绍到的 关于创建 GitHub Application 的过程。

二、创建 GitHub Application

1. 打开 github 网站,点击自己头像,找到 setting

如何给自己的网站添加 gitalk 评论系统

2. 打开 Developer Setting

在 setting 页面的左侧找到 Developer Setting

如何给自己的网站添加 gitalk 评论系统

3. 新建一个 OAuth 应用

如何给自己的网站添加 gitalk 评论系统
如何给自己的网站添加 gitalk 评论系统
Authorization callback URL 填写跟 Homepage URL 一样的内容就可以,就是在用户授权登录之后跳转到的地址,当然是要让它跳转回原来的地址喽。

三、例子

<template><Card stitle=""><div id="gitalk"></div></Card>
</template><script>import Card from "@/components/Card";
import 'gitalk/dist/gitalk.css'
import Gitalk from "gitalk";export default {name: "CardGiTalk",components: {Card},data(){return {}},mounted() {const gitalk = new Gitalk({clientID: '---', // 填写上方生成的 OAuth 应用的 ClientIDclientSecret: '---', // 填写上方生成的 OAuth 应用的 Client Secretrepo: 'comments',    // 下方用户的一个仓库名称,需要是公开的状态,比如我就建了一个名为 comments 的仓库。owner: 'KyleBing',admin: ['KyleBing'],id: 'kylebing/comments', // 这个是出现在 issue 中评论的标签distractionFreeMode: false,language: 'zh-CN'   // 界面语言})gitalk.render('gitalk')},unmounted() {},computed: {},methods: {}
}</script><style scoped lang="scss">
#gitalk{width: 100%;
}
</style>

四、结果

需要注意的是,绑定的库需要是公开的,你可以单独创建一个库用来盛放评论内容。

所有的评论都会出现在 issue 中

如何给自己的网站添加 gitalk 评论系统