Typecho 文章评论列表通过 $comments->listComments() 函数代码即可调用，但存在一个问题，就是评论列表的HTML结构是固定的，限制了文章评论列表样式的设计空间，开发者只能根据其固定的HTML结构设计评论样式，庆幸的是 Typecho 也支持自定义该函数的HTML代码。下面是转自 Typecho 官方网站主题开发文档的自定义评论列表区域教程供大家学习参考。
自定义单条评论的HTML代码
在自定义评论前，先设计好单条评论的HTML代码结构，如：
<li id="li-comment-520" class="comment-body comment-parent comment-odd">
<div id="comment-520">
<div class="comment-author">
<img class="avatar" src="avatar.png" alt="" width="40" height="40">
<cite class="fn"><a href="评论者主页">评论者名字</a></cite>
</div>
<div class="comment-meta">
<a href="评论地址">评论时间</a>
<span class="comment-reply">回复按钮</span>
</div>
<p>我是评论内容</p>
</div><!-- 单条评论者信息及内容 -->
<div class="comment-children">
<!-- 嵌套评论相关 -->
</div>
</li>
自定义评论函数
编辑主题的comments.php文件，在文件中第一行添加以下函数代码：
<?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为子级，否则是父级
?>
/* 自定义评论的代码结构 */
<?php } ?>
把上面自定义单条评论的HTML代码放在自定义评论函数代码注释的地方，如下：
<?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-comment-520" class="comment-body comment-parent comment-odd">
<div id="comment-520">
<div class="comment-author">
<img class="avatar" src="avatar.png" alt="" width="40" height="40">
<cite class="fn"><a href="评论者主页">评论者名字</a></cite>
</div>
<div class="comment-meta">
<a href="评论地址">评论时间</a>
<span class="comment-reply">回复按钮</span>
</div>
<p>我是评论内容</p>
</div><!-- 单条评论者信息及内容 -->
<div class="comment-children">
<!-- 嵌套评论相关 -->
</div>
</li>
<?php } ?>
用系统的评论变量替换HTML中相关属性
把HTML里相关的属性，替换成typecho系统中的评论变量，变量的列表可以参考下面。下面的例子，是替换评论的id：
替换前
<li id="li-comment-520" class="comment-body comment-parent comment-odd">
替换后
<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;
?>">
注意：替换ID这里，还需要判断判断当前评论是父级评论还是子级评论，且判断评论 ID 的奇偶数等。
添加嵌套评论（子评论）
替换前：
<div class="comment-children">
<!-- 嵌套评论相关 -->
</div>
替换后后如下：
<?php if ($comments->children) { ?> //是否嵌套评论判断开始
<div class="comment-children">
<?php $comments->threadedComments($options); ?> //嵌套评论所有内容
</div>
<?php } ?> //是否嵌套评论判断结束
相关变量及说明
<?php $comments->gravatar('40', ''); ?> //头像，有两个参数，大小、默认头像？
<?php $comments->author(); ?> //评论作者
<?php $comments->permalink(); ?> //当前评论的连接地址
<?php $comments->date('Y-m-d H:i'); ?>//评论时间，可在括号里设置格式
<?php $comments->reply(); ?> //回复按钮，可在括号里自定义评论按钮的文字
<?php $comments->content(); ?> //评论内容
<?php $singleCommentOptions->commentStatus(); ?> //首次评论审核提示
最终得到的代码
把上面所有变量都替换完成之后，最终得到的代码如下：
<?php function threadedComments($comments, $options) {
$commentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
$commentClass .= ' comment-by-author';
} else {
$commentClass .= ' comment-by-user';
}
}
$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(); ?>">
<div class="comment-author">
<?php $comments->gravatar('40', ''); ?>
<cite class="fn"><?php $comments->author(); ?></cite>
</div>
<div class="comment-meta">
<a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a>
<span class="comment-reply"><?php $comments->reply(); ?></span>
</div>
<?php $comments->content(); ?>
<?php $singleCommentOptions->commentStatus(); ?>
</div>
<?php if ($comments->children) { ?>
<div class="comment-children">
<?php $comments->threadedComments($options); ?>
</div>
<?php } ?>
</li>
<?php } ?>
至此，<?php $comments->listComments(); ?> 函数的HTML结构就变成上面自定义的HTML结构了。
注意：上面的自定义评论代码输出的，就是本来评论页里的下面这段代码，所以不要删除或修改这段代码。
<?php $comments->listComments(); ?>
补充：其它评论变量
<?php $comments->theId(); ?> //每个评论的唯一ID
<?php $comments->sequence(); ?> //评论所在楼层
<?php $comments->responseUrl(); ?> //回复地址
<?php $comments->responseId(); ?> //回复框ID
<?php $comments->trackbackUrl(); ?> //trackback地址
<?php $comments->author(); ?> //评论者的名字
<?php $comments->date('F jS, Y'); ?> //评论日期
<?php $comments->date('h:i a'); ?> //评论时间
<?php $comments->content(); ?> //评论内容