可愛的博客園樣式之自定義「評論區」樣式

<div align="center">

cute-cnblogs 評論區代碼美化

</div>

說明 <br/> 一些人可能比較喜歡個別區域的，這裏是博客園評論區的樣式代碼。 <br/> （PS：基於博客園主題「SimpleMemory」進行的樣式修改，勾選禁用默認樣式了，可能主題不一樣，class啥的也不一樣，不一樣的只能本身耐心改一下啦~） <br/> 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>

最後

• 爲了響應你們的號召，方便你們技術交流，如今創建了一個微信羣，若是你們有須要能夠掃碼（或者搜我微信號：s978761）加我好友，我邀請你加入～本羣是一個純交流學習工做的羣，不許發佈廣告、營銷相關的信息！對了，加我記得備註上：博客園+名稱 喔~

原文出處：https://www.cnblogs.com/miluluyo/p/11683773.html