一个体验不错的 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

    }


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

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

    一个体验不错的 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为子级,否则是父级

    ?>

  • <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

    }


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

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

    赞 (0)

    猜您想看

    评论区(暂无评论)

    这里空空如也,快来评论吧~

    我要评论