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

快速给网站添加评论功能

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

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

e30d000c7333942f5d4d191f24309174.png

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

007a1f4c8b5f22c9c64804e2cf2eaa2c.png

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

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

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

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

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

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

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

073c14064551519bd73e5706c1f5c94c.png

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

Gitalk 评论插件

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

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

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

先给大家看一下效果:

d1c957706e80fd0ced0c0a0563d2bb18.png

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

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

170e22195827242eab729874f128bbe9.png
支持点赞和多级回复

如何使用?

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

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

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

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

33b398d99f8c5d513fc65327f2a6e67a.png
申请 GitHub 应用

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

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

1e63e7317c09b06c7329c7d96539ab47.png
引入依赖

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

37c902eff9217c607d015874e279b302.png

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

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

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

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

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

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

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

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

34d88b419e653a4e369c6ae23558e095.png

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

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

64796a1aaa3ccbb72dd8c3678ea5259b.png

咋样,是不是很方便?

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

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

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

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

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

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

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

最后多说一句,为了更好地帮助到部分愿意学习和进步的朋友,鱼皮即将正式开放自己的知识星球(付费编程学习圈子),想提前加入的小伙伴可以点击下方 阅读原文 了解。

往期推荐

这些开源免费的工具真香!

年前,我公开了自己网站的【底裤】

哦,原来大厂是这样发布应用的!

刚看到份百万阅读的学习路线,太牛逼!

微信发力了,一键部署网站后端!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MSSQLSERVER启动不了,报SQL Server 无法生成 FRunCM 线程

为什么80%的码农都做不了架构师?>>> 在启动MSSQLSERVER服务时,提示启动不了,在事件查看器中发现报错:SQL Server 无法生成 FRunCM 线程 网上搜了一下说是:MSSQLSERVER的协议中VIA协议被启用了,…

hdu 2648 Shopping

原题链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid2648 纯暴力的方法T_T。。。 如下: 1 #include<cstdio>2 #include<cstdlib>3 #include<string>4 #include<iostream>5 #include<algorithm>6 typedef char State[35];7 char *ta…

Windows导出所有计划任务方法

windows计划任务的命令为&#xff1a;schtasksSCHTASKS /parameter [arguments]描述:允许管理员创建、删除、查询、更改、运行和中止本地或远程系统上的计划任务。参数列表:/Create 创建新计划任务。/Delete 删除计划任务。/Query 显示所有计划任务。…

C# 使用多个异步方法

在一个异步方法中&#xff0c;可以调用一个或多个异步方法。如何编写代码&#xff0c;取决于一个异步方法的结果是否依靠于另一个异步方法。01 按顺序调用异步方法使用 await 关键字可以调用每个异步方法。在有些情况下&#xff0c;如果一个异步方法依赖另一个异步方法的结果&a…

qqp2011java_腾讯开放平台中实现QQ登陆的功能

昨天为自己的网站实现了QQ登陆的功能,虽然,没有进行绑定,但是在技术层面上来说,已经了解了一点腾讯开放平台的协议.具体什么是OAUTH,请您GG一下吧...关于腾讯的开放平台,最主要的就是参数一定不能多,能有的要有,不能有的一定不能有.不然提交过去,就会提示什么什么错了.最关键的…

LeetCode之Longest Common Prefix

1、题目 Write a function to find the longest common prefix string amongst an array of strings2、代码实现 package leetcode.chenyu.test;public class LongestCommonPrefix {public static void main(String[] args) {String [] ss {"12345", "3234&qu…

51CTO各位博友大家好!

一直浏览51CTO的技术文章&#xff0c;感谢大家提供这么多的技术文章&#xff0c;今天下决心与大家共同交流。转载于:https://blog.51cto.com/tuidaohu/1414099

java遍历字典_Java中的HashMap遍历和C#的字典遍历

Dictionary list new Dictionary();list.Add("d", 1);//3.0以上版本foreach (var item in list){Console.WriteLine(item.Key item.Value);}//KeyValuePairforeach (KeyValuePair kv in list){Console.WriteLine(kv.Key kv.Value);}//通过键的集合取foreach (stri…

git 使用详解-- tag打标签

Git 的标签管理。跟大多数的 VCS 工具一样&#xff0c;git 也有在历史状态的关键点“贴标签”的功能&#xff0c;一般人们用这个功能来标记发布点&#xff08;例如’v1.0′&#xff09;。列出git中现有标签 要想列出git中现有的所有标签&#xff0c;输入’git tag’命令运行即可…

Nova虚拟机启动提示libvirtError

OpenStack自动化安装基本折腾完毕&#xff0c;装一次大概也就10分钟&#xff0c;但是装完后今天我的虚拟机起不来&#xff0c;经过查找log发 现如下图提示&#xff1a; 已经到这里&#xff0c;说明已经过了nova-sheduler那一关&#xff0c;跟踪一下代码&#xff0c;也正是在调用…

ASP.NET Core使用功能开关控制路由访问

前言在前面的文章&#xff0c;我们介绍了使用Middleware有条件地允许访问路由&#xff08;《ASP.NET Core使用Middleware有条件地允许访问路由》&#xff09;。而对于一些试验性的功能&#xff0c;我们并不希望用密码去控制是否允许访问&#xff0c;而是想用一种开关的方式开放…

LeetCode之Single Number

1、题目 Given an array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you implement it without using extra memory? Subscribe to see which companies asked…

C#中的数组

欢迎您成为我的读者&#xff0c;希望这篇文章能给你一些帮助。前言前面的文章和大家一起看了C#中的异常&#xff0c;今天一起学习下C#中最基本的数据结构&#xff0c;数组的用法。数组实际上是由一个变量名称表示的一组同类型的数据元素。每个元素通过变量名称和一个或多个方括…

java怎么实现同步到微博功能_新浪微博信息站外同步的完整实现

最近遇到一个项目&#xff0c;其中需要将用户的微博信息与自己的网站项目上同步&#xff0c;好在新浪微博是提供了API的&#xff0c;大概查阅了一下&#xff0c;信息同步需要调用的是在关于授权机制说明中&#xff0c;新浪微博的API一共有两种验证机制&#xff0c;分别是&#…

33:计算分数加减表达式的值

33:计算分数加减表达式的值 查看提交统计提问总时间限制: 1000ms内存限制: 65536kB描述编写程序&#xff0c;输入n的值&#xff0c;求 1/1 - 1/2 1/3 - 1/4 1/5 - 1/6 1/7 - 1/8 ... (-1)n-11/n 的值。 输入输入一个正整数n。1 < n < 1000。输出输出一个实数&#x…

如何打卡后缀为3ds的文件

打开.3DS文件 3DS文件怎么打开&#xff1f; 用它吧&#xff1a;a3dsviewer&#xff0c;顾名思义&#xff0c;一个3D文件浏览工具&#xff0c;为用户提供一个快速和简单的3DS文件浏览器很容易。 这里是一些主要特点的“a3dsviewer”&#xff1a; 将3DS文件的POVRay格式。 输出的…

C/C++基本数据类型所占字节数

关于这个主要的问题&#xff0c;非常早曾经就非常清楚了&#xff0c;C标准中并没有详细给出规定那个基本类型应该是多少字节数&#xff0c;并且这个也与机器、OS、编译器有关&#xff0c;比方相同是在32bits的操作系统系&#xff0c;VC的编译器下int类型为占4个字节&#xff1b…

LeetCode之Find the Difference

1、题目 Given two strings s and t which consist of only lowercase letters. String t is generated by random shuffling string s and then add one more letter at a random position. Find the letter that was added in t. Example: Input: s "abcd" t &qu…

ASP.NET Core使用功能开关控制路由访问(续)

前言在前面的文章&#xff0c;我们介绍了使用功能开关控制路由访问。但其实我们使用了2个条件做的判断&#xff1a;var isDebugEndpoint context.Request.Path.Value.Contains("/test"); var debugEndpoint await _featureManager.IsEnabledAsync("ForbiddenD…

如何使用CDR智能填充工具

使用智能填充工具可以为任意的闭合区域填充颜色并设置轮廓。与其他填充工具不同&#xff0c;智能填充工具仅填充对象&#xff0c;它检测到区域的边缘并创建一个闭合路径&#xff0c;因此可以填充区域。例如&#xff0c;智能填充工具可以检测多个对象相交产生的闭合区域&#xf…