可爱的博客园样式之自定义“评论区”样式

cute-cnblogs 评论区代码美化

说明

一些人可能比较喜欢个别区域的，这里是博客园评论区的样式代码。

（PS：基于博客园主题“SimpleMemory”进行的样式修改，勾选禁用默认样式了，可能主题不同，class啥的也不同，不同的只能自己耐心改一下啦~）

OωO表情是插件喔，github ，就是图片类型的需要js进行处理，因为发表评论的引入使用不一样，具体可以自行对比下官网与我引入的js，也可直接拿我的js去用~。
（还有一个更重要的：如果评论多的话，加载速度会慢，这时候的js就不起效了，然后评论区别人的评论就会加载不出来头像了~）

css

/*评论区*/
#commentform_title, .feedback_area_title {font: normal normal 16px/35px"Microsoft YaHei";margin: 10px 0 30px;border-bottom: 2px solid #ccc;background-image: none;padding: 0;border-bottom: 0;}
#commentform_title:after, .feedback_area_title:after {content: '';display: block;width: 100%;text-align: center;position: relative;bottom: 16px;left: 110px;border-bottom: 1px dashed #e9e9e9;}
#tbCommentAuthor {padding-left: 10px;color: #555;border: 1px solid #ddd;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;width: 320px;height: 20px;background: #fff;}
.commentbox_title {width: 100%;}
div.commentform p{margin-bottom: 20px}
textarea#tbCommentBody {width: calc(100% - 20px);border-radius: 10px;outline: 0;padding: 10px;height: 200px;position: relative;background: #fff url(https://images.cnblogs.com/cnblogs_com/elkyo/1566714/o_comment-bg.png);background-size: contain;background-repeat: no-repeat;background-position: right;resize: vertical;}
/*评论列表*/
.feedbackItem {margin-top: 30px;}
.feedbackListSubtitle {clear: both;color: #a8a8a8;padding: 8px 5px;}
.feedbackManage {width: 200px;text-align: right;float: right;}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {color: #777;font-weight: 450;}
.louzhu {background: transparent url(/images/icoLouZhu.gif) no-repeat scroll right top;padding-right: 16px;}
.feedbackCon {border-bottom: 1px solid #EEE;padding: 10px 20px 10px 5px;min-height: 35px;_height: 35px;margin-bottom: 1em;line-height: 1.5;}
.comment-avatar {width: 48px;height: 48px;border: 1px solid #dcd6b3;padding: 3px;border-radius: 50%;-webkit-transition: all .6s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}
.blog_comment_body {display: inline-block;width: 70%;margin-left: 15px;vertical-align: initial!important;font-family: Lato, Helvetica, Arial, sans-serif;}
.comment_vote {padding-right: 10px;}
.comment_vote a {color: #999;}
.blog_comment_body a {color: #2daebf;}
.comment-avatar:hover {transform: rotateZ(360deg);}
#comment_nav{padding-top: 10px;}
.blog_comment_body img {max-width: 100px;}
/*提交评论*/
.comment_btn {width: 180px;height: 38px;padding: 8px 20px;text-align: center;font-size: 14px;color: #fff;border: 0;background: #7396a7 !important;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;cursor: pointer;display: inline-block;vertical-align: middle;outline: 0;text-decoration: none;}
.comment_btn:hover {background: #8cb7cc!important;}
p#commentbox_opt {text-align: center;}

html

<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/OwO.min.css" />
<script src="https://blog-static.cnblogs.com/files/elkyo/OwO.min.js"></script>
<script>
/*文章评论*/
var le = $(".feedbackItem").length
for(var i = 0;i < le;i++){
  var src = $(".feedbackItem").eq(i).find(".feedbackCon").find("span").text()
  $(".feedbackCon").eq(i).prepend('<img class="comment-avatar" src="'+$.trim(src)+'">')
}
$("#tbCommentBody").attr("placeholder","请乖乖填写哦！ ...")
$("#tbCommentBody").after('<div class="OwO" onclick="load_face(this)"><div class="OwO-logo"><span>OωO<space><space>表情</span></div></div>')
var load_face = function(a){
  var OwO_demo = new OwO({
      logo: 'OωO表情',
      container: document.getElementsByClassName('OwO')[0],
      target: document.getElementById('tbCommentBody'),
      api: 'https://miluluyo.github.io/OwO.json',
      position: 'down',
      width: '70%',
      maxHeight: '250px'
  });
  a.classList.add('OwO-open');
  a.onclick=null
}
$("#commentbox_opt").nextAll().remove()
$("#btn_comment_submit").val("提交评论 (Ctrl + Enter)")
</script>

最后

为了响应大家的号召，方便大家技术交流，之前建立了一个微信群，如果大家有需要可以关注公众号，发送“加群”即可～本群是一个纯交流学习工作的群，不准发布广告、营销相关的信息！

公众号：麋鹿鲁哟