文章
文章用户商铺文档快讯圈子网址导航
!
也想出现在这里？ 联系我们吧
广告位

Typecho自定义文章评论列表样式

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


                    


    

            

            

                

                    

                        

                            
                            
给TA打赏

                        

                    
 
                    

                                 
                        

                                    
 
        
                        
 
                        共{{data.count}}人
                    

                

            

            
人已打赏

            
        

            

                

                    

                        
                        
                        
                        
                    

                    

                        
                        
                    

                

            

        
DIVTypecho代码

                

                    

                        

                            

                                

                                
CMS教程

                                
Typecho调用指定数量最新文章的方法代码

                                
2021-3-3 10:11:51

                            

                        

                    

                    

                        

                            

                                
CMS教程

                                
Typecho热评文章的调用方法教程

                                
2021-3-3 10:12:09

                                

                            

                        

                    

                

            

  
下载说明

  

    
    
      
  • 1、微码盒所提供的压缩包若无特别说明，解压密码均为weimahe.com；
    • 
      
  • 2、下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;
    • 
      
  • 3、文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;
    • 
      
  • 4、资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便微码盒及时进行更新;
    • 
     
  • 5、其他下载问题请自行搜索教程，这里不一一讲解。
    • 
   

 





   
站长声明

   

     本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有；若为付费资源，请在下载后24小时之内自觉删除；若作商业用途，请到原网站购买；由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！






		

		

			
				0 条回复			
			A文章作者
			M管理员
		

		

			
			
		

	


	

				

							

					
				

						

				
			

			

				

					

						

						

							
							
						

					

					

						
					

				

				

					

						
						
					

					

						
			
													

								

								

									

										

											
											
											
											
										

										

											
											
											
										

									

									

										
										
										
									

								

								

									
									
								

							

											

				

				

					

													
							

															

																			

								
								

									

										
										

											
											
										

									

									

										
										
									

								

							

											

					

						
						
					

				

			

		

			


	


		
    
			
    暂无讨论，说说你的看法吧
    		

			

	

		
	






                        


        
        
    

    
            
            

                
            


            
            

                
            


            
            

            
            

                
            

            
            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            

        
                
                

                    
                

                    

            

                

                    

                        

                            ❯
                        

                    

                                            

                            
                                

                                     
                                    
解锁会员权限

                                

                             
                            

                                

                                    
开通会员
 
                                    
解锁海量优质VIP资源
 
                                    
立刻开通

                                

                            

                        

                                                            

                                                    

                                                                个人中心
                            

                                                                            

                                                                
                                购物车
                            

                                                                            

                                                                优惠劵
                            

                                                                            

                                                                今日签到
                            

                                                                            

                                
                                                                有新私信
                                私信列表
                            

                                                
                                                    

                                                                搜索
                            

                        
                                            

                    

                                                

                                                        

                                
  • 扫码打开当前页

                            

                        

                        

                                                        返回顶部