自从“多说”关闭,许多独立博主都在寻找其代替方案,这时,Valine 横空出世。
我目前使用 Valine 作为 Hexo 的评论系统。Valine 是一款基于 LeanCloud 的评论系统,无需自建后端。LeanCloud 则是一家提供数据存储服务的网站,类似 Google 的 Firebase。
Valine 有以下特点:
- 可以方便导入来自 Disqus 的评论数据
- 配置简单,仅需加入一些 JavaScript 代码
- 无需自建后端
- 加载快速,使用国内后端云服务提供商 LeanCloud 提供的存储服务
- 小巧玲珑,核心文件仅几十 KB 大小
- 开源项目,可自定义程度高
- 支持邮件通知
- 支持安全验证码
- Markdown 语法支持
- 支持多级回复
- ……
更多相关资料:
LeanCloud 设置
在使用 Valine 之前,我们首先需要注册一个 LeanCloud 账户,并创建一个 App。由于一般个人博主的评论并不会太多,因此我们选择免费的“开发版”应用就可以了。创建好作为存储评论的应用数据库之后,记录好给出的
App ID
和 App Key
即可(你的应用
-> 设置
-> 应用 Keys
)。需要注意的是,必须先将用于 Valine 的网站域名加入“安全域名”中(你的应用
-> 设置
-> 安全中心
),否则之后的 Valine 评论框将无法使用。Valine 配置
以 Hexo 中使用为例,我的环境是:
- Hexo 静态博客
- Daily 主题
- Valine 1.3.10(目前最新)
修改 Hexo 配置文件
在配置文件
_config.yml
中加入以下变量:valine: enable: true # Valine 启用状态 app_id: gw*****************************sz app_key: xf********************6P placeholder: ヾノ≧∀≦)o来啊,快活啊! # 占位显示内容 pageSize: 10 # 每次显示的评论数量
当然,你也可以改成其他变量名,这只在下面生成评论框对象的时候会用到。
修改主题的评论模板
我使用的主题是 Daily,模板引擎是
ejs
,其它主题大同小异,稍微研究一下就明白了。例如 Daily 的评论模板是
./themes/Daily/layout/_partial/comments.ejs
,内容是:<% if (page.comments){ %> <section id="comment"> <!-- <h1 class="title"><%= __('comment') %></h1> --> <% if(config.disqus_shortname) { %> <div id="disqus_thread"> <script type="text/javascript"> var disqus_config = function () { this.page.url = window.location.href; this.page.identifier = '<%= page.layout %>-<%= page.slug %>'; this.page.title = '<%= page.title %>'; }; </script> <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> <% } else if (config.duoshuo_shortname) { %> <!-- 多说评论框 start --> <div class="ds-thread" data-thread-key="<%= page.layout %>-<%= page.slug %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div> <!-- 多说评论框 end --> <% } %> </section> <% } %>
我们在下面加上 Valine 的代码:
<% if (page.comments){ %> <section id="comment"> <!-- <h1 class="title"><%= __('comment') %></h1> --> <% if(config.disqus_shortname) { %> <!-- Disqus 评论框 start --> <div id="disqus_thread"> <script type="text/javascript"> var disqus_config = function () { this.page.url = window.location.href; this.page.identifier = '<%= page.layout %>-<%= page.slug %>'; this.page.title = '<%= page.title %>'; }; </script> <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> <!-- Disqus 评论框 end --> <% } else if (config.valine.enable) { %> <!-- Valine 评论框 start --> <!-- LeanCloud 操作库 --> <script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.2.0/dist/av-min.js"></script> <!-- Valine 核心代码库 --> <script src="//cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js"></script> <div class="vcomment"></div> <script> new Valine({ el: '#vcomment', appId: '<%= theme.valine.app_id %>', appKey: '<%= theme.valine.app_key %>', placeholder: '<%= theme.valine.placeholder %>', avatar: 'retro', pageSize: '<%= theme.valine.pageSize %>', recordIP: true }); </script> <!-- Valine 评论框 end --> <% } %> </section> <% } %>
注意:
- 由于多说已经无法使用,故所有相关代码已删除
- 如果在上一步你和我使用了相同的变量名称,则可以直接复制 Valine 部分代码,否则请修改 Valine 对象的配置项
- 更多的配置项可以在 Valine 使用文档中查看,可以实现邮件通知、安全验证、浏览计数等功能
- 我使用的是 CDN 提供的 LeanCloud 操作库和 Valine 核心代码,你也可以下载后放在想要的位置上
测试使用
如果不出意外,这个时候已经可以使用 Valine 评论框了,LeanCloud 相关应用的
Comment
数据表中也会有评论数据。