Nuxt.js开发中碰到的问题(二)引入gitment评论系统
博客原文链接
概述
在初步完成功能之后就想着加上评论功能,最开始是想自己实现一个,但是综合考虑之后,还是决定引入
gitment
这个成熟的评论系统代替;
虽然之前在项目中有实现评论系统的相关经验,但也只是从前端的角度实现,对于评论的数据库设计这块不太了解,还不足以支持我实现一个完整的评论系统;
准备工作
一、注册 OAuth Application
注册入口
Applicetion name
和Applicetion description
根据自己的项目填写即可,Homepage URL
填写项目主页,Authorization callback URL
必须填写项目的地址,gitment会根据地址去issue内创建评论;
注册完成之后会得到如下的
Client ID
和Client Secret
,稍后gitment初始化会用到;
二、创建评论组件
- 通过 npm 安装 gitment;
npm i -S gitment
复制代码
- 通过 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: '给一个唯一标识,可选', // optionalowner: 'nekoleamo', // GitHub IDrepo: 'blog-comment', // Github 仓库名oauth: {client_id: '', // Your client IDclient_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
为我们带来如此优秀的开源评论插件;
参考资料
作者博客
Nuxt.js开发中碰到的问题(二)引入gitment评论系统相关推荐
- 前端项目开发中碰到的坑、移动端兼容性问题
前端开发中碰到的坑.移动端兼容性问题 1.ios兼容input光标高度 问题:input输入光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样. **出现问 ...
- AR.js开发问题详解(二维码识别不出来及AR二维码如何进行训练)
AR.js开发问题详解(二维码识别不出来及AR二维码如何进行训练) 1. 大家碰到的很多都是二维码识别不出来的情况. 原因:周围环境的光太强或太暗,遮挡了二维码的信息,摄像头识别不到全部的信 ...
- iOS开发中屏幕旋转(二)
Morris_ 2019.04.11 前面有总结过一些在开发中遇到的屏幕旋转的基础知识. 一.设置应用支持的转屏方向 设置方式 00x1 在TARGET->General->Deploym ...
- Android事件分发机制在实战开发中的应用之二
学习的最终目标就是要学以致用,本文所分享的案例都是自己在公司实战开发过程中的真实案例,现在把它分享出来,希望对初学者有所帮助 版权声明:本文来自门心叼龙的博客,属于原创内容,转载请注明出处:https ...
- 详解Node.js开发中不可或缺的7个库
在Node.js开发中,选择合适的库对于提高开发效率和优化应用程序性能至关重要.本文将介绍七个备受关注的Node.js库,它们在各自的领域中展现了出色的功能和性能.这些库分别是:Config.Fetc ...
- vue.js项目中,关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入 首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...
- JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构:B ...
- Nuxt.js 开发SSR(服务端渲染)Web应用
1. 初识 Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架. 与 vuepress 的关系: Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计, ...
- 【杂记】全栈开发中碰到的一些问题及解决方法
目录 1. 环境问题 1.1. AndroidStudio 1.1.1. 加入jar.aar的方法: 1.1.2. 模拟器路径权限 1.1.3. gradle ...
最新文章
- Docker 快速上手学习入门教程
- 首个波士顿动力机器狗买家秀:化身监工,确认路线后就能自动巡航
- 2021年临颖一高高考成绩查询,河南漯河名列前茅的4所高中,临颖一高强势登榜,你还知道几所?...
- 乘方取模计算(模幂计算)
- php清空单例属性_PHP单例模式--典型的三私一公
- mysql5建函数报1064错误_Mysql创建表过程中报1064错误
- 递归算法JAVA实现
- 利用HTML和浏览器16倍速刷网课
- 一个用JS编写的随机抽取号码的小程序
- word文字上下间距怎么调_Word表格调整(行高、文字上下间距等)
- win7开机密码_win7忘记开机密码怎样才能打开电脑?别再用那些错误的方法了
- REDO和UNDO详解
- Atom处理器喜迎周岁生日 主频达2GHz
- 集合查询和查询结果处理
- uva 12307(点集的外接矩形)
- html 九宫格头像,JAVA-仿微信九宫格头像
- 为什么局域网 IP 通常以 192.168 开头而不是 1.2 或者 193.169 ?
- free, iostat, Linux, top, uptime, vmstat
- 视频加水印,怎么给视频加水印?
- web课程设计网页规划与设计:旅游网页主题网站设计——酒店主题绿色温泉度假酒店网页设计(8页)HTML+CSS+JavaScript
热门文章
- python下载word文件-python-docx操作word文件(
- python简单编程例子-python简单实例训练(21~30)
- python入门指南 小说-Python入门指南 作者:许半仙(4)
- python对excel某一列去重-python中怎么对dataframe列去重
- python打开指定文件-Python获取指定文件夹下的文件
- python编程入门经典 评分-《Python编程入门经典》--第二章:数值和运算符
- python下载安装教程3.8.1-Linux安装Python 3.8.1
- Mint系统使用介绍,Mint系统安装,在Mint系统上搭建GPU环境,在Mint系统上安装Pycharm、Anaconda等软件,在Mint系统上安装cuda和cudnn
- php语法大全下载,PHP下载文件
- lua学习笔记之日期时间