Valine 评论系统与 LeanCloud 配置教程 - 音乃木坂 COFFEE HOUSE

本文总共 2642 字 | 阅读全文大约需要 8 分钟

欢迎使用 Valine 评论系统！一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。

为什么选择 Valine

安全、简洁
快速且高效
开源，自定义程度高
无后端实现
Emoji 支持 🎅
支持安全验证码
支持邮件提醒
支持 Markdown 语法

在你的网站上使用 Valine

Valine 需要配合 LeanCloud 使用。

LeanCloud: 是一站式后端云服务平台。Valine 会把评论数据存储在 LeanCloud 应用的 Comment Class 中，因此需要先创建应用并取得应用凭证。

获取 AppID 和 AppKey

首先注册或登录到 LeanCloud，打开控制台。

点击创建应用新建一个应用。

填写应用名称。个人博客的评论量通常不大，计价方案可按实际需求选择。

创建应用

在 设置 > 应用凭证 中可查看到 AppID 和 AppKey。

获取 AppID 和 AppKey

填写安全域名

为了您的数据安全，请填写应用 > 设置 > 安全设置中的 Web 安全域名。

由于 App ID 和 App Key 是完全暴露的，任何人都可以访问我们的资源。为了防止他人使用，我们需要配置 Web 安全域名，只有添加的域名才可以使用资源。

在 应用 > 设置 > 安全设置 中的 Web 安全域名 一栏填写站点域名后保存即可。

设置 Web 安全域名

注意：如果调试时调用 api.leancloud.cn 返回 403，通常是 Web 安全域名、应用凭证、服务地址或 Class 权限配置不匹配导致的拒绝访问，不要按普通服务器目录权限问题处理。

403 错误示例

检查填写的安全域名是否正确，或者可以考虑放弃安全域名。

检查并修改 存储 > Class 中因设置了相应权限导致无法访问的权限设置。

添加 HTML 片段

为你的页面添加以下代码，并将初始化对象中的 appId 和 appKey 改为刚刚获取到的值（其他配置可以先保持默认）。

<head>
    ...
    <!--Valine 的核心代码库-->
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    ...
</head>
<body>
    ...
    <div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: '<AppID>',
            appKey: '<AppKey>'
        })
    </script>
</body>

使用 npm 安装（可选）

在 npm 上查看 Valine

如果需要通过构建工具管理依赖，可以使用 npm 安装 Valine。安装后在打包入口中导入 Valine，而不是继续使用上方的 CDN 脚本。

新版 Node.js 集成了 npm，前往官方下载最新版本。安装完 Node.js 后，可以通过在命令提示符中输入 npm -v 检查 npm 版本号。

直接用命令安装：

# Install valine

npm install valine --save

// Use import
import Valine from 'valine';
// or Use require
const Valine = require('valine');

new Valine({
el:'#vcomments',
// other config
})

至此，您可以查看您的页面是否已经出现了评论功能。

配置项

查看详细配置

如要对配置进行更多修改，请在刚才填写 APP ID 与 APP KEY 的地方加入并修改相应的配置项。

如下，我添加了 placeholder、avatar、visitor 和 recordIP 这几个常用配置项。

<script>
    new Valine({
        el: '#vcomments' ,
        appId: '<APP_ID>',
        appKey: '<APP_KEY>',
        avatar: 'mp',
        placeholder: '在此处填写评论',
        visitor: true,
        recordIP: false
    });
</script>

notify 和 verify 在 Valine v1.4.0+ 中已经废弃，不建议继续写进新配置。

评论数据管理

在 LeanCloud 应用中直接管理

评论数据都会存储在名为 Comment 的 Class 中，需要自行登录 LeanCloud 应用 管理。

进入你的应用 > 存储 > Comment，之后你可以对所有评论进行操作。

评论数据管理

Valine-Admin

查看 Valine Admin 配置手册

建议配合 @panjunwen 开发的 Valine-Admin 使用。

Valine Admin 是 Valine 评论系统的扩展和增强，主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板。基于 Akismet API 实现准确的垃圾评论过滤。此外，使用云函数等技术解决了免费版云引擎休眠问题，支持云引擎自动唤醒，漏发邮件自动补发。兼容云淡风轻及 Deserts 维护的多版本 Valine。