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…

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;而是想用一种开关的方式开放…

C#中的数组

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

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

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

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…

java对象引用出错_“Java有值传递和引用传递”为什么错了?

前言初学Java的时候&#xff0c;老师在课堂上说“Java有值传递和引用传递”&#xff0c;但网上“Java只有值传递”的呼声很高。本人在查找资料的过程中&#xff0c;在这两个说法之间反复横跳。经过本人的整理后&#xff0c;其实还真的是Java只有值传递。什么是值传递&#xff1…

程序员生存之道-教你如何在丛林中捕获食物

文章目录 &#x1f4a5; 序言&#x1f423; 躺&#x1f95d; 从零到一还是从零到100&#xff1f;&#x1f344; 螺丝钉文化&#x1f354; 价值分析&#x1f353; 长期主义者&#xff1f;&#x1f96c; 何为顺其自然&#xff1f;&#x1f308; 总结 &#x1f4a5; 序言 嗨&#…

微软发文庆祝 .NET 诞生 20 周年纪念日!

技术编辑&#xff1a;MissD丨发自 思否编辑部公众号&#xff1a;SegmentFault刚刚过去的“情人节”里&#xff0c;.NET 团队为庆祝 .NET 社区诞生 20 周年而举办了一场盛大的活动。没错&#xff01;.NET 于 2002 年 2 月 13 日与 Visual-Studio 一起推出&#xff0c;本月终于迎…

根据文件扩展名得到文件对应该类型Icon方法

2019独角兽企业重金招聘Python工程师标准>>> 根据文件扩展名得到文件对应该类型Icon方法 package com.fleety.util; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.GraphicsConfiguration; import java.awt.GraphicsDevice; import java.…

Asp-Net-Core开发笔记:在docker部署时遇到一个小坑

哦吼之前刚说了尝试了使用docker来部署AspNetCore应用&#xff08;Asp.Net Core部署&#xff1a;早知道&#xff0c;还是docker!以及一点碎碎念&#xff09;&#xff0c;结果这才刚上班就遇到问题了 …我这项目用的数据库是Oracle&#xff0c;之前直接运行没啥问题&#xff0c;…

lasso特征选择python_转:结合Scikit-learn介绍几种常用的特征选择方法-2

4.2 平均精确率减少 Mean decrease accuracy另一种常用的特征选择方法就是直接度量每个特征对模型精确率的影响。主要思路是打乱每个特征的特征值顺序&#xff0c;并且度量顺序变动对模型的精确率的影响。很明显&#xff0c;对于不重要的变量来说&#xff0c;打乱顺序对模型的精…

Mac Generating Pods project Abort trap: 6

为什么80%的码农都做不了架构师&#xff1f;>>> 为项目添加cocoapods如果产生此种错误时,主要有以下几点原因: 1,cocoapods版本过低: 打开终端在终端输入:pod --version,目前最新版本是1.2.0(2017年3月),如果发现版本过低,则可以在终端输入以下命令:gem install co…

svn 服务器搭建

2019独角兽企业重金招聘Python工程师标准>>> Svn搭建 1. Linux 搭建 YUM 服务器 [rootlocalhost conf]# yum install -y subversion 2.验证安装版本&#xff1a; [rootlocalhost conf]# svnserve –version 3.创建SVN 版本库 [rootlocalhost conf]# mkdir /v…

C# 使用 ValueTasks

C# 7 带有更灵活的 await 关键字&#xff1b;它现在可以等待任何提供 GetAwaiter 方法的对象。一种可用于等待的新类型是 ValueTask。与 Task 类相反&#xff0c;ValueTask 是一个结构。这具有性能优势&#xff0c;因为 ValueTask 在堆上没有对象。与异步方法调用相比&#xff…

Electron - 创建跨平台的桌面客户的应用程序

Electron 框架的前身是 Atom Shell&#xff0c;可以让你写使用 JavaScript&#xff0c;HTML 和 CSS 构建跨平台的桌面应用程序。它是基于io.js 和 Chromium 开源项目&#xff0c;并用于在 Atom 编辑器中。Electron 是开源的&#xff0c;由 GitHub 维护&#xff0c;有一个活跃的…