FastComments.com

Add Members-Only Live Commenting to ghost Sites


使用 FastComments,我們可以輕鬆為任何使用 Ghost 建立的網站新增即時、僅限會員的留言功能。

我們能夠 自動匯入您的會員使用者名稱、頭像,並設定留言回覆通知

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

在本教學中我們將以使用 Ghost 建立的部落格為目標,但只要有一些技巧,同樣的指示可套用於任何類型的網站。

本教學從對 Ghost 非常陌生的使用者角度出發。熟悉編輯佈景主題的使用者可以跳到 Step 4

如果您遇到困難,歡迎將匯出的佈景主題範本發送給您的支援代表(仍然需要完成步驟 1 - 5)。


步驟 1:下載您的主題 Internal Link

要將 FastComments 正確加入到 Ghost,我們必須編輯佈景主題檔案。

所以我們先從下載你現有的或想要使用的主題開始。

前往網站控制台,然後點擊左下角的齒輪:

開啟設定
開啟設定

接著選擇 Design 選項:

選擇 Design
選擇 Design

雖然從技術上我們並沒有更改主題,但請在左下角點擊 Change Theme

變更主題
變更主題

在右上角選擇 Advanced

選擇 Advanced
選擇 Advanced

...然後下載你目前或理想的主題:

下載主題
下載主題

步驟 2:在本機安裝您的主題 Internal Link

既然我們已經下載了 zip 檔案,請將它解壓到一個資料夾。我已下載預設的 casper.zip,並在 Windows 上解壓到 Downloads\casper

接著,請確認已安裝 LTS 或更新版本的 NodeJS。你可以在這裡下載:https://nodejs.org/en/download/

安裝好 NodeJS 後,請安裝一個程式碼編輯器。

我們推薦(並使用)WebStorm,你可以在這裡取得 30 天試用(不需信用卡):https://www.jetbrains.com/webstorm/

次佳的免費選擇可能是 Visual Studio Code: https://code.visualstudio.com/download

在編輯器設定好並打開主題資料夾後,在 IDE 中開啟終端機並執行:

安裝主題
Copy Copy
1
2npm install
3

成功的輸出會像這樣(你可以忽略警告):

成功的 npm install 輸出
成功的 npm install 輸出

這會為之後要執行的指令設定主題的相依套件。此外,匯出功能仰賴主題相依套件已安裝,否則重新匯入將無法正常運作。

步驟 3:為新主題命名 Internal Link


現在在編輯器中開啟了佈景主題後,打開 package.json 並將 name 欄位更改為其他名稱。以我們的例子,我們只是在結尾加上 -fastcomments

重新命名佈景主題
重新命名佈景主題

如果您使用 IDE,系統會在您做出此更改後自動儲存。


步驟 4:開啟文章範本 Internal Link


現在我們要打開用於我們部落格文章的範本。它名為 post.hbs:

打開 post.hbs
打開 post.hbs

步驟 5:加入 FastComments 程式碼 Internal Link

接下來我們需要找出要加入 FastComments.com 小工具程式碼的位置。

如果您使用預設的 casper 主題,您會在第 82 行看到像這樣的區段:

已停用的評論區
已停用的評論區

如果您使用其他主題,可能不會看到這個,您需要在最後一個 </section> 之後加入以下程式碼:

區段範例
Copy Copy
1
2<section class="article-comments gh-canvas">
3</section>
4

您應該會準備好類似下列的內容:

用於評論程式碼的範本已準備好
用於評論程式碼的範本已準備好

準備好後,複製 FastComments.com 小工具程式碼:

Ghost FastComments.com 評論程式碼片段
Copy 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 let simpleSSO = null;
7
8 {{#if access}}
9 {{#if @member}}
10 simpleSSO = {
11 id: '{{ @member.uuid }}',
12 email: '{{@member.email}}',
13 username: '{{@member.name}}',
14 avatar: '{{ @member.avatar_image }}',
15 optedInNotifications: true,
16 optedInSubscriptionNotifications: true,
17 displayLabel: '{{@member.labels}}'
18 }
19 {{/if}}
20 {{/if}}
21
22 FastCommentsUI(document.getElementById('fastcomments-widget'), {
23 tenantId: "demo",
24 urlId: window.location.pathname,
25 allowAnon: false,
26 simpleSSO: simpleSSO
27 });
28 })();
29</script>
30

...並且它應該會長這樣:

新增 FastComments.com 評論程式碼
新增 FastComments.com 評論程式碼

程式碼已完成。現在我們只需重新匯入主題!

步驟 6:匯出您的主題 Internal Link


現在我們需要將主題檔案重新打包成 zip 檔。為此,請使用 Ghost 的內建功能。

在編輯器中再次打開終端機並執行 npm run zip

匯出您的主題
匯出您的主題

這會將主題封裝成 zip 檔,放在 dist/casper-fastcomments.zip(如果你在 Step Three 中以該名稱命名主題的話)。


步驟 7:將主題上傳到 Ghost Internal Link

回到 Ghost 儀表板,讓我們上傳主題:

上傳您的主題
Upload Your Theme

對我而言,zip 檔案放在下列位置。注意 dist 資料夾:

選擇要上傳的 Zip 檔案
Select Zip to Upload

記得啟用您新上傳的主題(Ghost 應該會提示您)。

成功! Internal Link


現在我們應該已為會員啟用了 FastComments 即時評論功能!

成功!
成功!

恭喜您已在 Ghost 上設定好 FastComments!如果您遇到 Domain Error,或想了解如何自訂評論區,請繼續閱讀!


自訂 Internal Link


FastComments 設計為可自訂,以配合您的網站。

如果您想新增自訂樣式或微調設定,請參閱我們的自訂化說明文件 自訂化說明文件 以了解如何。