第57章—实战篇-博客-评论系统

前言

评论系统，一个说简单也简单，说复杂也复杂的系统。

往简单的说，搞个输入框，写个 API，数据存入数据库，展示时读取对应评论列表即可。

往复杂的说，评论的评论怎么处理？是否支持评论点赞？是否支持按赞数排序？是否支持评论置顶功能？评论框是否支持输入图片？是否支持表情？是否支持快捷键输入？是否支持 Markdown？Markdown 又细分是否支持公式、语法高亮等。此外，垃圾评论检测、XSS 防注入、后台人工审核、邮箱通知等等，想一想都是工作量。

所以虽然可以自己从头做，但有现成的还是用现成的吧。

但是现在评论系统相关的技术选项也是琳琅满目。且让我们做下调研：

技术选型

评论系统通常会涉及两部分，一部分是数据库，通常采用云端部署。一部分是前端展示，通常会提供客户端包方便引入使用。以下是评论系统常用的技术选型：

1. Waline

Waline，一款简洁、安全的评论系统。

服务端可免费部署到 Vercel，也提供了其他部署平台教程。客户端提供了 @waline/client，使用 Vue + TypeScript 编写，大小为 53kb gzip。支持 Markdown、表情包、插入图片等功能。也有安全相关的处理如内容校验、防灌水、保护敏感数据等。

GitHub 地址（2k Star）：https://github.com/walinejs/waline 演示地址：https://waline.js.org/

2. Twikoo

Twikoo，一款简洁、安全、免费的网站评论系统。也分为云函数部署和前端部署，都提供了教程。

GitHub 地址（1.3k Star）：https://github.com/twikoojs/twikoo 演示地址：https://twikoo.js.org/

个人评价：功能弱于 Waline，满足基本的评论需求。

3. Disqus

Disqus，国外老牌的评论系统，国内不能用，免费版有广告，于是诞生了很多 Disqus 的替代品。

个人评价：国内还是用下边这个吧。

4. DisqusJS

DisqusJS 是一个基于 Disqus API 和 React 开发的 Embed 插件。DisqusJS 通过 Disqus API 渲染只读的评论列表，搭配反向代理可以实现在网络审查地区加载 Disqus 评论列表；支持自动检测访客是否能够访问 Disqus、并自动选择加载原生 Disqus（评论完整模式）或 DisqusJS 提供的评论基础模式。

GitHub 地址（0.6k Star）：https://github.com/SukkaW/DisqusJS 演示地址：https://disqusjs.skk.moe/

个人评价：可以用。还需要登陆 Disqus 做些配置、再使用 Vercel 做个 Disqus API。

5. chirpy

Chirpy，是一个注重隐私保护和定制化的评论系统, 支持 vercel 部署。

GitHub 地址（0.5k Star）：https://github.com/devrsi0n/chirpy 演示地址：https://chirpy.dev/play

个人评价：样式不错，但免费版每月 1000 pageviews 上限，而且只支持一个项目，使得使用它太过于鸡肋。

6. Cusdis

Cusdis，轻量、保护隐私、开源的 Disqus 替代品。适用于小型网站。

GitHub 地址（2.6k Star）：https://github.com/djyde/cusdis 演示地址：https://cusdis.com/doc#/

7. utterances

utterances，基于 Github Issues 的轻量评论组件。

GitHub 地址（8.7k Star）：https://github.com/utterance/utterances 演示地址：https://utteranc.es/

个人评价：老牌评论组件，但六七年没有更新了，也能用。

8. Isso

Isso，使用 Python 和 JavaScript 编写的轻量评论服务端。

GitHub 地址（5k Star）：https://github.com/isso-comments/isso 演示地址：https://isso-comments.de/

那使用什么好呢？这肯定要看你的需求而定。

我个人选择 Waline，功能丰富、用的人多、GitHub 仓库更新比较频繁。有更好的建议欢迎评论区留言。

Waline 使用

关于 Waline 如何使用，其实官方文档已经给的很详细了。这里结合博客项目来重复一遍：

1. 注册 LeanCloud（数据库）

LeanCloud 是一种 Serverless 云服务，提供了一站式的后端服务，如数据存储、即时通讯等等，简单的来说，比如我要实现一个数据存储功能，我只用在 LeanCloud 注册一个账号，获得对应的 App ID 和 App Key，然后调用提供的 API 即可进行数据存储。

登录或注册 LeanCloud 国际版并进入控制台
点击左上角创建应用并起一个你喜欢的名字 (请选择免费的开发版)：

创建应用后，进入应用，点击左下角的设置 - 应用凭证，获取 AppID、AppKey、MasterKey 等信息：

截屏2024-05-19 18.05.07.png

2. Vercel 部署（服务端）

Waline 提供了 Vercel 模板，点击链接，进入部署界面，创建仓库并进行部署：

部署成功后，进入应用的设置页面，设置环境变量：

截屏2024-05-19 18.14.30.png

配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 AppID, AppKey, MasterKey。

然后重新部署（这步是为了让环境变量生效）：

截屏2024-05-19 18.19.25.png

3. 配置自定义域名

参考小册《实战篇 | React Notes | Vercel 部署》的“自定义域名”和“国内访问”章节，为我们刚部署的项目添加一个自定义域名。

截屏2024-05-19 18.29.02.png

配置成功后，访问 https://waline.yayujs.com/ 就可以查看评论前台界面：

访问 https://waline.yayujs.com/ui 就会进入评论管理后台：

当然首次登录的时候，要注册 Waline 的账号和密码，并开启两步验证，提高安全性。完成后就可以成功进入后台。后台如上图所示，可以看到所有的评论信息，并可进行置顶、编辑、回复、删除等操作。

4. Next.js 应用（客户端）

Next.js 项目中又该如何使用呢？

安装依赖项 @waline/client：

npm i @waline/client

新建 components/Waline.js，代码如下：

'use client'

import React, { useEffect, useRef } from 'react';
import { init } from '@waline/client';

import '@waline/client/style';

 const Waline = (props) => {
  const walineInstanceRef = useRef(null);
  const containerRef = React.createRef();

  useEffect(() => {
    walineInstanceRef.current = init({
      ...props,
      el: containerRef.current,
    });

    return () => walineInstanceRef.current?.destroy();
  }, []);

  useEffect(() => {
    walineInstanceRef.current?.update(props);
  }, [props]);

  return <div ref={containerRef} />;
};

export default Waline

新建 app/[lng]/posts/[id]/page.js，代码如下：

// ...
import Waline from '@/components/Waline'

// ...
const Page = ({ params }) => {
  // ...
  return (
    <>
      // ...
      <article className="mx-auto max-w-xl py-8 prose prose-slate dark:prose-invert">
        // ...
      </article>
      <Waline el='#waline' serverURL="https://waline.yayujs.com/" />
    </>
  )
}

export default Page

serverURL 设置为上步自定义配置的域名。

此时效果如下：

5. 自定义样式

评论框的样式该如何修改呢？就比如评论框的主题色是绿色，如果我想统一改为蓝色呢？

Waline 提供了自定义样式的文档，我们可以通过修改 CSS 变量配置样式。我们以修改主题色为例：

新建 components/Waline.css，代码如下：

:root {
  /* 主题色 */
  --waline-theme-color: #42A5F5;
  --waline-active-color: #1976D2;
}

新建 next-blog/components/Waline.js，引入该样式表：

'use client'

import React, { useEffect, useRef } from 'react';
import { init } from '@waline/client';

import '@waline/client/style';
import './Waline.css'

// ...

export default Waline