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

ssr

撰写于 2022年 02月 26 日

我们有在用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为子级，否则是父级
?>
<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 } ?>
<?php } ?>
<?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; ?>

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
}

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

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

这样，如果我们有需要使用ECHO主题的评论模块的可以使用到我们的Typecho主题中。