为你的VuePress博客添加GitTalk评论

前端

2023-12-07 17:12:49

在技术博客中，评论区是读者与作者进行交流的重要途径。它不仅可以帮助作者了解读者的想法和建议，还能激发新的灵感和话题。然而，传统的评论系统往往存在着各种各样的问题，比如加载速度慢、评论质量差、垃圾评论多等。

GitTalk是一个开源的评论系统，它以其轻量、快速、易用等优点受到了众多开发者的喜爱。同时，GitTalk还支持多种语言，其中就包括中文。因此，它是VuePress博客评论系统的绝佳选择。

本文将详细介绍如何在你的VuePress博客中添加GitTalk评论。

1. 创建一个 OAuth Apps

首先，你需要创建一个OAuth Apps。

访问GitHub Oauth App Registration页面。
在“Application name”字段中输入你的应用名称。
在“Homepage URL”字段中输入你的博客地址。
在“Authorization callback URL”字段中输入https://你的博客地址/api/auth/callback/github。
单击“Register application”按钮。

2. 创建评论组件

接下来，你需要创建一个评论组件。

在你的VuePress项目中创建一个名为Comment.vue的文件。
在Comment.vue文件中添加以下代码：

<template>
  <div class="comment">
    <div class="comment-header">
      <div class="comment-author">
        <img :src="author.avatar_url" alt="作者头像">
        <span>{{ author.login }}</span>
      </div>
      <div class="comment-date">{{ comment.created_at }}</div>
    </div>
    <div class="comment-content" v-html="comment.body_html"></div>
  </div>
</template>

<script>
export default {
  props: ['comment'],
  data() {
    return {
      author: null
    }
  },
  mounted() {
    this.getAuthor()
  },
  methods: {
    getAuthor() {
      const url = `https://api.github.com/users/${this.comment.user.login}`
      fetch(url)
        .then(res => res.json())
        .then(data => {
          this.author = data
        })
    }
  }
}
</script>

<style>
.comment {
  padding: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ddd;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-author {
  display: flex;
  align-items: center;
}

.comment-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.comment-author span {
  margin-left: 8px;
}

.comment-date {
  font-size: 12px;
  color: #999;
}

.comment-content {
  margin-top: 8px;
  line-height: 1.5em;
}
</style>

3. 使用评论组件

最后，你需要在你的博客页面中使用评论组件。

在你的博客页面的模板文件中添加以下代码：

<div class="comments">
  <h2 class="comments-title">评论</h2>
  <div class="comments-list">
    <Comment v-for="comment in comments" :key="comment.id" :comment="comment"></Comment>
  </div>
  <div class="comments-form">
    <form @submit.prevent="submitComment">
      <div class="comments-form-author">
        <input type="text" placeholder="昵称" v-model="author">
      </div>
      <div class="comments-form-content">
        <textarea placeholder="评论内容" v-model="content"></textarea>
      </div>
      <div class="comments-form-submit">
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
</div>

在你的博客页面的脚本文件中添加以下代码：

import { createApp } from 'vue'
import Comment from './Comment.vue'

const app = createApp({
  data() {
    return {
      comments: [],
      author: '',
      content: ''
    }
  },
  methods: {
    submitComment() {
      const url = 'https://api.github.com/repos/你的仓库名/issues/create'
      const data = {
        title: '评论',
        body: this.content,
        labels: ['评论']
      }
      fetch(url, {
        method: 'POST',
        headers: {
          'Authorization': `token ${localStorage.getItem('access_token')}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
        .then(res => res.json())
        .then(data => {
          this.comments.push(data)
        })
    }
  }
})

app.component('Comment', Comment)

app.mount('#app')