自从“多说”关闭,许多独立博主都在寻找其代替方案,这时,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 主题现已更换成 vexo(使用ejs
模板引擎渲染)- 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/[email protected]/dist/av-min.js"></script>
<!-- Valine 核心代码库 -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/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
数据表中也会有评论数据。
本文由 imbytecat 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: May 9, 2020 at 09:24 pm