如何给自己的网站添加 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 应用的 ClientID
            clientSecret: '---', // 填写上方生成的 OAuth 应用的 Client Secret
            repo: '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 中