快速给网站添加评论功能

大家好,我是鱼皮,前段时间我自己做的网站不是被 DDOS 攻击了么?然后我就即时地给大家分享了一下我是怎么临时 “化解” 这次 DDOS 攻击的。

结果我今天一看,好家伙,这个视频竟然都已经 120 w 播放了!属实让我震惊了。

这下好了,之后做任何公开的网站,我都不敢用花钱的服务了,被搞的几率太大了。。。

言归正传,最近我打算做一个包含评论功能的网站,大致的需求是允许用户发布评论、浏览评论、修改评论、回复评论等。

要知道,自己实现一个评论功能可并不容易,要考虑的问题非常多,比如:

  • 用户输入的合法性,怎么防止恶意输入和频繁提交?

  • 多层级的嵌套回复,库表如何设计?

  • 如何处理点赞状态的前后端变化?

像我虽然给自己的网站写过好几次评论功能了,但是到现在依然觉得十分麻烦,真的不想再自己写了!

此外,如何设计评论系统也是后台开发的一个经典面试题,毕竟包含点赞,可问的点也非常多:

好消息是,评论作为一个非常常见的 通用需求 ,已经有非常多现成的轮子了。今天就给大家分享一个大厂开源的、免费的评论插件 —— Gitalk

Gitalk 评论插件

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件,目前 GitHub 的 star 数接近 6k。

指路:https://github.com/gitalk/gitalk

有了它,只需 几行代码 就能让我们轻松地给自己的系统接入评论功能,并且因为评论数据是存储在 GitHub 问题区的,不需要 自己准备任何服务器!

先给大家看一下效果:

个人感觉非常地干净精简。直接使用 GitHub 登录,就可以发表评论了。

得益于 GitHub 官方的支持,Gitalk 支持用户使用 Markdown 语法来发表评论,尤其适合程序员相关的网站。此外,Gitalk 还支持点赞、多级回复、修改评论、删除评论等,已经能够满足我们大多数的评论需求了:

支持点赞和多级回复

如何使用?

Gitalk 的使用无比简单,进入官方中文文档,就能看到使用说明了。

文档指路:https://github.com/gitalk/gitalk/blob/master/readme-cn.md

因为 Gitalk 的数据是存储在 GitHub 的问题区的,所以首先要在 GitHub 上申请一个应用:

指路:https://github.com/settings/applications/new

申请 GitHub 应用

申请应用后,会获得 clientID 和 clientSecret,一定要保存好,等下要用到。

接下来先引入 Gitalk 相关依赖,包括压缩过的 CSS 样式和 JavaScript 脚本文件:

引入依赖

引入完成后,如果你使用原生 HTML,先创建一个用于装载评论功能的容器(DOM 节点),并且复制一段初始化 Gitalk 的代码即可:

上面的这些配置信息分别为:

  • clientID:你申请到的 GitHub 应用 id

  • clientSecret:你申请到的 GitHub 应用秘钥

  • repo:GitHub 仓库名,比如 'my-repo'

  • owner:仓库的创建者,比如 'liyupi'

  • admin:仓库的管理员,比如 ['liyupi']

  • id:用于标注评论属于哪个页面,尽量保证每个页面的 id 唯一,否则评论就混在一起啦

如果你的项目用到了 React,也支持直接引入组件:

这样就完成啦,最后访问你网站的域名,就能愉快地使用评论插件了~

⚠️ 如果在本地访问,可能会出现以下情况,但线上真实域名的访问是正常的

咋样,是不是很方便?

但这个评论插件也有一定的不足:

  1. 评论基于 GitHub,国内部分用户可能因为网络原因无法使用

  2. 基于 GitHub 用户体系,不适合自己网站已有用户库的情况

  3. 评论数据存储于 GitHub,很难自己维护

  4. 轮子的通病,越现成的往往越难自己定制和修改

大家还是根据自己的实际情况 选用 吧。

我是鱼皮,以上就是本期分享,有帮助的话还请大家 点赞 + 在看 支持下

Wow,一个免费、不怕打的评论插件!相关推荐

  1. 第三方社会化评论插件

    原文转自:http://blog.sina.com.cn/s/blog_53b587b3010123rg.html WordPress的优点在于可定制性强,社会化的有点在于传播范围广,这两者的结合目前 ...

  2. 织梦评论插件,爱资料评论插件 一个简单评论插件

    一直以来都是使用畅言来作为网站的评论插件,但是现在过多的广告展示和加载了太多的js和数据.导致网站加载非常慢,这个时候就做了如下这个插件. 评论流程模式: 用户匿名评论->后台审核->展示 ...

  3. 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

    喜欢写Blog的人,会经历三个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉得独立博客的管 ...

  4. 如何快速搭建一个免费的,无限流量的Blog

    转载自   如何快速搭建一个免费的,无限流量的Blog 喜欢写Blog的人,会经历三个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购 ...

  5. 如何构建自己的免费无服务器评论框

    by Shaun Persad 通过Shaun Persad 如何构建自己的免费无服务器评论框 (How you can build your own free, serverless comment ...

  6. 如何通过Gitalk评论插件,5分钟为你的博客快速集成评论功能

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  7. wordpress评论插件_WordPress评论插件的全面比较

    wordpress评论插件 Engagement, engagement, engagement. 参与,参与,参与. My brother Lee and I are web developers ...

  8. wordpress评论插件_6个适用于WordPress的最佳产品评论插件

    wordpress评论插件 Are you looking for the best product review plugins for WordPress? If you regularly ad ...

  9. 开发人员最喜爱的十大免费的Visual Studio插件

    1.    AnkhSVN - Subversion SCC Provider http://ankhsvn.open.collab.net/ AnkhSVN是一个VS的Subversion 源代码管 ...

最新文章

  1. Struts2学习第二天——动态方法调用
  2. XGB模型训练报错 terminate called after throwing an instance of ‘std::bad_alloc‘ what()
  3. BIM+GIS应用实战(听课笔记)
  4. scada系统集成_MES/MOM与WMS系统集成应用案例-系统接口、交互数据分析
  5. tcp中的crc检验算法原理_CRC校验原理及其实现
  6. 长远锂科:拟发行可转债募资不超32.5亿元
  7. 比较差异_风向风速记录仪与人工观测差异比较
  8. how to make jelly effect on belly in maya
  9. application使用@符合问题:‘@‘ that cannot start any token
  10. php fseek函数,php fseek函数怎么用?
  11. 如何合并pdf文件,pdf合并方法
  12. 进程的初步认识(程序与进程、并发、单道程序设计、多道程序设计、CPU、MMU)
  13. android sqlite多条件查询,sqlite 多条件查询
  14. 安装虚拟机提示未启动服务器,Hyper-V虚拟机未启动,并触发0x80070057错误
  15. 传感技术复习笔记(5)——电容式传感器
  16. Refused to execute inline script because it violates the following Content Security Policy directive
  17. 通过小型机液晶面板查看FSP/ASMI IP地址
  18. 上海星尚传媒主持人刘彦池
  19. UE4 高分辨率截图
  20. css一些美化页面的方法

热门文章

  1. [leetcode]Pascal#39;s Triangle II
  2. 深度优先搜索——八皇后问题
  3. Permutations CodeForces - 736D (矩阵逆)
  4. 2018-2019-1 20165234 《信息安全系统设计基础》第四周学习总结
  5. mysql中查询一个字段属于哪一个数据库中的哪一个表的方式
  6. 腾讯的一笔画游戏--巧妙解法
  7. Verilog MIPS32 CPU(八)-- 控制器
  8. Linux下使用shell实现上传linux下某个目录下所有文件到ftp
  9. chromebook刷机_如何查看Chromebook的停产日期
  10. android设置时间widget,【Android】时间与日期Widget(DatePicker 与 TimePicker)