Gitalk插件

注册github Application

首先需要注册 GitHub Application，链接如下：https://github.com/settings/applications/new

你需要

• 填写Application name，起一个应用名；
• 填写Homepage URL，也就是你的博客地址；
• 填写Authorization callback URL，也就是回调地址，通常为你的博客地址。

填写完成后，点击绿色按钮注册即可。

配置好之后会出现如下页面，点击Generate a new client secret生产新的密钥，Client ID和Client secret在后面配置时需要用到。

//client ID: dd3f222c3d92b724e9ef

Client secrets : 2da7173ce247b5697e5c7e253c69444b7f1faf18

准备仓库

准备一个github上的仓库并打开issues（创建的仓库一般默认是打开issues）

登录github并创建一个新的repo，用于存储评论内容,记录下仓库的名字后需配置使用(此处使用 gitalk-comments)

在项目中安装gitalk库

此处使用的是vitepress ，已经存在nodejs环境，所以直接在项目中安装依赖库

npm i --save gitalk

或者使用cnpm安装

cnpm i --save gitalk

简单使用

在markdown文档中使用

将如下代码添加到每个markdown中使用，这样该文章就获得了gitlak的能力。

<script setup>
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";
import { onMounted } from 'vue';
onMounted(() => {
  if(typeof window !==undefined){
    var s_div = document.createElement('div');   // 创建节点
    s_div.setAttribute("id", "gitalk-page-container");   // 设置id
    document.querySelector('.content-container').appendChild(s_div);   // querySelector的节点可自己根据自己想加载的地方设置
    var gitalk = new Gitalk({  //（上面的都不要改，从这里开始填写信息）
        clientID: 'dd3*************e9ef',          // 填写之前创建OAuth App保存的clientID
        clientSecret: '2da717*************************b7f1faf18',  // 填写之前创建OAuth App保存的clientSecret
        repo: 'gitalk-comments',          // 填写你用于存放评论的仓库名，注意需要仓库打开了issues功能（一般默认打开）
        owner: 'jshand',   // 填写你的github用户名
        admin: ['jshand'], // 填写github管理者列表
        id: decodeURI(location.pathname),      // 不变，Ensure uniqueness and length less than 50
        distractionFreeMode: false  // 不变，Facebook-like distraction free mode
    })
    gitalk.render('gitalk-page-container')
  }
})
</script>

封装成组件使用

上述代码在每个markdown文档中中添加一遍比较繁琐，由于vitepress会把每个markdown都解析成一个vue组件，所以把上述代码注册成全局组件，然后每个markdown使用调用组件就可以实现同样的功能，类似于在任意组件页面使用ElementPlus的功能

操作方法是：

• 重写默认主题
• 在主题下扩展并定义全局组件
• 在markdown中使用全局组件

定义组件

将简单使用中的代码封装成一个Vue组件 放置位置在 docs\.vitepress\theme\GitalkComponent.vue(其实放置在任意位置都行，只要相对主题 index.ts文件能够定位到就可以)。

定义主题文件并扩展

在 .vitepress/theme/index.ts文件中定义主题并扩展，此文件名固定不可改，具体请参考vitepress定义全局组件

vue

<!-- docs\.vitepress\theme\GitalkComponent.vue -->
<template>
     
</template>

<script setup >
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";
import { onMounted ,onBeforeUnmount} from 'vue';
let gpc = null;
onMounted(() => {
  if(typeof window !==undefined){
    gpc = document.createElement('div');   // 创建节点
    gpc.setAttribute("id", "gitalk-page-container");   // 设置id
    // querySelector的节点可自己根据自己想加载的地方设置,此处放置到 vitepress 渲染的每个markdown内容的footer之后
    document.querySelector('.content-container').appendChild(gpc);   
    let gitalk = new Gitalk({  //（上面的都不要改，从这里开始填写信息）
         clientID: 'dd3*************e9ef',          // 填写之前创建OAuth App保存的clientID
        clientSecret: '2da717*************************b7f1faf18',  // 填写之前创建OAuth App保存的clientSecret
        repo: 'gitalk-comments',          // 填写你用于存放评论的仓库名，注意需要仓库打开了issues功能（一般默认打开）
        owner: 'jshand',   // 填写你的github用户名
        admin: ['jshand'], // 填写github管理者列表
        id: decodeURI(location.pathname),      // 不变，Ensure uniqueness and length less than 50
        distractionFreeMode: false  // 不变，Facebook-like distraction free mode
    })
    gitalk.render('gitalk-page-container')
  }
})

//在markdown卸载的时候 移出当前gitalk组件
onBeforeUnmount(()=>{
    gpc.remove();
})
</script>

ts

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import GitalkComponent from './GitalkComponent.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册自定义全局组件
    app.component('GitalkComponent' ,GitalkComponent)
  }
} satisfies Theme

最后在想要添加gitalk的markdown文档最后添加全局组件标签 <GitalkComponent></GitalkComponent>

效果

最后如下图所示效果，说明gitalk可以使用。快来留言吧