Hexo-valine评论系统

2020-04-17

字数统计: 1.4k字 | 阅读时长: 5分

特别说明

此文在CSDN中更易查阅，请点击此处转去CSDN中查看：CSDN博文

摘要

Valine：一款快速、简洁且高效的无后端评论系统。

存在bug

初步部署

注册及简单配置

1.注册LeanCloud
2.创建创建Valine应用，选择开发板即可，名称任意。例如：Valine。
3.选择刚刚创建好的应用，点击【设置】 -> 【应用 Keys】，获取 AppID 和 AppKey。
4.我的是hexo博客，yilia主题。以我自己的为例：
打开主题目录下的_config.yml。添加以下代码:

valine: 
 appid: ''  #Leancloud应用的AppID
 appkey: ''  #Leancloud应用的AppKey
 verify: false #验证码
 notify: false #评论回复提醒
 avatar: robohash #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
 #头像类型可见： https://valine.js.org/avatar.html
 placeholder: 留下你来过的痕迹~ #评论框占位符
```    

article.ejs  
在themes/yilia/layout/_partial/article.ejs文件中添加如下几行，位置随意
  

```javascript
<% if (!index){ %>
        <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
            <section id="comments" class="comments">
              <style>
                .comments{margin:30px;padding:10px;background:#fff}
                @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
              </style>
              <%- partial('post/valine', {
                key: post.slug,
                title: post.title,
                url: config.url+url_for(post.path)
                }) %>
          </section>
        <% } %>
<% } %>

valine.ejs
这个文件需要新建
路径：themes/yilia-plus/layout/_partial/post/valine.ejs

<div id="vcomment" class="comment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var notify = '<%= theme.valine.notify %>' == true ? true : false;
    var verify = '<%= theme.valine.verify %>' == true ? true : false;
    new Valine({
        av: AV,
        el: '#vcomment',
        notify: notify,
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar:"<%= theme.valine.avatar %>",
    });
</script>

6.【设置】->【安全中心】->【web安全域名】里填写你的博客访问地址
正常情况下，这样已经可以简单的使用了。

云引擎的设置（进阶）

进入【云引擎】-【设置】界面。

1.源码部署
其中，源码部署中的代码库为：https://gitee.com/giteerepositories/Valine-Admin ,填写完毕后点击下方保存。
（特别说明，这是从Github上导入的他人的，由于GitHub上部署起来比较慢，所以我导入到了gitee上，这样部署起来比较快。原GitHub地址）

2.自定义环境变量

其中，只填写几个必填的就可以了，选填的看个人喜好自己设置。

参数务必填写正确

特别注意的是：

SMTP_PASS的填写，我使用的是QQ邮箱，这里的SMTP_PASS登录密码的填写 不是填QQ邮箱的登录密码。
这个密码的获取过程是：
【打开QQ邮箱】->【选择设置】->【账户】->【找到SMTP_PASS，点击开启】
- Web主机二级域名的获取：云引擎 -> 设置，在Web主机域名位置点击申请即可。

部署

【云引擎】->【部署】
分支使用master，点击部署即可。

Valine评论管理

访问设置的二级域名https://二级域名.leanapp.cn/sign-up ，注册管理员登录信息。
设置完管理员的登录信息。
之后，即可通过https://二级域名.leanapp.cn/管理评论

定时唤醒&邮件提醒

添加定时唤醒是为了防止应用死机导致邮件提醒等漏发。
进入【云引擎】-【定时任务】中，创建定时器，创建两个定时任务

1.生产环境选择self-wake云函数，Cron表达式为0 0/30 7-23 * * ?
表示每天早6点到晚23点每隔30分钟访问云引擎，ADMIN_URL环境变量务必设置正确，这样可以保持每天的绝大多数时间邮件服务是正常的。
2.生产环境选择resend_mails云函数，Cron表达式为0 0 8 * * ?
表示每天早上八点检查过去24小时内漏发的通知邮件并补发。

添加定时器后记得点击启动方可生效。

至此，Valine Admin 已经可以正常工作。

后续

在valine升级支持引入QQ头像帮助后，修改配置文件valine.ejs。

<div id="vcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/valine@<%= theme.valine.version %>/dist/Valine.min.js"></script>
<script>
  var valineConifg = <%- JSON.stringify(theme.valine)%>;
  valineConifg.el = '#vcomment';
    window.onload = function(){
      new Valine(valineConifg);
    }
</script>

_config配置文件略微下修改。
此修改得益于一位大佬：MonoLogueChi的帮助，特此感谢！

参考博文

本文作者： GH670
发布时间： 2020-04-17
最后更新： 2020-05-11
本文标题： Hexo-valine评论系统
本文链接： www.wblog.tech/hexo-valine.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！