typecho 模板开发自定义评论样式

寻梦xunm| 711| 收集

3年前

超过1172天温馨提示

本文最后更新于2021年09月07日，已超过1172天没有更新，若内容或图片失效，请留言反馈。

一、需求

使用 typecho 进行模板开发的时候，默认评论样式很难看。

因此需要评论需要重新输出或进行样式设定。

默认的评论模板文件路径是：comments.php

关于评论模板开发的官方文档地址是：

http://docs.typecho.org/themes/custom-comments

主要使用的相关变量：

<?php $comments->gravatar('40', ''); ?> //头像，有两个参数，大小、默认头像？
<?php $comments->author(); ?> //评论作者
<?php $comments->permalink(); ?> //当前评论的连接地址
<?php $comments->date('Y-m-d H:i'); ?>//评论时间，可在括号里设置格式
<?php $comments->reply(); ?> //回复按钮，可在括号里自定义评论按钮的文字
<?php $comments->content(); ?> //评论内容

二、自定义评论输出
1、threadedComments 方法

如果要自定义评论输出内容，则需要重写 threadedComments($comments, $options) 方法，这个方法需要放在模板文件中 <?php $this->comments()->to($comments); ?> 的前面，因为实际上 $this->comments()->to($comments); 会调用 threadedComment 模板。

下面的方法代码是我在基于Bootstrap4的响应式 typecho 博客主题使用的自定义评论模板。

最终的效果是：

<?php function threadedComments($comments, $options) {
    $commentClass = '';
    $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
    ?>
    <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="comment-item">
            <div class="comment-author">
                <?php $comments->gravatar('40', ''); ?>
                <span class="fn">
            <?php $comments->author(); ?>
            <?php if ($comments->authorId) {
                if ($comments->authorId == $comments->ownerId) {
                    echo "<span class='author-after-text'>[作者]</span>";
                }?>
            <?php }?>
        </span>
            </div>
            <div class="comment-meta">
                <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>
            </div>
            <span class="comment-reply"><?php $comments->reply(); ?></span>
            <div class="comment-content">
                <?php $comments->content(); ?>
            </div>
        </div>
        <?php if ($comments->children) { ?>
            <div class="comment-children">
                <?php $comments->threadedComments($options); ?>
            </div>
        <?php } ?>
    </li>
<?php } ?>

2、css样式设置

使用上面代码输出的样式仍旧是默认的样式，因此需要对上面的 class 进行 css 处理。

/*评论样式 start*/
.comments-wrapper {
    border-top: 1px dashed #cccccc;
    padding-top: 1rem;
    margin-top: 3rem;
}

.comments-wrapper img.avatar {
    text-align: center;
    margin-right: 10px;
}

.comments-wrapper .comment-content p {
    font-size: 14px;
}

.comment-list, .comment-list li {
    list-style: none;
}

.comments-wrapper .comment-author {
    display: inline-block;
    font-weight: 600;
}

.comments-wrapper .comment-meta {
    display: inline-block;
}

.comments-wrapper .comment-meta a {
    color: #cccccc;
    font-size: 12px;
}

.comments-wrapper .comment-content {
    padding-left: 52px;
}

.comments-wrapper .comment-reply {
    display: inline-block;
    float: right;
    font-size: 12px;
}

.comments-wrapper .comment-item {
    border-top: 1px solid #dfdfdf;
    padding-top: 10px;
}

.comment-list, .comment-list li {
    list-style: none;
}

.comment-children {
    padding-left: 40px;
}

.comment-list {
    padding-left: 0;
}

.comments-wrapper .cancel-comment-reply {
    margin: 10px 0;
}

.comment-author .author-after-text {
    font-size: 12px;
    color: #0c5;
}

.add-comments {
    margin-top: 1rem;
}

#response {
    margin: 1rem 0;
}

三、判断是否是作者本人的评论或者回复

如果要如上面示意图显示是否是本人发表的评论，则需要进行一次判断。

typecho 官方文档给的方式通过设置 class 的方式，如下：

$commentClass = '';
    if ($comments->authorId) {
        if ($comments->authorId == $comments->ownerId) {
            $commentClass .= ' comment-by-author';
        } else {
            $commentClass .= ' comment-by-user';
        }
    }

但是我在使用的时候，并不是很好用，反而会经常出现问题，样式控制也不好控制，于是我直接在作者名字上进行判断：

判断的代码放在作者输出之前或者之后都可以。

首先判断是否有 authorId 属性，如果有，则判断 authorId 和 ownerId 是否一致即可。

<?php $comments->author(); ?>
<?php if ($comments->authorId) {
    if ($comments->authorId == $comments->ownerId) {
        echo "<span class='author-after-text'>[作者]</span>";
    }?>
<?php }?>

typecho 美化评论

0 赞 or 打赏

喜欢就打赏一点