在 NextJS 中添加评论部分

在开发 Web 应用程序时，很多时候我们需要在网站上添加评论功能，以便用户能够在博客、新闻和其他网页上留下评论。在本文中，我们将学习如何在 Next.js 中集成 Disqus 评论系统和 Gitment 评论系统。

集成 Disqus 评论系统

Disqus 是一种流行的基于网页的评论系统，可以轻松地嵌入网站，提供身份验证、通知、回复和很多其他功能。以下是集成 Disqus 评论系统的步骤：

步骤1：创建 Disqus 帐户

要使用 Disqus 评论系统，您需要在其网站上创建一个帐户，并为您的网站注册。在注册和注册站点之后，您会收到一些代码片段，以便将 Disqus 评论系统嵌入您的网站。

步骤2：安装 disqus-react

要在 Next.js 中使用 Disqus，您需要安装带有受控/非受控组件的 disqus-react 模块。要安装模块，请在终端中运行以下命令：

npm install disqus-react --save

步骤3：创建 Disqus 组件

在您的 pages 目录中创建一个名为 "comments.js" 的新文件。在该文件中，您将要编写一个组件来调用 Disqus 评论系统。以下是组件代码：

import React from 'react';
import { DiscussionEmbed } from 'disqus-react';

function Comments() {
  const disqusShortname = process.env.NEXT_PUBLIC_DISQUS_SHORTNAME;
  const disqusConfig = {
    url: `${window.location.origin}/comments`,
    identifier: window.location.pathname,
    title: 'Comments',
  };

  return (
    <div>
      <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
    </div>
  );
}

export default Comments;

在此组件中，我们import和使用了 disqus-react 的 DiscussionEmbed 组件。我们使用该组件来构建 Disqus 评论系统并将其嵌入我们的网站。

我们还声明了一个名为 disqusShortname 的常量，并使用 NEXT_PUBLIC_DISQUS_SHORTNAME 环境变量将其设置为您的 Disqus 帐户的短名称。此环境变量需要在您的 .env 文件中设置，并通过社交媒体、电子邮件或其他方法安全地共享给其他开发人员。

最后，我们还构建了一个名为 disqusConfig 的对象，其中包含我们网站处理 Disqus 的 URL、主题标识符和评论系统的主题。在使用 DiscussionEmbed 组件时，我们将此对象作为配置参数传递。

步骤4：使用 Disqus 组件

现在，我们已准备好将 Disqus 组件嵌入我们的 Next.js 网站中。现在，可以在需要评论的页面中通过以下方式引用 Comments 组件：

import dynamic from 'next/dynamic';
const Comments = dynamic(() => import('./comments'));

function PostPage() {
  return (
    <div>
      {/* your post here */}
      <Comments />
    </div>
  );
}

现在，在您的页面中，您应该看到 Disqus 评论系统正常显示，并准备好接受用户提交的评论。

集成 Gitment 评论系统

Gitment 是另一种难以置信的评论系统，它使用 GitHub 存储库和问题跟踪器向您的网站添加评论功能。以下是集成 Gitment 的步骤：

步骤1：创建 GitHub 存储库

要使用 Gitment，您需要在 GitHub 上创建一个存储库，并开启 Issues 功能。在存储库和问题跟踪器启用之后，您将获得一个名为 "access_token" 的访问令牌，该令牌将供使用 Gitment 时使用。

步骤2：安装 react-gitment

要在 Next.js 中使用 Gitment，您需要安装 react-gitment 模块。要安装模块，请在终端中运行以下命令：

npm install react-gitment --save

步骤3：创建 Gitment 组件

在您的 pages 目录中创建一个名为 "comments.js" 的新文件。按以下方式编写组件代码：

import React from 'react';
import Gitment from 'react-gitment';

function Comments() {
  const gitmentConfig = {
    id: 'Your page ID',
    owner: 'Your GitHub ID',
    repo: 'Your repository name',
    oauth: {
      client_id: 'Your client ID',
      client_secret: 'Your client secret',
    },
  };

  return (
    <div>
      <Gitment options={gitmentConfig} />
    </div>
  );
}

export default Comments;

备注：gitmentConfig

在此组件中，我们import和使用 react-gitment 模块，以创建 Gitment 评论系统。我们还声明了一个名为 gitmentConfig 的对象，它包含我们 GitHub 存储库的所有详细信息（包括页面 ID、仓库名称和访问令牌），以便 react-gitment 知道如何获取和存储从我们的站点提交的评论。

步骤4：使用 Gitment 组件

现在，我们已准备好将 Gitment 组件嵌入我们的 Next.js 网站中。现在，可以在需要评论的页面中通过以下方式引用 Comments 组件：

import dynamic from 'next/dynamic';
const Comments = dynamic(() => import('./comments'));

function PostPage() {
  return (
    <div>
      {/* your post here */}
      <Comments />
    </div>
  );
}

现在，在您的页面中，您应该看到 Gitment 评论系统正常显示，并准备好接受用户提交的评论。

总结

在 Next.js 中添加评论系统可能比您想象的要简单得多。通过使用 Disqus 或 Gitment，您可以轻松地将评论功能添加到您的站点上，并让用户留下反馈、持续改进您的内容和接触用户的界面。注意，在使用任何评论系统时，请将安全性和隐私保护变成您的优先事项，并充分了解您与用户共享的数据分别存储在哪里。