一个体验不错的 Typecho 评论框/样式模块整理

我们有在用Typecho主题做模板的时候，每次老蒋比较纠结的就是评论框和样式太单一。今天有看到国内的一款Echo免费主题（https://github.com/yunfeilangwu/echo）的评论框和样式不错，于是我将拆分出来，这样如果以后有需要用到的话可以直接用到主题中，当然这些需要感谢Echo主题作者。
我们看看这款主题的评论样式是什么样子的。

感觉确实比默认的样式好看很多。我们看看如何加入到我们的网站上呢？这里我们需要注意的是这款主题是使用的LAYUI前端，所以，我们主题最好也是用这个前端的，要不比较麻烦。老蒋有些时候也喜欢这个前端，比国外的BS前端简单很多。
1、comments.php 页面
这里老蒋不是太喜欢他的头衔功能，所以我把头衔功能去掉：

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为子级，否则是父级
?>


    

        

            gravatar('40', ''); ?>
        
        

            
                author(); ?>
                
            
            
parent); ?>
            
content(); ?>
            reply(); ?> date('Y-m-d H:i'); ?> 
        

    
    children) { ?>
        

            threadedComments($options); ?>
        
    







    comments()->to($comments); ?>
    
    allow('comment')): ?>
        

            

                cancelReply(); ?>
            
        
            
 
            

            

                user->hasLogin()): ?>
                

                    

                        
                        user->screenName(); ?>
                         »
                    
                
                

                    
                
                
                

                    
                
                

                    

                        
                    
                    

                        options->commentsRequireMail): ?>required />
                    
                    

                        options->commentsRequireURL): ?>required />
                    
                
                
                

                    
                
            
        
        have()): ?>
            

            
commentsNum(_t('暂无评论'), _t('唉呀 ~ 仅有一条评论'), _t('已有 %d 条评论')); ?>
            

            

                listComments(); ?>
            
            

                pageNav('«', '»', 1, '...', array('wrapTag' => 'div', 'wrapClass' => 'layui-laypage layui-laypage-molv', 'itemTag' => '', 'currentClass' => 'current', )); ?>
            
        
    
        

    

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
}

这样基本就完事。但是需要注意的，如果我们的前端分类页面的分页也要和这个样式一致，我们要稍微修改我们的分页调用。

                pageNav('«', '»', 1, '...', array('wrapTag' => 'div', 'wrapClass' => 'layui-laypage layui-laypage-molv', 'itemTag' => '', 'currentClass' => 'current', )); ?>