EMLOG 评论区域美化教程

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

EMLOG 评论区域美化教程

这个美化版评论基于默认模板美化而成,文件包含module.php,echo_log.php,css,js等。 module.php核心文件,复制粘贴替换掉默认的就行了
echo_log.php内页文件,把代码放在适当的位置
css和js 放在能载入的公共文件。
本篇文章本站收藏记录与分享,套用之后如有错位微调CSS样式即可。

module.php

  1. <?php
  2. //blog:评论列表
  3. function blog_comments($comments,$params){
  4. extract($comments);
  5. if($commentStacks): ?>
  6. <a name="comments"></a>
  7. <?php endif; ?>
  8. <?php
  9. $isGravatar = Option::get('isgravatar');
  10. $comnum = count($comments);foreach($comments as $value){if($value['pid'] != 0){$comnum--;}}
  11. $page = isset($params[5])?intval($params[5]):1;
  12. $i= $comnum - ($page - 1)*Option::get('comment_pnum');
  13. foreach($commentStacks as $cid):
  14. $comment = $comments[$cid];
  15. $comment['poster'] = $comment['url'] ? '<a href="'.$comment['url'].'" target="_blank">'.$comment['poster'].'</a>' : $comment['poster'];
  16. ?>
  17. <div class="comment" id="comment-<?php echo $comment['cid']; ?>">
  18. <a name="<?php echo $comment['cid']; ?>"></a>
  19. <?php if($isGravatar == 'y'): ?><div class="avatar"><img src="<?php echo getGravatar($comment['mail']); ?>" /></div><?php endif; ?>
  20. <div class="comment-info">
  21. <strong><?php echo $comment['poster']; ?> </strong>
  22. <span class="comment-reply"><a href="#comment-<?php echo $comment['cid']; ?>" onclick="commentReply(<?php echo $comment['cid']; ?>,this)">@回复</a></span>
  23. <span class="floor">&nbsp;<?php if ($i == 1){ echo "沙发";} elseif ($i == 2){echo "板凳";} elseif ($i == 3){ echo "地板";} else{ echo $i.'楼';}?></span>
  24. <br /><span class="comment-time">发表于<?php echo $comment['date']; ?></span>
  25. <div class="comment-content"><?php echo $comment['content']; ?></div>
  26. </div>
  27. <?php blog_comments_children($comments, $comment['children']); ?>
  28. </div>
  29. <?php $i--;endforeach;?>
  30. <div id="pagenavi">
  31. <?php echo $commentPageUrl;?>
  32. </div>
  33. <?php }?>
  34. <?php
  35. //blog:子评论列表
  36. function blog_comments_children($comments, $children){
  37. $isGravatar = Option::get('isgravatar');
  38. foreach($children as $child):
  39. $comment = $comments[$child];
  40. $comment['poster'] = $comment['url'] ? '<a href="'.$comment['url'].'" target="_blank">'.$comment['poster'].'</a>' : $comment['poster'];
  41. ?>
  42. <div class="comment comment-children" id="comment-<?php echo $comment['cid']; ?>">
  43. <a name="<?php echo $comment['cid']; ?>"></a>
  44. <?php if($isGravatar == 'y'): ?><div class="avatar"><img src="<?php echo getGravatar($comment['mail']); ?>" /></div><?php endif; ?>
  45. <div class="comment-info">
  46. <strong><?php echo $comment['poster']; ?> </strong><?php if($comment['level'] < 4): ?><span class="comment-reply"><a id="ta" href="#comment-<?php echo $comment['cid']; ?>" onclick="commentReply(<?php echo $comment['cid']; ?>,this)"><i class="fa fa-reply"></i>回复</a></span><?php endif; ?>
  47. <br /><span class="comment-time"><?php echo $comment['date']; ?></span>
  48. <div class="comment-content"><?php echo $comment['content']; ?></div>
  49. </div>
  50. <?php blog_comments_children($comments, $comment['children']);?>
  51. </div>
  52. <?php endforeach; ?>
  53. <?php }?>
  54. <?php
  55. //blog:发表评论表单
  56. function blog_comments_post($logid,$ckname,$ckmail,$ckurl,$verifyCode,$allow_remark){
  57. if($allow_remark == 'y'): ?>
  58. <div id="comment-place">
  59. <div class="comment-post" id="comment-post">
  60. <div class="cancel-reply" id="cancel-reply" style="display:none"><div id="respond"><a href="javascript:void(0);" onclick="cancelReply()">取消回复</a></div></div>
  61. <a name="respond"></a>
  62. <form method="post" name="commentform" action="<?php echo BLOG_URL; ?>index.php?action=addcom" id="commentform">
  63. <input type="hidden" name="gid" value="<?php echo $logid; ?>" />
  64. <?php if(ROLE == ROLE_VISITOR): ?>
  65. <div id="comment-input">
  66. <input type="text" name="comname" value="<?php echo $ckname; ?>" placeholder="昵称" required>
  67. <input type="email" name="commail" value="<?php echo $ckmail; ?>" placeholder="邮箱" required>
  68. <input type="text" name="comurl" value="<?php echo $ckurl; ?>" placeholder="网址">
  69. </div>
  70. <?php endif; ?>
  71. <p><textarea name="comment" id="comment" rows="5" tabindex="4"></textarea></p>
  72. <p class="form-submit">
  73. <span class="submit-tool">
  74. <a href="javascript:addNumber('今天在这里签到啦,又学了一些建站知识!')" title="签到"><i class="fa fa-pencil"></i></a>
  75. </span>
  76. <?php echo $verifyCode; ?> <input type="submit" id="comment_submit" value="发表评论" tabindex="6" />
  77. </p>
  78. <input type="hidden" name="pid" id="comment-pid" value="0" size="22" tabindex="1"/>
  79. </form>
  80. </div>
  81. </div>
  82. <?php endif; ?>
  83. <?php }?>

echo_log.php

  1. <?php if($allow_remark == 'y'): ?>
  2. <div class="panel ribbon-comment">
  3. <h3>评论列表</h3>
  4. <?php blog_comments_post($logid,$ckname,$ckmail,$ckurl,$verifyCode,$allow_remark); ?>
  5. <ol class="comment-list">
  6. <?php blog_comments($comments,$params); ?>
  7. </ol>
  8. </div>
  9. <?php endif;?>

css

  1. /*评论*/
  2. .ribbon-comment h3{margin:10px 0 0 0;padding-bottom:5px;color:#000;font-weight:700;font-size:18px; border-bottom: 1px solid #f0f0f0;}
  3. .ribbon-comment{padding: 5px 15px 10px 15px;}
  4. .form-submit .submit-tool{float:left;width: 45px;}
  5. .form-submit .submit-tool a{padding:5px 10px;border:1px solid #03a9f4;border-radius:50%;color:#03a9f4;vertical-align:middle;text-align:center;font-size:15px;line-height:32px;cursor:pointer;}
  6. .form-submit #comment_submit{float:right;margin:0 10px;padding:6px;width:108px;border:1px solid #03a9f4;border-radius:2px;background:#03a9f4;color:#fff;cursor:pointer;transition:all .2s ease-in 0s;-webkit-appearance:none;}
  7. .comment-list .comment{overflow:hidden;border-top:1px solid #e6e6e6;}
  8. .comment-list .avatar{float:left;display:block;margin:10px 10px 0 0;}
  9. .comment-list .avatar img{width:50px;height:50px;border-radius:50%;transition: all 2s;border: 1px solid #ccc;padding: 2px;}
  10. .comment-list .avatar img:hover{transform:rotate(360deg);}
  11. .floor{float:right;color:#c3c3c3;font-weight:700;}
  12. .comment-time{color:#999;font-size:13px;}
  13. .comment-reply #ta{color:#999;}
  14. .comment-info{padding:15px 0;}
  15. .comment-reply a{padding-left:5px;}
  16. .comment-list .comment-children{position:relative;margin-left:60px;border-bottom:none;}
  17. .comment-list .comment-children .comment-children{margin-left:0;}
  18. .cancel-reply{overflow:hidden;margin:0 0 10px;border-top:1px solid #ebebeb;}
  19. .cancel-reply a{float:right;padding:2px 10px;border:1px solid #ebebeb;border-radius:2px;}
  20. .cancel-reply #respond{margin-top:10px;}
  21. .comment-content{padding-left:65px;margin-top: 10px;}
  22. .comment-content img{height: 20px;width: 20px;}
  23. .form-submit{overflow:hidden;}
  24. .comment-list #pagenavi{overflow:hidden;margin-top:10px;padding:15px;text-align:center;}
  25. .comment-list #pagenavi span{margin:2px;padding:5px 11px;border:1px solid #ccc;border-radius:50%;color:#f44336;vertical-align:middle;text-align:center;font-size:14px;line-height:40px;cursor:not-allowed;}
  26. .comment-list #pagenavi a{margin:2px;padding:5px 11px;border:1px solid #ccc;border-radius:50%;color:#333;vertical-align:middle;text-align:center;font-size:14px;line-height:40px;}
  27. .comment-list #pagenavi em{display:none;}
  28. #comment-input{overflow:hidden;margin-bottom:5px;}
  29. #comment-input input{float:left;margin:5px 0;padding:0 0 0 10px;width: 33.3333%;height:34px;border:1px solid #ccc;border-radius:3px;background:#fff;background-color:#fff;background-image:none;color:#555;font-size:14px;line-height:1.42857143;-webkit-appearance:none;}
  30. #comment{margin:0 10px 10px 0;padding:5px;width:100%;border:1px solid #ccc;border-radius:3px;background:#fff;-webkit-appearance:none;}
  31. #comment-post{overflow:hidden;margin:10px 0 10px 0;}
  32. @media only screen and (max-width:767px){
  33. #comment-input input{width: 100%;}
  34. .comment-list .comment-children{margin-left: 0px!important;}
  35. }

js

  1. /*签到*/
  2. function addNumber(a) {
  3. document.getElementById("comment").value += a
  4. }

未经允许不得转载:作者:无言染爱, 转载或复制请以 超链接形式 并注明出处 无言博客
原文地址:《EMLOG 评论区域美化教程》 发布于2018-12-12

分享到:
赞(0)

评论 抢沙发

8 + 8 =


EMLOG 评论区域美化教程

长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册