如何给自己的网站添加 gitalk 评论系统
如何给自己的网站添加 gitalk 评论系统
自己写评论系统会比较复杂,需要管理用户信息等。不如直接使用 github 的用户信息。
gitalk 就是实现这种评论的插件。
- https://github.com/gitalk/gitalk
效果如下:
一、安装方法
在 gitalk 的官方说明中介绍的比较清楚了,直接看那个就行,如下
https://github.com/gitalk/gitalk/blob/master/readme-cn.md
我只说一些它没有介绍到的 关于创建 GitHub Application 的过程。
二、创建 GitHub Application
1. 打开 github 网站,点击自己头像,找到 setting
2. 打开 Developer Setting
在 setting 页面的左侧找到 Developer Setting
3. 新建一个 OAuth 应用
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 中