OrangeSummer's Blog

Sakura主题添加waline评论系统

7分钟阅读

为什么要将valine评论系统更换为waline

Waline文档

LeanCloud设置(数据库)

详情请看文档

注册 LeanCloud国际版

创建应用

Vercel 部署 (服务端)

详情请看文档

注册 Vercel

创建 Vercel 项目初始化仓库并部署

配置环境变量并部署

注意事项

修改代码以后 Vercel 会自动部署但只有如下图标注current 才代表是当前生产环境

如果需要将某一个部署应用为当前生产环境，需要选择下图的promote to production 而不是 redeploy

HTML 引入 (客户端)

  1. 修改themes\Sakura\_config.yml 将 valine 的 enable 值修改为 false 添加代码，服务端地址设成 Vercel 部署完产生的地址，具体各参数请查看文档

     waline:
   enable: true
   serverURL: #服务端地址
   visitor: false #统计阅读量
   comment_count: true #统计评论数
   avatar: mp # Gravatar style : mp/identicon/monsterid/wavatar/retro/hide
   guest_info: nick #,mail,link # custom comment header
   pageSize: 10
   placeholder: 祝开开心心！ # Comment Box placeholder
   requiredFields: [ 'nick','mail' ] #设置必填项
   background: https://gitee.com/cungudafa/source/raw/master/img/gif/Sitich/Sitich2.gif #输入框提示动画

  2. 在themes/Sakura/layout/_partial 目录 comment.ejs 文件中添加代码如下, 具体各参数请查看文档

     <% if (theme.waline.enable && post.comments) { %>
     <script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
     <div id="waline"></div>
     <style>
     #waline textarea {
         box-sizing: border-box;
         background: url("<%- url_for(theme.waline.background) %>") 100% 100% no-repeat;
     }
     </style>
     <script>
         Waline({
               el: '#waline',
               serverURL: '<%- theme.waline.serverURL %>',
               pageSize: '<%- theme.waline.pageSize %>',
               lang: '<% if (config.language == "zh-cn") {  %>zh-CN<% } else { %>en<% } %>',
               requiredFields: ['nick','mail'], //设置必填项
               placeholder: '<%= theme.waline.placeholder %>',
               visitor: '<%- theme.waline.visitor %>',
               emoji: [
                   'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba',
                   'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
                   'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
               ],
               avatar: '<%- theme.waline.avatar %>',
               dark: 'auto',
             });
     </script>
 <% } %>

评论管理 (管理端)

  1. 部署完成后，请访问<serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员
  2. 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论
  3. 用户也通过评论框注册账号，登陆后会跳转到自己的档案页

评论邮件通知

其它微信、QQ、Telegram 通知请查看Waline文档

  1. Vercel 项目中添加新环境变量 (修改环境变量以后记得重新部署)

  2. 自定义回复邮件标题和内容 MAIL_SUBJECT、MAIL_TEMPLATE、MAIL_SUBJECT_ADMIN、MAIL_TEMPLATE_ADMIN 四个环境变量是用来自定义回复邮件标题和内容的。不过一般而言，邮件回复的时候，标题和内容都不是固定的。比如说 A 回复了某条评论，系统发送邮件通知评论作者 B 的时候，标题最好含有 B 的名字。内容也应该含有 A 对 B 的什么评论作出了什么评论。这些内容会随着评论作者和评论内容的不同进行改变，所以不能直接简单的设置成固定的内容，需要设定一个回复模板。 **找到 GitHub 上自动创建的和 Vercel 项目同名的私人仓库，仓库中有一个名为 **index.js 的文件，修改代码为以下

     const Application = require('@waline/vercel');
 
 module.exports = Application({
   mailSubject: '{{parent.nick}}，您在博客「{{site.name}}」上的评论收到了回复',
   mailTemplate: `
     <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
       <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">    
         您在博客<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
       </h2>
       <div style="padding:0 12px 0 12px;margin-top:18px">
 <p>{{parent.nick}}，您曾发表评论：</p>
         <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
         <p><strong>{{self.nick}}</strong> 回复说：</p>
         <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
         <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的回复內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。</p>
         <br/>
       </div>
   <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
 该邮件为系统自动发送的邮件，请勿直接回复。
   </div>
   <br/>
     </div>`,
   mailSubjectAdmin: '您的博客「{{site.name}}」收到了新评论',
   mailTemplateAdmin: `
     <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
       <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">    
         有人在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>发表了新的评论
       </h2>
       <div style="padding:0 12px 0 12px;margin-top:18px">
 <p><strong>{{self.nick}}</strong> 评论说：</p>
 <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
         <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的评论内容。</a></p>
         <br/>
       </div>
   <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
 该邮件为系统自动发送的邮件，请勿直接回复。
   </div>
   <br/>
     </div>`
 });

    效果如图：

关系图谱