如何在静态网站上添加评论区

静态网站通过预先定义的 HTML、CSS 和 JavaScript 文件集提供内容，因此对许多人来说是一种直接而经济的选择。

尽管静态网站具有固定的性质，但可以通过动态内容元素来增强网站功能，从而促进用户互动。通过整合评论区，访问者可以就网站内容或服务发表意见、提供反馈或提出问题。

这一新增功能可促进社区参与，使您能够与受众建立联系，并根据他们的反馈完善您的产品。本教程演示了在静态网站中添加评论区。

在服务器上部署基本的静态网站

本教程使用 Docusaurus 模板。Docusaurus 是一款流行的静态网站生成器，使用顶级 JavaScript 库之一的 React 作为创建页面的用户界面库。

以 Kinsta 服务器为例，请按照以下步骤在服务器上设置该网站：

要使用 Docusaurus 模板，请单击 “Use this template” > “Create a new repository“。
运行以下命令将版本库克隆到本地计算机上：
```
https://github.com/kinsta/hello-world-docusaurus.git
```
注：将文档、页面和其他静态文件等内容添加到本地存储库的相应目录中，定制您的静态网站。您还可以更改布局和外观，以符合您的品牌准则。阅读我们的指南，了解如何定制 Docusaurus 网站。
登录或创建账户，查看 MyKinsta 面板。
通过 Git 提供商授权 Kinsta。
单击左侧边栏上的 “Static Sites“，然后单击 “Add site“。
选择要部署的版本库和分支。
为网站指定一个唯一的名称。
按以下格式添加构建设置：
- 构建命令：npm run build
- 节点版本：18.16.20
- 发布目录：build
最后，点击 Create site。

成功部署网站后，您可以访问已部署网站 “Overview” 选项卡中作为域列出的 URL。

成功部署静态网站

创建 Disqus 账户

Disqus 提供各种工具，通过社交整合、审核工具和分析来提高参与度。它支持通过评论进行在线讨论。请按照以下步骤使用 Disqus：

创建 Disqus 账户。
填写注册过程所需的信息。
注册后，选择 I want to install Disqus on my site。
在 Disqus 上注册您的网站。注册时，为您的网站选择一个简称和一个类别。一个组织会自动生成一个列表，其中包含您的新网站和您将来创建的任何其他网站。
为您的组织选择 Disqus 计划。Disqus 提供多种订阅计划，包括 Plus、Pro 和 Business。在此演示中，您可以选择基本计划，其中包括评论插件、高级垃圾邮件过滤、审核工具和基本分析等核心功能。

将 Disqus 与 Kinsta 上的静态网站集成

下一步是将 Disqus 代码段集成到您的静态网站生成器中。

注册网站后，单击 I don’t see my platform listed, install manually with Universal Code。使用通用代码手动嵌入 Disqus 代码。

显示的页面在标有 “Place the following code where you’d like Disqus to load” 的部分包含一个 JavaScript 代码片段。由于静态网站是一个 React 应用程序，因此必须修改该代码片段才能与 React 配合使用。
在 src/components 文件夹中创建一个名为 Disqus 的文件夹。

在 index.js 文件中使用以下代码。确保将 https://your_shortname_placeholder.disqus.com/embed.js 替换为在通用代码中收到的 URL：

import React, { useEffect } from 'react';
const DisqusComments = () => {
useEffect(() => {
const disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
your page's unique identifier variable
};
// Load Disqus script dynamically
(function () {
const d = document;
const s = d.createElement('script');
s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
// Cleanup Disqus on component unmount
return () => {
const disqusThread = document.getElementById('disqus_thread');
if (disqusThread) {
disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
interference with other components
}
};
}, []); // Run this effect only once on component mount
return (
<div>
<div> id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a>  
href="https://disqus.com/?ref_noscript">comments powered by  
Disqus.</a></noscript>
</div>
);
};
export default DisqusComments;

disqus_config 函数定义了两个变量：

this.page.url – 此变量设置为 PAGE_URL，您应将其替换为页面的规范 URL。Disqus 使用此 URL 来识别评论所属的特定页面。
this.page.identifier – 此变量设置为 PAGE_IDENTIFIER，应替换为页面的唯一标识符。该标识符允许 Disqus 区分具有相同 URL 的页面，并将评论与正确的页面关联起来。

您可以将此组件导入要显示 Disqus 评论部分的页面
```
import DisqusComments from '@site/src/components/Disqus';
```

然后，将 Disqus 评论部分添加到登陆页面，在 src/pages 目录下的 index.js 中加入以下导入语句，并相应地使用 DisqusComments：

export default function Home() {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
<HomepageFeatures />
<DisqusComments/>
</main>
</Layout>
);
}

将这些更改提交到版本库，以反映在 Kinsta 托管的静态网站上：
```
git add .
git commit -m "Adding Disqus Comments"
git push -u origin master
```

如果您在部署静态网站时单击了 Automatic deployment on commit enabled，则提交新更改时将自动在 MyKinsta 上启动部署。否则，请手动部署更改。

集成了 Disqus 评论的静态网站

恭喜-您使用 Kinsta 静态网站托管创建了一个静态网站，并使用 Disqus 集成了评论部分！

您可能需要修改 DisqusComments 组件，以确保按预期加载评论部分。

如何自定义评论区

您可以通过修改静态网站上的评论区外观、实施反应、执行评论审核等方式对其进行自定义。Disqus 上的一些自定义选项包括以下内容。

自定义主题

要自定义 Disqus 评论的主题，请导航到 Disqus 面板，单击 “Settings” 选项卡中的 “General“，然后从 “Color Scheme” 和 “Typeface” 下拉菜单中选择合适的选项。

自定义 Disqus 评论的主题

在网站上启用 reactions

通过在网站上启用 “Reactions”，可以提高受众的参与度。根据您的偏好自定义这些反应。

要启用此功能，请导航至 Disqus 面板上的 “Settings” 选项卡。选择 “Reactions“。然后，单击Enable Reactions on your site。

通过 Disqus 面板配置并启用 Reactions

刷新网站。出现 reactions 选项。

静态网站显示 reactions 集成

评论头像

您可以为用户上传默认评论者头像，让他们感觉自己是社区的一员。

要启用此功能，请导航到 Disqus 面板，单击 “Settings” 选项卡中的 “General“，然后从 “Default Commenter Avatar” 中上传图片。

默认评论者头像功能

评论排序

添加自定义功能，让用户根据 “Oldest First“、”Newest First” 或 “Best First” 对评论进行排序。从 Disqus 面板点击 “Settings” 选项卡中的 “Community“，然后从 “Default Sort” 下拉菜单中选择顺序。

根据提供的顺序对评论进行排序

如何审核评论

要管理 Disqus 上的评论，请使用 Disqus 面板顶部导航栏上的 Disqus 管理面板。该工具可快速查看论坛的评论及其状态（已批准、待批准等）。

您还可以在 Disqus 面板 “Settings” 选项卡下左侧导航窗格中的 “Moderation” 菜单中配置审核规则。

从 Disqus 面板访问审核面板

接下来，查看他们的文档，了解帮助您管理和审核 Disqus 评论的关键步骤和功能。

允许访客发表评论

要允许访客用户在网站上发表评论，请选中 Guest Commenting 复选框，然后单击 Save。在版主从 Disqus 版主控制面板上批准之前，这些评论一直处于待处理状态。

允许访客在你的网站上发表评论

批准、删除评论并将其标记为垃圾评论

通过检查多条评论，您可以在审核面板上执行批量操作（批准、删除评论并将其标记为垃圾评论）。或者，您也可以在展开的评论视图中单独对它们进行审核。

启用此设置后，在显示评论前必须由版主批准。

用批量操作管理 Disqus 评论

小结

本教程教你如何在静态网站中添加评论区。除了 Docusaurus，您还可以在任何其他 SSG（如 VuePress、Gatsby 等）中实施 Disqus。

您在静态网站上使用过 Disqus 或其他评论服务吗？请在下面的评论区分享您的经验。

Docusaurus 评论区评论模块

如何在静态网站上添加评论区

在服务器上部署基本的静态网站

创建 Disqus 账户

将 Disqus 与 Kinsta 上的静态网站集成