官方github地址:https://github.com/imsun/gitment

官方中文说明地址:https://imsun.net/posts/gitment-introduction/

官方地址已经很详细了,这里只是针对搭建过程做个总结。自己第一次搭用了半天(碰到坑),后帮别人搭建用了三分钟。

github端

gitment评论系统基于github的issue,所以需要做以下几点:

1.注册一个github的Oauth服务 注册地址

2.新建一个仓库(使用现有仓库忽略)。

3.保证开启了仓库的issue功能。

应用端

把以下资源放到模板即可,有一点需要注意(也是第一次搭建踩坑的教训),如果用的是vue作为前端框架建站,一定要把代码放到渲染(如默认的'<div id='app'></div>')外边,否则会初始化失败。具体原因没有深究(关键是技术不到家),解决了的可以在下方gitment留言讨论一下。

1.引入css/js

<link rel='stylesheet' href='https://imsun.github.io/gitment/style/default.css'>

<script src='https://imsun.github.io/gitment/dist/gitment.browser.js'></script>

2.引入代码

const gitment = new Gitment({
id: 'Your page ID', // optional
owner: 'Your GitHub ID',
repo: 'The repo to store comments',
oauth: {
client_id: 'Your client ID',
client_secret: 'Your client secret',
},
})
gitment.render('comments')

页面端

做好上边几个准备后,如果是仓库所有者和github登录着是一个人的话,页面会出现一个用于初始化的按钮,点击后,就可以评论了。

博客中引入了gitment评论系统的更多相关文章

  1. 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法

    title: 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法 toc: false date: 2018-04-16 22:57:50 cat ...

  2. Hexo博客yilia主题添加Gitment评论系统

    一开始搭建hexo+yilia博客使用的评论功能是通过来必力实现的.来必力免费,功能多,一开始的体验效果很好,但是后来打开网站发现来必力加载的越来越慢(来必力是韩国的公司,可能是国内限制),遂打算换一 ...

  3. Hexo博客NexT主题美化之评论系统

    前言 更多效果展示,请访问我的博客 https://kangmingxian.github.io/ 效果图:   image Valine 诞生于2017年8月7日,是一款基于Leancloud的快速 ...

  4. 在个人博客中优雅的使用Gitalk评论插件

    在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在 ...

  5. 博客中gitalk最新评论的获取 github api使用

    博客中,对于网友的评论以及每篇文章的评论数还是很重要的.但是基于静态的页面想要存储动态的评论数据是比较难的,一般博客主题中都内置了评论插件,但是博客主题中对于最新评论的支持显示还是很少的,至少目前我是 ...

  6. 在jekyll模板博客中添加网易云模块

    最近使用GitHub Pages + Jekyll 搭建了个人博客,作为一名重度音乐患者,博客里面可以不配图,但是不能不配音乐啊. 遂在博客里面引入了网易云模块,这里要感谢网易云的分享机制,对开发者非 ...

  7. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  8. 在CSDN博客中添加量子恒道统计功能的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 什么是量子恒道统计?量子恒道统计是一套免费的网站流量统计分析系统.致力于为所有个人站长.个人博主.所有网站管理者.第三 ...

  9. 如何在hexo博客中在线阅读pdf

    前言 有一些资料或者笔记是pdf版本的,如果想要放在博客中进行阅读,那么就得将其转换为markdown格式或者html格式.但是这样转换后,其原pdf的格式就会混乱了,排版将会变得很困难,不过一山更比 ...

随机推荐

  1. 【转】SQLSERVER磁盘原理

    [声明:本篇博客转载自http://www.cnblogs.com/ljhdo/p/5149401.html] 最近一段时间的工作主要是与SQLSERVER数据库打交道,需要对SQLSERVER有一个 ...

  2. css3 序列帧动画抖动

    页面需要一个动画,设计师给了动画的序列帧 项目由vue构建,使用css3做动画 html <div class="work_two_main"></div> ...

  3. Qt error: C2236: 意外的标记“class”。是否忘记了“;”?

    前阵子玩了一个比较大的程序,手脚,身子脑袋都分开写的那种,因此互相include .h比较多,那么问题来了,有些cpp没有include 的类却使用了起来 ,这时候IDE不会出这个类没有定义什么的,而 ...

  4. WGCNA构建基因共表达网络详细教程

    这篇文章更多的是对于混乱的中文资源的梳理,并补充了一些没有提到的重要参数,希望大家不会踩坑. 1. 简介 1.1 背景 WGCNA(weighted gene co-expression networ ...

  5. 前端解析Markdown

    目录 前端解析Markdown 1.使用strapdown 1.1.下载 1.2.使用 2.使用marked(配合highlightjs) 2.1.下载 2.2.使用 3.使用mdjs(配合highl ...

  6. Vue.js(七)

    ES6 默认导出(只能一次)与默认导入 默认导出: // 当前文件模块为 test.js // 定义私有成员 a 和 c let a = 10 let c = 20 // 外界访问不到变量 d ,因为 ...

  7. 每天一个Linux命令:rm(5)

    rm rm命令可以删除一个目录中的一个或多个文件或目录,也可以将某个目录及其下属的所有文件及其子目录均删除掉.对于链接文件,只是删除整个链接文件,而原有文件保持不变 注意:使用rm命令要格外小心.因为 ...

  8. Vue 之指令篇

    文件指令 <body>    <div id="app">        <!-- 1) 插值表达式 -->        <p>{ ...

  9. hdu 1402 A * B Problem Plus (FFT模板)

    A * B Problem Plus Problem Description Calculate A * B. Input Each line will contain two integers A ...

  10. Sqli labs系列-less-5&6 报错注入法(上)

    在我一系列常规的测试后发现,第五关和第六关,是属于报错注入的关卡,两关的区别是一个是单引号一个是双引号...当然我是看了源码的.... 基于报错注入的方法,我早就忘的差不多了,,,我记的我最后一次基于 ...