如何在靜態網站上新增評論區

靜態網站通過預先定義的 HTML、CSS 和 JavaScript 檔案集提供內容，因此對許多人來說是一種直接而經濟的選擇。

儘管靜態網站具有固定的性質，但可以通過動態內容元素來增強網站功能，從而促進使用者互動。通過整合評論區，訪問者可以就網站內容或服務發表意見、提供反饋或提出問題。

這一新增功能可促進社羣參與，使您能夠與受眾建立聯絡，並根據他們的反饋完善您的產品。本教程演示了在靜態網站中新增評論區。

在伺服器上部署基本的靜態網站

本教程使用 Docusaurus 模板。Docusaurus 是一款流行的靜態網站生成器，使用頂級 JavaScript 庫之一的 React 作為建立頁面的使用者介面庫。

以 Kinsta 伺服器為例，請按照以下步驟在伺服器上設定該網站：

要使用 Docusaurus 模板，請單擊 “Use this template” > “Create a new repository“。
執行以下命令將版本庫克隆到本地計算機上：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
https://github.com/kinsta/hello-world-docusaurus.git
https://github.com/kinsta/hello-world-docusaurus.git
```
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：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
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;
```
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 評論部分的頁面
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import DisqusComments from '@site/src/components/Disqus';
import DisqusComments from '@site/src/components/Disqus';
```
import DisqusComments from '@site/src/components/Disqus';
```
然後，將 Disqus 評論部分新增到登陸頁面，在 src/pages 目錄下的 index.js 中加入以下匯入語句，並相應地使用 DisqusComments：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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>
);
}
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> ); }
```
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 託管的靜態網站上：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
git add .
git commit -m "Adding Disqus Comments"
git push -u origin master
git add . git commit -m "Adding Disqus Comments" git push -u origin master
```
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 上的靜態網站整合