Cómo agregar el sistema de comentarios gitalk a su sitio web

Cómo agregar el sistema de comentarios gitalk a su sitio web

Escribir un sistema de comentarios por su cuenta será más complicado y la información del usuario debe administrarse. Es mejor usar la información de usuario de github directamente.
Gitalk es un complemento que implementa dichos comentarios.

El efecto es el siguiente:
inserte la descripción de la imagen aquí

1. Método de instalación

La introducción en la descripción oficial de gitalk es relativamente clara, solo mírala directamente, de la siguiente manera

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

Acabo de decir algo sobre el proceso de creación de una aplicación de GitHub que no presentó.

2. Crear aplicación GitHub

1. Abra el sitio web de github, haga clic en su avatar y busque la configuración

inserte la descripción de la imagen aquí

2. Abra la configuración del desarrollador

Busque la configuración del desarrollador en el lado izquierdo de la página de configuración

inserte la descripción de la imagen aquí

3. Cree una nueva aplicación OAuth

inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
Authorization callback URLSimplemente complete Homepage URLel mismo contenido que , que es la dirección a la que saltar después de que el usuario autorice iniciar sesión. Por supuesto, es para que vuelva a la dirección original.

3. Ejemplos

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

Cabe señalar que la biblioteca enlazada debe ser pública y puede crear una biblioteca separada para guardar comentarios.

Todos los comentarios aparecerán en el número

inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/KimBing/article/details/129947309
Recomendado
Clasificación