前言
本篇文章对Matery的valine评论系统进行优化，文章中大多数内容参考自姑的优化代码。原博主是基于Hexo主题的Butterfly和Sakura的valine优化，现将其移植到Matery主题中。
0x001 效果演示
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
