社区首页 >专栏 >一个体验不错的 Typecho 评论框/样式模块整理

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

老蒋

发布于 2021-12-24 06:55:40

92301

代码可运行

文章被收录于专栏：老蒋专栏老蒋专栏

运行总次数：1

代码可运行

我们有在用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>