FastComments.com

在 BigCommerce 網站添加評論

With FastComments 我們可以輕鬆地為任何 BigCommerce 網站新增即時留言功能。

下面的說明針對建立在 BigCommerce 上的部落格,但也同樣適用於 BigCommerce 的任何其他部分。

請注意,本教學需要一個 FastComments 帳戶。建議您先註冊,然後再回來此處。 您可以在這裡建立帳戶。

步驟一:準備您的主題 Internal Link

首先,讓我們建立一個要編輯的自訂主題。如果您已經有自訂主題設定,您可以跳過此步驟。

為此,我們將前往 Storefront 然後 Themes。

選擇 Storefront
選擇 Storefront
選擇 Themes
選擇 Themes

在本教學中我們將使用預設主題,但這些指示對所有主題都相同。

接下來,我們是 不 會點選 Customize。取而代之的是,點選 Advanced 然後 Make a Copy。

建立複本
建立複本

確認複製主題:

儲存複本
儲存複本

完成後,您應該會在頁面底部的 Themes 下看到列出的主題,如下所示。

已建立自訂主題
已建立自訂主題

現在我們可以編輯新的主題以加入 FastComments。

編輯主題檔案
編輯主題檔案

步驟二:編輯正確的模板 Internal Link

下一步是新增使整合運作的 widget 程式碼。

按照前一個步驟的指示進入主題編輯器後,你會在左側看到檔案瀏覽器,右側看到編輯器。

我們將編輯代表部落格文章頁面的 範本。

在左側導覽中,前往 templates->pages->blog-post.html。

開啟範本
開啟範本

步驟三:添加小工具代碼 Internal Link

接下來,複製我們將用來安裝 FastComments 的程式碼:

BigCommerce Comments Code
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo"
7}];
8</script>
9

現在我們要將 widget 程式碼貼到 Line 6。重要的是程式碼必須在包含 \{{/partial}} 的那一行 之前 新增。

貼到第 6 行
貼到第 6 行

你應該會得到類似下面的結果:

新增程式碼後
新增程式碼後

現在我們可以儲存檔案:

儲存
儲存

...並離開編輯器:

編輯編輯器
編輯編輯器

步驟四:啟用新主題 Internal Link

我們的最後一步是使用新的主題模板。

在右上角,您現在會看到 Publish 或 Make Active Theme。點擊該按鈕以繼續並讓變更生效:

發佈變更
發佈變更

現在我們可以查看我們的網站了!如果您前往一篇部落格文章,您應該會在底部看到一個留言框。

變更已生效
變更已生效

成功 Internal Link

做得好!你已為你的 BigCommerce 網站新增即時評論功能。

如果你遇到權限被拒的錯誤,或想要自訂 FastComments,請繼續閱讀。

自訂 Internal Link

FastComments 設計為可客製化,以配合您的網站。

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

額外:頁面建構器的程式碼片段 Internal Link

不建議透過 BigCommerce 的 Page Builder 新增 FastComments,因為這樣必須手動將程式碼加入每個想要的頁面。

然而,如果真的想這樣做,必須使用下列程式碼片段。由於 BigCommerce 的特性,其他教學中的程式碼片段將無法使用:

BigCommerce Page Builder 程式碼片段
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: "demo"
8 }];
9</script>
10