Typecho自定义文章评论列表样式
时间:2020-08-01 阅读:287
typecho文章评论列表通过$comments->listComments()
函数代码即可调用,但存在一个问题,就是评论列表的HTML结构是固定的,限制了文章评论列表样式的设计空间,开发者只能根据其固定的HTML结构设计评论样式,庆幸的是typecho也支持自定义该函数的HTML代码。下面是转自Typecho官方网站主题开发文档的自定义评论列表区域教程供大家学习参考。
自定义单条评论的HTML代码
在自定义评论前,先设计好单条评论的HTML代码结构,如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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文件,在文件中第一行添加以下函数代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?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代码放在自定义评论函数代码注释的地方,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?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:
替换前
1 | <li id="li-comment-520" class="comment-body comment-parent comment-odd"> |
替换后
1 2 3 4 5 6 7 8 9 10 | <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 的奇偶数等。
添加嵌套评论(子评论)
替换前:
1 2 3 | <div class="comment-children"><!-- 嵌套评论相关 --></div> |
替换后后如下:
1 2 3 4 5 | <?php if ($comments->children) { ?> //是否嵌套评论判断开始 <div class="comment-children"><?php $comments->threadedComments($options); ?> //嵌套评论所有内容 </div><?php } ?> //是否嵌套评论判断结束 |
相关变量及说明
1 2 3 4 5 6 7 | <?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(); ?> //首次评论审核提示 |
最终得到的代码
把上面所有变量都替换完成之后,最终得到的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?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结构了。
注意:上面的自定义评论代码输出的,就是本来评论页里的下面这段代码,所以不要删除或修改这段代码。
1 | <?php $comments->listComments(); ?> |
补充:其它评论变量
1 2 3 4 5 6 7 8 9 | <?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(); ?> //评论内容 |
原文地址:http://docs.typecho.org/themes/custom-comments
网友评论