手把手教你搭建可自定义的网站评分功能 零门槛直接落地

准备工作

本次实操采用开源免费方案，不需要购买服务器，个人站点零成本可用，仅需要提前准备2项内容：

• 一个支持插入自定义HTML代码的网站（各类静态博客、独立站都支持）
• 注册LeanCloud国际版账号，注册地址：https://www.leancloud.app/，免费开发版额度完全满足个人站点使用，不需要付费。

第一步：创建应用并部署云引擎

所有评分数据存储在你自己的LeanCloud应用中，数据完全可控，按以下步骤操作：

• 登录LeanCloud后台，点击左侧菜单栏创建应用，应用名称输入site-score，选择开发版，点击创建，等待10秒左右应用初始化完成。
• 进入新建的应用，点击左侧菜单栏云引擎 > 部署，选择从GitHub拉取，仓库地址输入 https://github.com/walinejs/waline，分支填写 main，点击开始部署，等待3-5分钟完成部署。
• 部署完成后，点击云引擎的设置，记下系统分配的默认域名，格式为https://site-score.你的用户名.leanapp.cn，这个就是后续要用的服务地址。
• 点击左侧菜单栏设置 > 应用凭证，记下你的AppID和AppKey，两个参数不要填错。
• 点击左侧菜单栏存储 > 结构化数据，点击创建Class，Class名称输入Comment，权限选择自定义，将「添加」「查找」权限开放给所有用户，其他权限保持默认，点击确认创建。

第二步：插入网站评分代码

在你需要显示网站评分的位置（一般是首页末尾或者页脚位置），按顺序插入以下三段代码，直接复制替换参数即可：

1. 引入样式文件

把这段代码放在网站的标签内：

```html ```

2. 添加评分容器

把这段代码放在你想要显示评分的具体位置：

```html ```

3. 初始化评分组件

把这段代码放在网站标签的末尾，替换里面的三个参数为你自己的信息：

```html ```

第三步：自定义调整评分功能

默认配置已经可以直接使用，你可以根据需求修改以下常用配置，所有配置直接添加在上面的init配置对象中即可：

调整评分等级

默认是1-5星评分，如果需要1-10分制，添加配置项：

```js ratingLevels: 10 ```

修改提示文字

如果需要修改默认提示语，比如改成给文章打分，添加配置项：

```js locale: { ratingTitle: '你觉得这篇文章怎么样？' } ```

自定义样式适配网站

如果需要调整评分组件的颜色、宽度适配你的网站，把以下CSS代码添加到你的网站样式文件中，修改对应值即可：

```css / 修改选中星星的颜色，替换成你的网站主色调 / .waline-rating .wl-rating-star.active { color: 2563eb; } / 调整容器宽度，和你的网站内容宽度保持一致 / site-score-waline { max-width: 800px; margin: 2rem auto; padding: 0 1rem; } ```

查看评分数据

配置完成后，组件会自动在评分区域显示当前的总打分人数和平均分，访客可以直接看到统计结果。你也可以随时进入LeanCloud后台，打开存储 > 结构化数据 > Comment查看所有用户的打分记录，所有数据完全掌握在你自己手里，不需要依赖第三方平台。

常见卡壳问题排查

• 组件不显示：检查服务地址、AppID、AppKey是否填写正确，确认服务地址是HTTPS开头，和你后台的域名一致，末尾不要加多余的斜杠。
• 打分提示无权限：重新检查Comment表的权限，确认「添加」「查找」权限已经开放给所有用户，保存权限设置后刷新页面重试。
• 云引擎部署超时：切换到LeanCloud国际版，国内版网络限制容易拉取GitHub代码失败，国际版免费额度足够，访问速度更快。