Nuxt.js开发中碰到的问题（二）引入gitment评论系统

胖猫起飞
441 阅读3分钟

博客原文链接

概述

在初步完成功能之后就想着加上评论功能，最开始是想自己实现一个，但是综合考虑之后，还是决定引入 gitment 这个成熟的评论系统代替；

虽然之前在项目中有实现评论系统的相关经验，但也只是从前端的角度实现，对于评论的数据库设计这块不太了解，还不足以支持我实现一个完整的评论系统；

准备工作

一、注册 OAuth Application

注册入口

注册示例

Applicetion name 和 Applicetion description 根据自己的项目填写即可，Homepage URL 填写项目主页，Authorization callback URL 必须填写项目的地址，gitment会根据地址去issue内创建评论；

注册完成之后会得到如下的 Client ID 和 Client Secret，稍后gitment初始化会用到；

注册示例

二、创建评论组件

  1. 通过 npm 安装 gitment；
npm i -S gitment
  1. 通过 import 方式引入 gitment 及样式 之后，在 mounted 函数内进行初始化；

注意：必须在组件的 DOM 渲染之后才能初始化，否则会由于找不到评论的根 DOM 报错；其实最初设想是将评论作为插件的形式引入，但由于插件会在主页就运行，而如果不是在详情页，评论的根 DOM 并未渲染，进而引发报错，最后，还是选择了在组件内部初始化；

初始化时，id为可选值，不填会默认，后来发现一个问题：如果采用默认值，那么在我编辑完文章后再次提交，gitment会将该文章识别为新文章，需要再次初始化，也会再次创建一个新的issue，所以我还是将文章路径作为了唯一id，防止重复初始化。

<!-- 创建了一个 Comment.vue 组件 -->
<template>
  <div id="comment-container"></div>
</template>

<script>
import Gitment from 'gitment'
import 'gitment/style/default.css'

export default {
  mounted () {
    const gitment = new Gitment({
      id: '给一个唯一标识，可选', // optional
      owner: 'nekoleamo', // GitHub ID
      repo: 'blog-comment', // Github 仓库名
      oauth: {
        client_id: '', // Your client ID
        client_secret: '', // Your client secret
      }
    })

    gitment.render('comment-container')
  }
}
</script>

<style lang="less" scoped>
#comment-container {
  background: #fff;
  padding: 20px;
}
</style>

三、引入组件

由于我的博客使用的是 Nuxt.js，如果直接引用的话服务端由于没有 window对象 会报错，所以在服务端渲染时不需要引入评论系统的组件；

而我们由于上一条的原因无法已插件形式禁止评论的ssr，Nuxt.js 提供了 <no-ssr></no-ssr> 组件来禁止组件的ssr，如下图所示的方式引入即可；

引入组件

四、总结

引入完成之后，每次发表新的文章时，为了让 gitment 创建新的 issue，需要手动在页面里初始化一下；

在网上查资料时并未找到 Vue 引入的相关文章，更不用说 Nuxt.js 了，基本都是直接引入 js 文件的形式，所以也走了一些弯路，好在多次尝试之后还是实现了；

最后，感谢 gitment 的作者 imsun 为我们带来如此优秀的开源评论插件；

参考资料

作者博客

avatar
文章
阅读
粉丝