说明：距离该文章发布已经过很长时间，无法保证内容的时效性。

前言

博主使用的volantis主题默认搭配了许多评论插件，当中最简洁和简单的当属valine了。

但是无后端的valine存在一个安全问题，即配置的leancloud的id和key可以直接从页面源码中获取到，于是一款With backend Valine的waline评论系统应运而生了，开发者是前面指点我修改推送评论js的大佬。

在折腾了两个小时仍然没配置完好的情况下，我借鉴了黑石大佬的配置，因此水一文，给其他要在volantis主题上使用waline的朋友一个参考，避免走弯路。

waline的配置和valine的配置差不了太多，所以可以参考一部分内容。

操作

部署后端

服务端部署支持多种部署方式和存储服务：

Waline
Client Server Storage
@waline/client Vercel LeanCloud
MiniValine CloudBase CloudBase
Docker MongoDB
Virtual Host MySQL
SQLite
PostgreSQL

我部署在vercel，可以参考官方文档，当然CloudBase也有官方文档。

提示：①如果你部署到vercel，可以直接使用此前leancloud存储的valine相关数据。
 ②如果部署在其它后端，waline也提供了数据迁移助手。

配置yml

在_config.volantis.yml的comments里添加如下内容：

waline:
  js: https://cdn.jsdelivr.net/npm/@waline/client@latest
  path: # 全局评论地址
  meta: nick,mail,link # waline comment header info
  requiredFields: ['nick','mail']
  placeholder: 快来评论吧~  # 评论占位提示
  serverURL:  # Waline的服务端地址（必填） 
  imageHosting: # 图床api，如果允许评论框上传图片
  avatar: robohash # gravatar头像
  avatarCDN: https://sdn.geekzu.org/avatar/ #不建议使用loli源
  pageSize: 10 # 评论每页显示数量
  lang: zh-CN

如图：

walineyml

配置脚本

①在yourblog\themes\volantis\layout\_third-party\comments\下创建waline文件夹；

②创建layout.ejs，内容如下：

<div id="waline">
  <i class="fas fa-cog fa-spin fa-fw fa-2x"></i>
</div>

③创建script.ejs，内容如下：

<% if (theme.comments.waline.js) { %>
<%- js(theme.comments.waline.js) %>
<% } else { %>
<%- js(['https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js']) %>
<% } %>
<script>
  var GUEST_INFO = ['nick', 'mail', 'link'];
  var meta = '<%= theme.comments.waline.meta %>'.split(',').filter(function (item) {
    return GUEST_INFO.indexOf(item) > -1
  });
  var REQUIRED_FIELDS = ['nick', 'mail', 'link'];
  var requiredFields = '<%= theme.comments.waline.requiredFields %>'.split(',').filter(function (item) {
    return REQUIRED_FIELDS.indexOf(item) > -1
  });
  function pjax_waline() {
    if(!document.querySelectorAll("#waline")[0])return;
    let pagePlaceholder = pdata.commentPlaceholder || "<%= theme.comments.waline.placeholder %>";
    let path = pdata.commentPath;
    if (path.length == 0) {
      let defaultPath = '<%= theme.comments.waline.path %>';
      path = defaultPath || decodeURI(location.pathname.replace(/\/$/, '') );
    }
    new Waline({
      el: '#waline',
      meta: meta,
      placeholder: pagePlaceholder,
      path: path,
      serverURL: '<%= theme.comments.waline.serverURL %>',
      avatarCDN: '<%= theme.comments.waline.avatarCDN %>',
      uploadImage: function(file) {
      const formData = new FormData();
      formData.append('image', file);
      return fetch('<%= theme.comments.waline.imageHosting %>', {
        method: 'POST',
        body: formData
      }).then(resp => resp.json()).then(resp => resp.data.url);
    },
      requiredFields: requiredFields,
      pageSize: '<%= theme.comments.waline.pageSize %>',
      avatar: '<%= theme.comments.waline.avatar %>',
      lang: '<%= theme.comments.waline.lang %>'
  
    });
  }
  $(function () {
    pjax_waline();
  });
</script>

④修改pjax文件，路径在yourblog\themes\volantis\layout\_third-party\pjax\index.ejs，添加在其它评论系统下面即可，内容如下：

<% } %>
<% if (theme.comments.service == 'waline'){ %>
  pjax_waline();
<% } %>

如图：

walinepjax

配置推送（可选）

目前waline集成了多种推送方式，相比此前方便许多，配置参考官网文档。

体验使用

hexo cl && hexo s，你现在就可以尝试在评论框里输入内容了。