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

我们有在用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">
    &
    #xe664;
    /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('退出');
     ?>
     &
    raquo;
    /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主题中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！