快速給網站添加評論功能

大家好，我是魚皮，前段時間我自己做的網站不是被 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，也支持直接引入組件：

這樣就完成啦，最后訪問你網站的域名，就能愉快地使用評論插件了~

?? 如果在本地訪問，可能會出現以下情況，但線上真實域名的訪問是正常的

咋樣，是不是很方便？

但這個評論插件也有一定的不足：

評論基于 GitHub，國內部分用戶可能因為網絡原因無法使用

基于 GitHub 用戶體系，不適合自己網站已有用戶庫的情況

評論數據存儲于 GitHub，很難自己維護

輪子的通病，越現成的往往越難自己定制和修改

大家還是根據自己的實際情況 選用 吧。

我是魚皮，以上就是本期分享，有幫助的話還請大家 點贊 + 在看 支持下 🌹，感謝！

最后多說一句，為了更好地幫助到部分愿意學習和進步的朋友，魚皮即將正式開放自己的知識星球（付費編程學習圈子），想提前加入的小伙伴可以點擊下方 閱讀原文 了解。

往期推薦

這些開源免費的工具真香！

年前，我公開了自己網站的【底褲】

哦，原來大廠是這樣發布應用的!

剛看到份百萬閱讀的學習路線，太牛逼！

微信發力了，一鍵部署網站后端！

總結

以上是生活随笔為你收集整理的Wow，一个免费、不怕打的评论插件！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。