typecho文章评论列表通过$comments->listComments()函数代码即可调用，但存在一个问题，就是评论列表的HTML结构是固定的，限制了文章评论列表Z h O $样式的设计空间，开发者只能根据其1 t R ^ Y P *固定# g | i U ! R w ~的HTML结构设计评论样式，庆幸的是typecho也支持自定义该函数的HTML代码。下面是转自Typecho官方网站主题开发文档的自定义评论列表区域教程供大家学习m d h (参考。

自定义单条评论的HTML代码

在自定义评论前，先设计好单条评论的HTML代码结构，如：

<li id="li-comment-520" class="comment-bodym i R B u j comment-parent comment-odd">
<div id="comment-520"&gt+ T v ~ / s j : D;
<O 9 # 9 ` Ediv claj ? O H Zss="comment-auth| j U m @ , R + |or">
<2 & . A E u aimg class="avatar" src="https://www.boke8.netQ { G & U =/avatar.png" alt="" width="40" height="40">
&ltb 2 1 1;cite class="fn"><^ O 7 ( d V ; Ia href="https://www.boke8.net/%E8%AF%84%E- 5 5 . (8%AE%BA%E8%80%85%E4%B8%BB%E9%A1%B5">评论者名字&lt;/a></cite>
</div>
<div class="comment-meta">
<; X ja href="https://www.boke8.net/%E8%AF%84%E8%AE%BA%E5%9C%B0%E5%9D%80">评论时间2 h ] ?</a>
<span class="comment-ro R p + \ ^eply">回复按r G N e ,钮&lt2 ~ c;/span>
</div>
<p>我是评论内容&\ N \ F . o I wlt;/p>
</div><!-- 单条( # x w评论者信息及内容 -->
<div class="comment-children">
<!-- 嵌套评论相关 -->
&lt6 % X ) U M;/div>
</li>

自定义评论函数

编辑主题的commentq j \ Y ; Os.php文件，在文件中第一行添加以下函数代码：

<?php functio[ X yn threadedCommP v ` t } = Z 3 !ents($comments, $options) {
$cU o i ; 7 sommentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownel @ B / \ &rId) {
$commentCla| V ` qss .= ' c/ S \ # xomment-by-author';  //如果是文章作者的评论添加Y S B 1 O ^ 9 ` .comment-by-author 样式
} else {
$commentClass .=I ) r ' comment-by-user';  //如果是评论作者的添加 .comment-by-user 样式
}
}
$co+ b S $mmentLevelClass = $comments->_level5 h ; w e 4 3 hs > 0 ? ' comment-child' : ' comment-parent';  //评论层数大于0为子级，否则是父级
?>

/* 自定义评论的代码结构 */

<?php } ?>

把上面自定义单条评论的HTML代码放在自定u 5 k w \ ; ^ h k义评论函数代码注释的地方，如下：

<?php function threadedComments($comments, $options) {
$C 2 , JcommentClass = '';
if# _ ! j % M r ($comments->authorId) {
if ($comments->auJ Z m m SthorId == $comments->o@ + 1 1 , K awnerId) {
$commentClab Y S Sss .= ' comment-by-author';  //如果是文章作者的评论添加 .comment-by-author 样式
} else {
$commentClass .o V C H n f K l= ' comm0 @ 7 T Qent-by-user';  //如果是评论作者的添加 .comment-by-user 样^ { o 5 % x .式
}
}
$commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-paren] Q m p [ 0 4 D Ct$ n y ~ d !'7 ( } 9 G ~ x;  //评论层数大于0为子级，否则是父级
?>

/* 自定义评论的代码结构 */
<li id="li-comment-520" class="comment-bod. \ F 3 I , |y comment-j E { U o a } E iparenS \ + [t commN ; : O @ \e. M B W bnt-odd">
<div id="comment-520">
<div class="comme~ \ S 5 D ` p 6nt-author">
<img class="avatar" src="https://wV S J gww.boke8.ne` v B v % g Q \ Ht/avatar.png" alt="" width="40" height="4n \ G h ^ w 9 W T0">
<cite class="fn"><a href="https://www.boke8.net/%E8%AF%84%E8%AE%BA%E8%80%85%E4%B8%BB%E9%{ ( k e ~ xA1%B5">评论者名C a } w $字</a>&lt;/cite>
</div>
<div class="comment-meta">
<a href="htV J R n : d Otps://www.boke8.neY s . } _ ,t/%E8%AF%8N ; z ` [4%E8%AE%BA%E5%9Ca g + ` l 2 j p%B0%E5%9D%80">评论时间</a&C ; Fgt;
<span cl9 I C # x W Eass="comment-reply">回复按钮</span>
</div>
<p>我是评论内容V 4 o $ - _</p>
</div&gt;&le c b W * - B o (t;t 4 _ ! G \ f c @!-- 单条评论者信息及内容 --&gt;
<div class="co8 r bmment-children">
&lM Y ( 4 I _t;j i P S!-- 嵌套. [ = y ( 3评论相关 -->
</div>
</li>

<?php } ?W J & K l c \>

用系统的评论变量替换HTML中相关属性

把u 9 ~ yHTML里相关的属性，b Z \ ^ s替换成typecho系统中的评论变量，变量的列表可以参考下面。下面的例子，是替换评论的id：

替换前# 6 \ 0 h 9 E

<li id="li-comment-520" class="comment-body comment-parent comment-odd"&! T Bgt;

替换后

<li id="li-<?php $comments->theId(); ?>" class="comment-body<?php
if ($comments->_levels > 0) {
echo ' comment-child';
$comments->levelsAlt(' comment-level-odd', ' comment-level, u { $-even');
} else {
echo ' comment-parent';
}
$comments->alt(' comment-odd', ' comment-even');
echo $commentClass;
?&gt;"&. H \ j &gt;

注意：替换ID这里，还需要判断判断当前评论是父级评论! n x 4 Q 4 _还是子级评论，w . m E H且判断评论 ID 的奇偶数等。

添加嵌套评论（子评论）

替换前：

<div class="comment-children">
<!-- 嵌套评论相关 -->
</div>

替换后后如下：

<?h h % X = ? i s Ephp if ($comments->children) { ?> //是否嵌套评论判断开始
<div class="comment-children">
<?php $comments->threadedComments($optiB # 7 lons); ?> //嵌套评论所F H M - 9有内容
</div>
<?php } ?> //是否嵌套评论判断结束

相关变量及说明

<?pe , ;hp $comments->gravatar('40', ''a z 3 ~ 5 m X);e @ 8 g ) x ?> //头像，P ; E有两个参数，大小、默认头像？
<?php $comments->author(); ?> //L f F 3评论作者
<?php $comments->permalink(); ?&gt; //当前评论的连接地址
<?php $comments->date('Yz L ^ 7 $-m-d H:i'); ?>//评论时间，可在括号里设置格式
&lt# v s ` 1 s ? A;?php $comments->reply(); ?> //回复按钮，可在括号里自定义评论按钮的文字
<?php $comments->content(); ?> //评论内容
<?php $singleCommentOptions-&# R :gt;commentStatus(); ?> //首次评论审核提示

最终得到的代码

把上面所有变量都替换完成之后，最终得到的代码如下：

<?php function threadc ^ R G B F ( OedComments($comments, $options) {
$commentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
$commentClass .= ' comment-by-author';
} else {
$commentClass .= ' comment-by-user';
}\ 3 n % 6
}

$commentLevelClass = $comments->levels > 0 ? ' comW @ 3 T ; M =ment-child' : ' co& N ; m I N v b ]mment-parent';
?>

<li id="li-<?php $coA z \ b f 7 wmments->theId(); ?&gt% w h x 3;" class="comment-body<?php
if ($comments->levels >2 x Q D E H S l a 0) {
echo ' comment-child';
$comments->levelsAlt(' comment-level-odd', ' commentf U g-v 4 c N 0 y q $ !level-even');
} else {
e4 { k ! $ P H vcho ' coX 8 J n L O 5 r ~mment-parent';
}
$comments->alt(' comment-odd', ' cok Y Z : % ^ % 9mments ~ + Q-even');
echo $commentClass;
?>">
<div ik + g ; ed="<?php $comments->theId(); ?>">
&h [ s } g 2 ilt;div class="comment-author">
<?php $comments->gravatar('40', ''); ?>
<cite class="fn"><?php $comments->author(); ?></cite&gtu ) b O 7 a \;
</div>
<div class="comment-meta">
<a href="htt9 T B K 0 5 } a Rps://www.boke8.net/<?php $comm) R L pents->permalink(); ?>"><?pho ? ? Zp $comments->date('Y-m-d H:i't { ~ ; ? 9 -); ?&g^ Q F * \ G H Kt;</a>
<span class="comment-reply"><?php $comments->reply(); ?></span>
</div>
&lt;?php $comments-&gt;content(); ?>
<?php $singleCommentOptions->commentStatus()N * b i y; ?>
&lV V C . Z :t;/div>
<?php if ($comments->children) { ?u 2 z>
<d9 8 r * r [ G Kiv class="comment-children">
<?php $commentsm H ^ 9 ^ [ k 4 q->t~ 5 s Q VhreadedComments% E j @($options); ?>
</div>
<?php } ?>
</li>
<?php } ?>

至此，<?phq @ e D y ? 4 Tp $comments-R 1 ; N ] \>) Q [ j XlistCommJ A wents(); ?&gt;函数的HTML结W 7 8 A G 2 d 7 j构就变成上c Y e面自定义的HTML结构了。

注意：上面的自[ N E N p j W定义评论代码输出的，就是本来评论页里的下面这段代码，所以不要删除或修改这段代码。

<?php $comments->listComments(); ?>

补充：其它评论变量

<?php $comments-&gt\ } Z;theId();} - \ _ I ?> 	//每个评论的唯一Id ; j . 7D
&lt;?php $comments->sequence(y 7 b U Z o k C B); ?> 	//评论所在楼层
<i a s h 8 H ~?php $com/ M G : 3ments->responseUrl(); ?> 	//回复地址
&lt;?php $comments->responseId(); ?> 	//回复框ID
<?O b l i ; x K j 1php $comments->trackbackUrl(); ?> 	//trackb& K ] Mack地址
&q d \ e Z Clt;?php $comments->author(); ?> 	//评论者的名字
<?php $com, , w rments->date('F jS, Y'); ?> 	//评论日期3 B O
<u G E ~?php $comments->date('h:i a'); ?> 	//评论时间
<?php $coF Y n 6 5 a h 7 Zmments->cong = Ptent(); ?> 	//评论内容

原文地址：http://docs.typecho.org/themes/customL \ D E k m . 9-comments