Matery之Valine评论优化

前言

本篇文章对Matery的valine评论系统进行优化，文章中大多数内容参考自姑的优化代码。原博主是基于Hexo主题的Butterfly和Sakura的valine优化，现将其移植到Matery主题中。

0x001 效果演示

0x002 valine基础配置

打开编辑Hexo博客主题目录下themesmatery_config.yml的配置文件，修改valine的配置代码如下

代码语言：javascript复制

valine:
  enable: true
  appId: xxxxxxxxx
  appKey: xxxxxxxx
  notify: false
  verify: true
  visitor: true
  avatar: monsterid
  guest_info: nick,mail,link
  pageSize: 10
  placeholder: 'just go go' 
  language: zh-cn
  comment_count: true

0x004 valine 功能优化

新增功能如下：

功能一：根据QQ邮箱拉取评论头像
功能二：增添了个性表情包及API
功能三：增添了今日诗词背景文字
功能四：优化了回复评论跳转问题
功能五：获取评论用户的系统信息

打开编辑Hexo博客目录下的themesmaterylayout_partialvaline.ejs的文件修改并添加的JS代码如下

代码语言：javascript复制

<script>
    new Valine({
        el: '#vcomments',
        admin_email: '16463223@qq.com',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        path: window.location.pathname,
        comment_count: true,
        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 %>',

    });
    $(document).ready(function(){
        $("#vcomments").on('click', 'span.vat',function(){
            $(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap"));
            $('textarea#veditor').focus();
        })
    })
</script>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
    jinrishici.load(function(result) {
        var jrsc_plac =  result.data.content   "n「"   result.data.origin.title   "」"   result.data.origin.dynasty   " · "   result.data.origin.author
        document.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
    });
</script>

点击打开 https://github.com/LuckyZmj/LuckyBlog/blob/master/themes/matery/source/libs/valine/Valine.min.js，将该网页中的代码全选复制。

然后将代码全部粘贴替换掉原来Hexo博客目录下的themesmaterysourcelibsvalineValine.min.js的文件中。

0x003 valine评论框美化

打开编辑Hexo博客目录下的themesmaterylayout_partialvaline.ejs的文件，添加的CSS代码如下

代码语言：javascript复制

<style>
    /* valine 评论框增加背景图片 */
    #vcomments textarea {
        box-sizing: border-box;
        background: url("http://www.luckyzmj.cn/medias/comment_bg.png") 100% 100% no-repeat;
    }

    #vcomments .vwrap {
        box-sizing: border-box;
        padding: 0 0 44px;
        background-color: #F0FFF0;
    }
    #vcomments .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #F0FFF0;}

    #vcomments .vinput{padding:10px 15px; text-align: center;}

    #vcomments .vwrap .vheader .vinput{border-bottom:0px}

    #vcomments .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}

    #vcomments  .vwrap .vrow{position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}

    #vcomments  .vrow {font-size: 0;padding: 0px 0;}

    #vcomments  .vicon {margin-right: 15px;}

    #vcomments  .vrow .vcol.vcol-30{display: none}

    #vcomments  .vedit .vctrl span.vpreview-btn{display: none}

    #vcomments  .vrow .vcol.vcol-70{width: 100%;}

    #vcomments  .vsubmit.vbtn{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#4cbf30;}

    #vcomments  .vcards .vcard .vh .vhead .vsys{background: #F0FFF0;}

    #vcomments  .vcards .vcard .vh .vmeta .vat{font-size: 12px;display: block;margin-left: 15px;float: right;color: #fff;background-color: #4cbf30;line-height: 20px;padding: 0 6px;border-radius: 3px;}

    @media screen and (max-width: 520px){
    #vcomments  .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}  
    }
</style>

找到valine.ejs中的class="card valine-card"的div,修改为如下代码：

代码语言：javascript复制

<div class="card valine-card" data-aos="fade-up">
    <div id="vcomments" class="card-content"></div>
</div>

注意：如果效果与预期的不太一样，可以参考下我修改后的valine.ejs文件 https://github.com/LuckyZmj/LuckyBlog/blob/master/themes/matery/layout/_partial/valine.ejs

参考文章

https://cungudafa.gitee.io/post/8202.html
https://blog.csdn.net/cungudafa/article/details/104281764

hexo https 网络安全 github git

0 人点赞