老蒋部落
我们有在用Typecho主题做模板的时候，每次老蒋比较纠结的就是评论框和样式太单一。今天有看到国内的一款Echo免费主题（https://github.com/yunfeilangwu/echo）的评论框和样式不错，于是我将拆分出来，这样如果以后有需要用到的话可以直接用到主题中，当然这些需要感谢Echo主题作者。
我们看看这款主题的评论样式是什么样子的。
感觉确实比默认的样式好看很多。我们看看如何加入到我们的网站上呢？这里我们需要注意的是这款主题是使用的LAYUI前端，所以，我们主题最好也是用这个前端的，要不比较麻烦。老蒋有些时候也喜欢这个前端，比国外的BS前端简单很多。
1、comments.php 页面
这里老蒋不是太喜欢他的头衔功能，所以我把头衔功能去掉：
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php function threadedComments($comments, $options) {
$commentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
$commentClass .= ' comment-by-author'; //如果是文章作者的评论添加 .comment-by-author 样式
} else {
$commentClass .= ' comment-by-user'; //如果是评论作者的添加 .comment-by-user 样式
}
}
$commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent'; //评论层数大于0为子级，否则是父级
?>
<li id="li-<?php $comments->theId(); ?>" class="comment-body<?php
if ($comments->levels > 0) {
echo ' comment-child';
$comments->levelsAlt(' comment-level-odd', ' comment-level-even');
} else {
echo ' comment-parent';
}
$comments->alt(' comment-odd', ' comment-even');
echo $commentClass;
?>">
<div id="<?php $comments->theId(); ?>" class="pl-dan comment-txt-box">
<div class="t-p comment-author">
<?php $comments->gravatar('40', ''); ?>
</div>
<div class="t-u comment-author">
<strong>
<?php $comments->author(); ?>
</strong>
<div><b><?php echo getPermalinkFromCoid($comments->parent); ?></b></div>
<div class="t-s"><p><?php $comments->content(); ?></p></div>
<span class="t-btn"><?php $comments->reply(); ?> <span class="t-g"><?php $comments->date('Y-m-d H:i'); ?></span></span>
</div><!-- 单条评论者信息及内容 -->
</div>
<?php if ($comments->children) { ?>
<div class="pl-list comment-children">
<?php $comments->threadedComments($options); ?>
</div>
<?php } ?>
</li>
<?php } ?>
<div id="comments">
<?php $this->comments()->to($comments); ?>
<?php if($this->allow('comment')): ?>
<div id="<?php $this->respondId(); ?>" class="respond">
<div class="cancel-comment-reply">
<?php $comments->cancelReply(); ?>
</div>
<h4 id="response"><i class="layui-icon"></i> <?php _e('评论啦~'); ?></h4>
<br/>
<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
<?php if($this->user->hasLogin()): ?>
<div class="layui-form-item">
<div class="layui-form-mid layui-word-aux">
<?php _e('登录身份: '); ?>
<a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>
<a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> »</a>
</div>
</div>
<div class="layui-form-item">
<textarea rows="5" cols="30" name="text" id="textarea" placeholder="嘿~ 大神，别默默的看了，快来点评一下吧" class="layui-textarea" required></textarea>
</div>
<?php else: ?>
<div class="layui-form-item">
<textarea rows="5" cols="30" name="text" id="textarea" placeholder="嘿~ 大神，别默默的看了，快来点评一下吧" class="layui-textarea" required></textarea>
</div>
<div class="layui-form-item layui-row layui-col-space5">
<div class="layui-col-md4">
<input type="text" name="author" id="author" class="layui-input" placeholder="* 怎么称呼" value="<?php $this->remember('author'); ?>" required />
</div>
<div class="layui-col-md4">
<input type="email" name="mail" id="mail" lay-verify="email" class="layui-input" placeholder="<?php if ($this->options->commentsRequireMail): ?>* <?php endif; ?>邮箱(放心~会保密~.~)" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?>required<?php endif; ?> />
</div>
<div class="layui-col-md4">
<input type="url" name="url" id="url" lay-verify="url" class="layui-input" placeholder="<?php if ($this->options->commentsRequireURL): ?>* <?php endif; ?><?php _e('http://您的主页'); ?>" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?>required<?php endif; ?> />
</div>
</div>
<?php endif; ?>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-normal"><?php _e('提交评论'); ?></button>
</div>
</form>
</div>
<?php if ($comments->have()): ?>
<br/>
<h3><?php $this->commentsNum(_t('暂无评论'), _t('唉呀 ~ 仅有一条评论'), _t('已有 %d 条评论')); ?></h3>
<br/>
<div class="pinglun">
<?php $comments->listComments(); ?>
</div>
<div class="page-navigator">
<?php $comments->pageNav('«', '»', 1, '...', array('wrapTag' => 'div', 'wrapClass' => 'layui-laypage layui-laypage-molv', 'itemTag' => '', 'currentClass' => 'current', )); ?>
</div>
<?php endif; ?>
<?php else: ?>
<h3><?php _e('评论已关闭'); ?></h3>
<?php endif; ?>
</div>
2、评论样式
/**评论样式*/
.pinglun {
margin-bottom: 10px
}
.pinglun li {
margin-bottom: 10px
}
.pinglun .pl-dan {
border-radius: 4px
}
.pinglun .t-p {
float: left
}
.pinglun .t-p img {
width: 50px;
height: 50px;
border: 4px solid rgba(210,210,210,0.2);
border-radius: 200px
}
.pinglun .t-u {
margin-left: 70px;
line-height: 22px;
padding-bottom: 10px;
margin-bottom: 10px
}
.pinglun .t-u .t-g {
color: #999;
font-size: 12px
}
.pinglun .t-u .t-btn a {
font-size: 12px;
padding: 2px 5px;
border-radius: 4px;
margin-right: 10px;
border: #e2e2e2 1px solid;
color: #909090
}
.pinglun .t-u .t-btn a:hover {
background: #1ab667;
color: #fff;
border: #1ab667 1px solid
}
.pinglun .t-s {
margin-top: 10px;
margin-bottom: 10px;
color: #888
}
.pinglun .t-s a {
float: left;
margin-right: 10px;
color: #888
}
.pinglun .t-s p {
word-break: break-all;
}
.pinglun .cancel-comment-reply {
background: #f05050;
padding: 2px 5px;
border-radius: 4px;
display: inline-block;
margin-bottom: 10px
}
.pinglun .cancel-comment-reply a {
color: #fff
}
.comment-children .pl-dan {
padding-left: 65px;
}
.comment-children .t-u {
margin-left: 30px;
padding-left: 38px;
border-left: 1px solid #eee;
}
3、分页样式
评论也是有分页的，不要忘记样式
/* 页码 */
.page-navigator {
padding: 15px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: inherit
}
.page-navigator a:hover {
background: #393d49;
color: #fff
}
.page-navigator .current {
background: #333742;
color: #fff
}
这样基本就完事。但是需要注意的，如果我们的前端分类页面的分页也要和这个样式一致，我们要稍微修改我们的分页调用。
<div class="page-navigator">
<?php $this->pageNav('«', '»', 1, '...', array('wrapTag' => 'div', 'wrapClass' => 'layui-laypage layui-laypage-molv', 'itemTag' => '', 'currentClass' => 'current', )); ?>
</div>
这样，如果我们有需要使用ECHO主题的评论模块的可以使用到我们的Typecho主题中。
本文出处：老蒋部落 » 一个体验不错的 Typecho 评论框/样式模块整理 | 欢迎分享（ 公众号：老蒋朋友圈 ）
HucorePro - 一款免费的Typecho单栏主题适合写作
