Matery主题valine使用与升级

Matery 主题评论功能valine使用与升级

Matery 默认自带了Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）但是gittalk有时候加载不出来。就优先使用了Valine。
valine使用教程不少，简单说一下，本文主要是把matery自带的valine1.3 升级到valine 1.4的过程。

点击本站的留言薄可以看到效果。

多了浏览器和系统图标，还有博主小伙伴标识。

一、valine启用

1、主要流程

valine和miniValine使用基本类似。

（1）去 Leancloud注册。

注意事项：

节点选择：华东节点、华北节点、国际版。

如果你的域名没有备案，建议选择国际版。 因为华东或华北节点在安装评论系统之后访问要求域名备案。

（2）在“设置“，”应用 Keys”，找到你的appid和appkey，配置到主题中valine配置的地方，启用valine。

（3）在“设置“，”安全中心”，”Web 安全域名”，添加自己的域名。

（4）在“设置“，”安全中心”，”服务开关”，数据存储要打开。

（5）在“存储“，”用量统计”，”HTTP状态码”，启用，方便后续报错查错误码。

（6）重新编译部署hexo clean & hexo g & hexo d

2、遇到问题

搞这个东西采坑不少，有些坑都是自己不小心造成的。我在网上查了，交流群里也咨询请教了，没有人能解决这个问题，毕竟这个坑是自己造成的。

常见Code 403问题：

Code 403: 访问被api域名白名单拒绝，请检查你的安全域名设置.

网上多数的说法是在web安全域名中添加自己的域名。可是如果添加之后还是这个问题呢？

其实一般不会有这个问题，我有这个问题是我改了权限造成了。

官方给的解释：

应用在控制台中的相关服务选项未打开，如 Class 关闭了权限，或是 User 缺失了 session 信息等情况下，云端会统一地返回 403 错误码及不同的错误信息，代表当前请求因权限不够而被拒。例如：

    信息 - Forbidden to read/write by class permissions
    含义 - 操作被禁止，因为 Class 表没有打开「读」或者「写」的权限。进入 控制台 > 存储，点击相应的 Class，从右侧选择 其他 下拉菜单，进入 权限管理 来调整。

    信息 - The user cannot be altered by a client without the session.
    含义 - 用户没有登录，无法修改用户信息。

解决：

（1）首次使用，添加一条评论，一般添加之后就会好了。

（2）后续使用，403，请检查comment表的add_fields/create/find权限开放。

（3）如果还是不行将_use表的add_fields/create/find权限开放。

（4）如果还是不行，到“存储“，”用量统计”，”HTTP状态码”处，检查你的错误码，然后去LeanCloud的错误找应用的错误码，排查原因吧。

二、valine升级

1、引入1.4版的js文件

（1）直接使用我 CDN 链接

如果你没有,可以直接在你的 valine.ejs 文件中使用我的链接：

<script src="https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/libs/valine/Valine.min.js"></script>

位置在：

<script src="<%- theme.jsDelivr.url %><%- url_for('/libs/valine/av-min.js') %>"></script>
<script src="https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/libs/valine/Valine.min.js"></script>

记得把主题自带的

<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.valine) %>"></script>

删掉，或直接剪切到别的地方备份着。

（2）将文件放你自己的仓库

下载我的 Valine.min.js 文件，直接替换你主题目录 /source/libs/valine/ 下的 Valine.min.js 文件。

注意，如果你担心替换有问题，可以先备份一下你自己的 Valine.min.js 文件。

2、增加valine的配置：

1.4的版本有些属性调整了，主题下的_config.ymlvaline属性如下：

valine:
  enable: true
  appId: iTxfqh5e9IaRfiiVOTbIWoKa-XXXXXX
  appKey: C5s5xGFErD1EtXXXXXXXX
  verify: true  # 是否启用防垃圾验证
  notify: true  # 是否开启邮件提醒(https://valine.js.org/notify.html)
  visitor: true
  avatar: monsterid  # 头像样式(https://valine.js.org/avatar.html) 
  pageSize: 10
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!' # Comment Box placeholder
  background: /medias/comment_bg.png #背景图
  count: true
  enableQQ: 970175021
  recordIP: true
  requiredFields: 
    - nick
    - mail
  guest_info: 
    - nick
    - mail
    - link
  master: 
    - 123abc508165c8eba9a77f872xxxx046  # md5加密后的博主邮箱
  metaPlaceholder:  # 输入框的背景文字
    nick: 昵称/QQ号(必填)
    mail: 邮箱(必填)
    link: 网址(https://)
  lang: zh-CN
  tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode]
    - 博主
    - 小伙伴
    - 访客
  friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]
    - c08508165c8eba9a77f8c2853xxxx09e
    - 901345d4c91ddfd8db0f175bbcfff0c8
    - 1512958e18378c98b498d5effe3e76ff

复制代码注意缩进对齐，不对齐可能会报错，请自行检查对齐。

3、修改valine.ejs：

Matery 主题使用的ejs模板预编译，如果你使用了pug或者swig等其他的模板语言，请修改成对应语言语法即可。

原始的valine.ejs

new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        notify: '<%- theme.valine.notify %>' === 'true',
        verify: '<%- theme.valine.verify %>' === 'true',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<% if (config.language == "zh-CN") {  %>zh-cn<% } else { %>en<% } %>',
        placeholder: '<%= theme.valine.placeholder %>'
    });

升级后的valine.ejs

let metaPlaceholder = <%-  JSON.stringify(theme.valine.metaPlaceholder) %> ;
//这里要换行
new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        notify: '<%- theme.valine.notify %>' === 'true',
        verify: '<%- theme.valine.verify %>' === 'true',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<%- theme.valine.lang %>',
        placeholder: '<%= theme.valine.placeholder %>',
        meta: <%- '["' + theme.valine.guest_info.join('", "') + '"]' %>,
        recordIP: '<%- theme.valine.recordIP %>' === 'true',
        enableQQ: '<%- theme.valine.avatar %>',
        requiredFields: <%- '["' + theme.valine.master.join('", "') + '"]' %>,
        master: <%- '["' + theme.valine.master.join('", "') + '"]' %>,
        friends: <%- '["' + theme.valine.friends.join('", "') + '"]' %>,
        tagMeta: <%- '["' + theme.valine.tagMeta.join('", "') + '"]' %>,
        metaPlaceholder: metaPlaceholder,

    });

是不是很简单，博主亲自采坑亲自爬坑记录。

如果需要验证昵称和邮箱可以加上以下代码：

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9_-\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert txt-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';

            e.stopPropagation();

            setTimeout(function() {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
    }
    }, true);

说明：代码非原创，JS正则验证本身也不难。

好了可以部署之后自己测试一下。

顺便说一下，填写昵称邮箱和网址的地方如果折行了就按我的样式改一下就好：

在 valine.ejs 是上面对着改一下就好了：

.v[data-class="v"] .vwrap .vheader .vinput {
  width: 32%;
  border-bottom: 1px dashed #dedede;
}

相关文章

• Hexo搭建静态博客（一）——基础搭建
• Hexo搭建静态博客（二）——创建页面
• Hexo搭建静态博客（三）——主题更换
• Hexo搭建静态博客（四）——插件安装
• Hexo搭建静态博客（五）——踩坑问题
• Hexo搭建静态博客（六）——项目部署
• Hexo搭建静态博客（七）——客服与推送
• Hexo添加Live2D二次元老婆
• Hexo博客Valine-Admin踩坑记录
• Hexo博客Matery主题valine升级与优化
• Hexo博客Matery主题新手常见问题
• Hexo博客Matery主题添加多级分类
• Hexo博客添加思维导图渲染
• Hexo博客Matery主题添加说说Artitalk教程
• 静态博客-字体更换教程