Matery之Valine评论优化


前言

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

0x001 效果演示

image

0x002 valine基础配置

打开编辑Hexo博客主题目录下themes\matery\_config.yml的配置文件,修改valine的配置代码如下

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博客目录下的themes\matery\layout\_partial\valine.ejs的文件 修改并添加的JS代码如下

<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博客目录下的themes\matery\source\libs\valine\Valine.min.js的文件中。

0x003 valine评论框美化

打开编辑Hexo博客目录下的themes\matery\layout\_partial\valine.ejs的文件,添加的CSS代码如下

<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,修改为如下代码:

<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

参考文章


文章作者: Luckysec
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Luckysec !
评论
 上一篇
Hexo之渲染绕过 Hexo之渲染绕过
在Hexo部署时会默认渲染source下的所有html页面,但有时候想在Hexo博客上单独自定义html页面或README.md时,却不希望被Hexo渲染。
2020-04-28
下一篇 
Matery之代码块优化 Matery之代码块优化
在旧版本的Hexo主题Matery中对hexo-prism-plugin只支持高亮显示,且存在着许多的BUG,比如不能正确显示代码行号,代码的复制和收缩功能也存在一系列问题。
2020-04-25
  目录