用回valine评论系统,valine评论框样式美化

小鸡
阅读2040 喜欢6 教程 更新2018-11-1

我感觉我一个处女座的就不应该搞前端,太吹毛求疵追求完美了,哪里有一点点觉得不漂亮就想改

博客的评论系统用过好几家(虽然都没有人评论
比如gitalk,来必力
之前用的来必力,加载慢的问题是解决了,但是总觉得登陆的反应也很慢
想来想去还是觉得valine好用

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

不过之前没用valine的原因时它评论框样式感觉不好看
所以这次我用回valine,首先改了样式

兰州小红鸡

好像也没太大变化,不过就是看着顺眼了

使用valine

这个没什么好说的,next主题在自带的,配置很简单,网上搜一下就有

添加样式表

在themes extsourcecsscustom目录下的custom.styl文件中添加如下


/*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;
}

/**/

更新文件

  • hexo clean
  • hexo d -g

ok!

下面是一些我的建站笔记汇总,平常做的小手工,希望对大家有帮助

hexo博客搭建以及next美化教程 原生js实现网页图片点击展示效果 用回valine评论系统,valine评论框样式美化 给hexo静态博客添加动态相册功能 hexo建站笔记之首页文章轮播图 模仿知乎的链接卡片 开始使用腾讯云图床 将公众号文章爬到hexo博客 使用腾讯云cdn加速博客 hexo建站笔记之彩色标签云 手动修改博客css样式,打造属于自己的博客样式