本文最后更新于:4 个月前

valine的优势:

  1. 免登陆,使用方便,直接填了昵称和邮箱就可以评论
  2. 有回复邮件提醒功能!很好用

美化

  • 直接在对应的css(在Hexo大多是less后缀)文件中添加:
/*valine 评论系统样式*/

div#comments.comments.v{
  margin-top: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

div.vheader.item2{
  border-bottom: 1px solid #5f5f5f;
  height: 35px !important;
}

.v .vwrap .vheader.item2 .vinput{
  height: 30px !important;
  border: 0px !important;
  width: 25% !important;
  margin: 0px !important;
}

input.vnick.vinput{
  border-right: 2px solid #a4d8fa !important;
}

div.vcontrol{
  padding-top: 0px !important;
}

div#comments.comments.v{
  border: 0px;
}

.v .vwrap{
  border: 2px solid black !important;
  height: 210px !important;
  border-radius: 6px !important;
  overflow: visible !important;
  counter-reset: avater;
}

.v .vwrap .vedit .vemojis{
  width: 600px !important;
  background-color: #fff !important;
  border-radius: 5px !important;
}

.v .vwrap .vedit .vpreview {
  width: 600px !important;
  background-color: #fff !important;
  border-radius: 5px !important;
}

.v .vbtn{
  background-color: #5f5f5f !important;
  color: #fff !important;
}

.v .vwrap .vedit .vctrl{
  text-align: left !important;
}

.v .vwrap .vedit .vctrl span{
  background-color: #7f7f7f !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding: 3px !important;
}

.v .vwrap .vedit .vctrl{
  padding: 0px !important;
  margin: 0px !important;
}

div.vedit{
  height: 120px;
}

.v .veditor{
  min-height: 70px !important;
  height: 70px !important;
}


.v .vlist .vcard {
  border: 1px dashed #49b1f5 !important;
}

.v .vlist .vcard .vhead .vsys{
  display: none !important;
  background-color: #fff !important;
}

.v .vlist .vcard .vh .vmeta .vat{
  background-color: #7f7f7f !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.v .vlist .vcard .vhead:before{

    display: block;
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 12px 0 0;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    background-color: #55aacf;
    border-radius: 50%;
    text-align: center;
    
    content: counter(avater)&apos楼'
    counter-increment: avater;
}

.v .vlist .vcard .vquote{
  margin-left: 80px; 
}

.v .vlist .vcard .vquote{
  counter-reset: avaters;
}

.v .vlist .vcard .vquote  .vhead:before{
    display: block;
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    margin: 0 12px 0 0;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    background-color: #fff;
    border: 3px solid #60a1e5;
    color: #60a1e5;
    border-radius: 50%;
    text-align: center;
    
    content: counter(avaters);
    counter-increment: avaters;
}

.v .vlist .vcard  p{
  margin-bottom: 0px !important;
  color: #666;
  text-align: left;
  letter-spacing: 3px; 
  line-height: 25.59375px;
}
.v .vlist .vcard .vquote a.at{
  float: left;
  margin-right: 13px; 
  color: #567843;
  text-decoration: none;
}

.v .vlist .vcard .vquote .vcontent{
  font-size: 15px;
  font-weight: 200;
}

.v .vlist .vcard .vcontent{
  margin-top: 58px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-top: 0px !important;
}

.v .vlist .vcard .vhead .vnick{
  font-size: 17px !important;
  font-weight: 600 !important;
}

.v .vlist .vcard{
  padding-top: 8px !important;
}

.v .vlist .vcard .vhead{
  float: left !important;
}

.v .vlist .vcard .vh .vmeta{
  float: right !important;
}

.v .vlist .vcard .vcontent.expand:after{
  content: "点击查看全部" !important;
  font-weight: 400 !important;
}

 目录