Wow，一個(gè)免費(fèi)、不怕打的評(píng)論插件！
快速給網(wǎng)站添加評(píng)論功能
大家好，我是魚(yú)皮，前段時(shí)間我自己做的網(wǎng)站不是被 DDOS 攻擊了么？然后我就即時(shí)地給大家分享了一下我是怎么臨時(shí) “化解” 這次 DDOS 攻擊的。
結(jié)果我今天一看，好家伙，這個(gè)視頻竟然都已經(jīng) 120 w 播放了！屬實(shí)讓我震驚了。
這下好了，之后做任何公開(kāi)的網(wǎng)站，我都不敢用花錢的服務(wù)了，被搞的幾率太大了。。。
言歸正傳，最近我打算做一個(gè)包含評(píng)論功能的網(wǎng)站，大致的需求是允許用戶發(fā)布評(píng)論、瀏覽評(píng)論、修改評(píng)論、回復(fù)評(píng)論等。
要知道，自己實(shí)現(xiàn)一個(gè)評(píng)論功能可并不容易，要考慮的問(wèn)題非常多，比如：
用戶輸入的合法性，怎么防止惡意輸入和頻繁提交？ 多層級(jí)的嵌套回復(fù)，庫(kù)表如何設(shè)計(jì)？ 如何處理點(diǎn)贊狀態(tài)的前后端變化？
像我雖然給自己的網(wǎng)站寫(xiě)過(guò)好幾次評(píng)論功能了，但是到現(xiàn)在依然覺(jué)得十分麻煩，真的不想再自己寫(xiě)了！
此外，如何設(shè)計(jì)評(píng)論系統(tǒng)也是后臺(tái)開(kāi)發(fā)的一個(gè)經(jīng)典面試題，畢竟包含點(diǎn)贊，可問(wèn)的點(diǎn)也非常多：
好消息是，評(píng)論作為一個(gè)非常常見(jiàn)的 通用需求 ，已經(jīng)有非常多現(xiàn)成的輪子了。今天就給大家分享一個(gè)大廠開(kāi)源的、免費(fèi)的評(píng)論插件 —— Gitalk 。
Gitalk 評(píng)論插件
Gitalk 是一個(gè)基于 GitHub Issue 和 Preact 開(kāi)發(fā)的評(píng)論插件，目前 GitHub 的 star 數(shù)接近 6k。
指路：https://github.com/gitalk/gitalk
有了它，只需 幾行代碼 就能讓我們輕松地給自己的系統(tǒng)接入評(píng)論功能，并且因?yàn)樵u(píng)論數(shù)據(jù)是存儲(chǔ)在 GitHub 問(wèn)題區(qū)的，不需要 自己準(zhǔn)備任何服務(wù)器！
先給大家看一下效果：
個(gè)人感覺(jué)非常地干凈精簡(jiǎn)。直接使用 GitHub 登錄，就可以發(fā)表評(píng)論了。
得益于 GitHub 官方的支持，Gitalk 支持用戶使用 Markdown 語(yǔ)法來(lái)發(fā)表評(píng)論，尤其適合程序員相關(guān)的網(wǎng)站。此外，Gitalk 還支持點(diǎn)贊、多級(jí)回復(fù)、修改評(píng)論、刪除評(píng)論等，已經(jīng)能夠滿足我們大多數(shù)的評(píng)論需求了：
如何使用？
Gitalk 的使用無(wú)比簡(jiǎn)單，進(jìn)入官方中文文檔，就能看到使用說(shuō)明了。
文檔指路：https://github.com/gitalk/gitalk/blob/master/readme-cn.md
因?yàn)?Gitalk 的數(shù)據(jù)是存儲(chǔ)在 GitHub 的問(wèn)題區(qū)的，所以首先要在 GitHub 上申請(qǐng)一個(gè)應(yīng)用：
指路：https://github.com/settings/applications/new
申請(qǐng)應(yīng)用后，會(huì)獲得 clientID 和 clientSecret，一定要保存好，等下要用到。
接下來(lái)先引入 Gitalk 相關(guān)依賴，包括壓縮過(guò)的 CSS 樣式和 JavaScript 腳本文件：
引入完成后，如果你使用原生 HTML，先創(chuàng)建一個(gè)用于裝載評(píng)論功能的容器（DOM 節(jié)點(diǎn)），并且復(fù)制一段初始化 Gitalk 的代碼即可：
上面的這些配置信息分別為：
clientID：你申請(qǐng)到的 GitHub 應(yīng)用 id
clientSecret：你申請(qǐng)到的 GitHub 應(yīng)用秘鑰
repo：GitHub 倉(cāng)庫(kù)名，比如 'my-repo'
owner：倉(cāng)庫(kù)的創(chuàng)建者，比如 'liyupi'
admin：倉(cāng)庫(kù)的管理員，比如 ['liyupi']
id：用于標(biāo)注評(píng)論屬于哪個(gè)頁(yè)面，盡量保證每個(gè)頁(yè)面的 id 唯一，否則評(píng)論就混在一起啦
如果你的項(xiàng)目用到了 React，也支持直接引入組件：
這樣就完成啦，最后訪問(wèn)你網(wǎng)站的域名，就能愉快地使用評(píng)論插件了~
?? 如果在本地訪問(wèn)，可能會(huì)出現(xiàn)以下情況，但線上真實(shí)域名的訪問(wèn)是正常的
咋樣，是不是很方便？
但這個(gè)評(píng)論插件也有一定的不足：
評(píng)論基于 GitHub，國(guó)內(nèi)部分用戶可能因?yàn)榫W(wǎng)絡(luò)原因無(wú)法使用
基于 GitHub 用戶體系，不適合自己網(wǎng)站已有用戶庫(kù)的情況
評(píng)論數(shù)據(jù)存儲(chǔ)于 GitHub，很難自己維護(hù)
輪子的通病，越現(xiàn)成的往往越難自己定制和修改
大家還是根據(jù)自己的實(shí)際情況 選用 吧。
我是魚(yú)皮，以上就是本期分享，有幫助的話還請(qǐng)大家 點(diǎn)贊 + 在看 支持下 ??，感謝！
最后多說(shuō)一句，為了更好地幫助到部分愿意學(xué)習(xí)和進(jìn)步的朋友，魚(yú)皮即將正式開(kāi)放自己的知識(shí)星球（付費(fèi)編程學(xué)習(xí)圈子），想提前加入的小伙伴可以點(diǎn)擊下方 閱讀原文 了解。
往期推薦