使用 Waline 評論我喜歡使用的部署方法 (個人認為最簡便)
所需帳號#
- 一個 Github 帳號
- 一個 Vercel 帳號
- 一個 leancloud 帳號 (最好是國際服的，你有了 Github 難道還用大陸的嗎？大陸的要備案，故在這裡不闡述，末尾放原文鏈接)
在 leancloud 裡創建資料庫#
-
點擊左上角 創建應用 並起一個你喜歡的名字 (請選擇免費的開發版):
-
進入應用，選擇左下角的
設置>應用 Key。你可以看到你的APP ID,APP Key和Master Key。請記錄它們，以便後續使用。
在 Vercel 部署#
-
點擊上方按鈕，跳轉至 Vercel 進行 Server 端部署。
::: note
如果你未登錄的話，Vercel 會讓你註冊或登錄，請使用 GitHub 賬戶進行快捷登錄。
:::
-
輸入一個你喜歡的 Vercel 項目名稱並點擊
Create繼續:
-
此時 Vercel 會基於 Waline 模板幫助你新建並初始化倉庫，倉庫名為你之前輸入的項目名。
一兩分鐘後，滿屏的煙花會慶祝你部署成功。此時點擊
Go to Dashboard可以跳轉到應用的控制台。
-
點擊頂部的
Settings-Environment Variables進入環境變量配置頁，並配置三個環境變量LEAN_ID,LEAN_KEY和LEAN_MASTER_KEY。它們的值分別對應上一步在 LeanCloud 中獲得的APP ID,APP KEY,Master Key。
-
環境變量配置完成之後點擊頂部的
Deployments點擊頂部最新的一次部署右側的Redeploy按鈕進行重新部署。該步驟是為了讓剛才設置的環境變量生效。
-
此時會跳轉到
Overview界面開始部署，等待片刻後STATUS會變成Ready。此時請點擊Visit，即可跳轉到部署好的網站地址，此地址即為你的服務端地址。
綁定域名 (可選)#
-
點擊頂部的
Settings-Domains進入域名配置頁 -
輸入需要綁定的域名並點擊
Add
-
在域名服務器商處添加新的
CNAME解析記錄Type Name Value CNAME example cname.vercel-dns.com (國區的可用 cname-china.vercel-dns.com) -
等待生效，你可以通過自己的域名來訪問了🎉
- 評論系統：example.yourdomain.com
- 評論管理：example.yourdomain.com/ui
HTML 引入 (客戶端)#
在你的網頁中進行如下設置:
- 導入 Waline 樣式
https://unpkg.com/@waline/client@v3/dist/waline.css
- 創建
<script>標籤使用來自
https://unpkg.com/@waline/client@v3/dist/waline.js
-
的
init()函數初始化，並傳入必要的el與serverURL選項。el選項是 Waline 渲染使用的元素，你可以設置一個字符串形式的 CSS 選擇器或者一個 HTMLElement 對象。serverURL是服務端的地址，即上一步獲取到的值。
<head> <!-- ... --> <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" /> <!-- ... --> </head> <body> <!-- ... --> <div id="waline"></div> <script type="module"> import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js'; init({ el: '#waline', serverURL: 'https://your-domain.vercel.app', }); </script> </body> -
評論服務此時就會在你的网站上成功運行 🎉
評論管理 (管理端)#
- 部署完成後，請訪問
<serverURL>/ui/register進行註冊。首個註冊的人會被設定成管理員。 - 管理員登錄後，即可看到評論管理界面。在這裡可以修改、標記或刪除評論。
- 用戶也可通過評論框註冊賬號，登錄後會跳轉到自己的檔案頁。
視頻教程#
以下是熱心用戶製作的視頻教程，以上操作不清楚的也可以參考一二。
Waline 部署教程（快速上手）#
UP 主：rickroll 摇
使用 Vercel 簡單地部署 Waline 評論系統#
UP 主：岚天呀