How to add gitalk comment system to your website

Writing a comment system by yourself will be more complicated, and user information needs to be managed. It is better to use the user information of github directly.
Gitalk is a plugin that implements such comments.

https://github.com/gitalk/gitalk

The effect is as follows:
insert image description here

1. Installation method

The introduction in the official description of gitalk is relatively clear, just look at that directly, as follows

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

I just said something about the process of creating a GitHub Application that it didn't introduce.

2. Create GitHub Application

1. Open the github website, click on your avatar, and find the setting

insert image description here

2. Open the Developer Settings

Find Developer Setting on the left side of the setting page

insert image description here

3. Create a new OAuth application

insert image description here

Authorization callback URLJust fill in Homepage URLthe same content as , which is the address to jump to after the user authorizes to log in. Of course, it is to make it jump back to the original address.

3. Examples

<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>

4. Results

It should be noted that the bound library needs to be public, and you can create a separate library to hold comments.

All comments will appear in issue

insert image description here