简介

​ Waline - 一款从 Valine在新窗口打开 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine。

特性：

  • 快速
  • 真·安全
  • Markdown 语法支持
  • 轻量易用
  • 免费部署
  • 多种部署部署方式和存储服务支持，每列选择一项多达 84 种部署方式任君选择

​ 先放上说明文档链接快速上手 | Waline， 依照说明文档有很多小技巧和美化教程方便你后续执行。本文仅说明下如何在Hexo-Matery主题下配置Waline评论模块。

Waline的服务端地址请仔细阅读说明文档，这里不再赘述。

步骤

​ 首先，在主题/设置文件下新增以下设置代码,类似valine评论系统设置一样，如果要启用它，enable: 请置为 true；

同时在matery配置cdn加速文件下新增如下内容

// matery / _config.yml
waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js


// matery / _config.yml
waline:
    enable: true
    path: # 全局评论地址
    meta: nick,mail,link # waline comment header info
    requiredFields: ['nick','mail']
 
    serverURL:           # Waline的服务端地址（必填） 
    imageHosting: # 图床api，如果允许评论框上传图片
    avatar: wavatar # gravatar style 
    pageSize: 10 # 评论每页显示数量
    lang: zh-CN

​ 再进入到主题文件下 source/libs 下，新建waline文件夹，新建av-min.js文件

文件内容 点击跳转，

​ 主题文件下 layout/_partial下，新建waline.ejs文件，之后的美化文件也可以在这里编写。内容如下：

 
<!--  
<style>
    
</style>
<div id="waline">
    <i class="fas fa-cog fa-spin fa-fw fa-2x"></i>
</div>
<script src="<%- theme.jsDelivr.url %><%- url_for('/libs/waline/av-min.js') %>"></script>
<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.waline) %>"></script>
<script>
     
    Waline({
      el: '#waline',
      serverURL: 'https://blog-talk-b63oews2e-yifangtan.vercel.app',
      uploadImage: function(file) {
            const formData = new FormData();
            formData.append('image', file);
            return fetch('<%= theme.waline.imageHosting %>',{method: 'POST',body: formData
            }).then(resp => resp.json()).then(resp => resp.data.url);
        },
        emoji: [
    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
    ],
      placeholder:  '快来评论吧！',
      pageSize: '<%= theme.waline.pageSize %>',
      avatar: '<%= theme.waline.avatar %>',
      lang: '<%= theme.waline.lang %>',
    });
</script> -->

​ 主题文件下layout/_partial/post_detail.ejs 下新增以下代码 相当于在相应页面的waline的开关；

// layout/contact.ejs 
// layout/_partial/post_detail.ejs 下新增
<% if (theme.waline && theme.waline.enable) { %>
        <%- partial('_partial/waline') %>
    <% } %>

​ 主题文件下layout/contact.ejs 下同样新增以上的代码

至此，waline评论模块就安装完成了。博主目前使用的就是waline评论模块，我感觉，很棒！后端评论数据库很方便管理，并且植入
Qmsg酱体验很棒！