Add Comments to Wix Sites

在此範例中，我們將在部落格文章頁面加入 FastComments 即時留言。

為此，我們會在 Wix 編輯器中開啟我們的網站。

接著，我們需要確認正在編輯正確的頁面。

我們希望為每篇部落格文章顯示獨立的留言串，所以請編輯 Blog Pages -> Post。

第一步：編輯動態文章頁面

接著，我們會前往 Add -> Embed Code -> Embed HTML。

步驟二：新增嵌入 HTML 區塊

這會給我們一個看起來有點空的方塊，作為起點：

起始區塊

此範例使用自訂程式碼以與 Wix 相容。您將無法使用其他教學中的 FastComments 程式碼片段。

按一下 Enter Code 並選擇 HTML 來開啟表單以新增我們的自訂 HTML 對話方塊：

步驟 3：開啟 HTML 對話方塊

將下列 HTML 片段複製並貼入對話方塊，然後按「更新」：

Wix 留言 程式碼片段

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

步驟 3：貼上並儲存

您現在應該會看到一個非常小的留言元件：

步驟 3：結果

接下來我們會調整其位置與大小以適合頁面。

現在我們已經加入評論小工具，讓我們把它安排在頁面上。

步驟 4：調整大小

透過本教學，我們將能根據目前啟用的頁面更改當前的討論串。然而，我們無法動態調整評論小工具的大小 直到 Wix 開放此功能。在此之前，你必須決定頁面上評論區的大小，並適當設定其尺寸。

接下來，我們要設定讓留言串依據目前頁面變化，讓使用者可以針對當前顯示的內容進行討論。

如果不進行以下步驟，你的整個網站只會有一個全域留言串 —— 這樣沒什麼用處。

開發模式

要新增這個功能，我們需要進入 Wix 所稱的 Dev Mode。

點選畫面上方的 Dev Mode 選項。

啟用開發模式

設定元素 ID

我們將加入自訂程式碼來完成此功能，但首先需要為新的嵌入元素指定一個 ID 以便參照。

我們把它命名為 fastcomments。

點選我們新增的嵌入元素，在開發模式中在右下角你應該會看到一個像 html1 的 ID 欄位：

ID 欄位

將它改為 fastcomments 然後按 Enter：

設定 ID

現在我們可以加入自訂程式碼來告訴留言區我們正在查看哪一個頁面。

在畫面底部你應該會看到類似這樣的程式碼編輯器：

開啟編輯器

複製下列程式碼並貼到那裡：

Wix 評論導覽程式碼片段

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

加入導覽程式碼

現在我們可以稍作喘息並預覽我們的網站。您應該會看到一個會根據當前頁面變換的留言區。恭喜！

如果您有任何問題，請在下方的留言框告訴我們。

FastComments 設計成可自訂，以配合您的網站。

如果您想新增自訂樣式，或調整設定，請查看我們的自訂與設定文件以了解如何操作。