typecho评论显示个性化自定义

首页电脑网络typecho评论显示个性化自定义(2012年04月30日)

typecho的官方博客有一篇文章专门讲诉typecho的评论自定义显示的:点击这里去看看,官方的不够直观,在彼岸云雨找到一篇详细的。
方法如下:在 comments.php 开头部份加入如下方法即可实现自定义。(解说可以查看注释)

<?php function threadedComments($comments, $singleCommentOptions) {
    
	$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="<?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;
 //以上部份 不用理会,是判断一些奇偶数评论和作者类的,下面的才是需要修改的,根据需要修改吧, php部份不需要 修改,只需要修改 HTML 部分,下面是我现在用的
?>">
    <div class="comment-author">
        <?php $comments->gravatar($singleCommentOptions->avatarSize, $singleCommentOptions->defaultAvatar);    //头像 只输出 img 没有其它标签 ?>
        <div class="comment-info">
            <cite class="fn"><?php $singleCommentOptions->beforeAuthor();
                $comments->author();$singleCommentOptions->afterAuthor(); //输出评论者 ?>
            </cite>
            <em class="comment-meta">
                <a href="<?php $comments->permalink(); ?>"><?php $singleCommentOptions->beforeDate();
                $comments->date($singleCommentOptions->dateFormat);
                $singleCommentOptions->afterDate();  //输出评论日期 ?></a>
            </em>
        </div>
        <div class="comment-reply">
        	<?php $comments->reply($singleCommentOptions->replyWord); //输出 回复 链接?>
   	</div>
    </div>
    
    <?php $comments->content(); //输出评论内容,包含 <p></p> 标签 ?>
    <?php if ($comments->children) { ?>
    <div class="comment-children">
        <?php $comments->threadedComments($singleCommentOptions); //评论嵌套?>
    </div>
    <?php } ?>
    
</li>
<?php
}
?>

下面是对应的CSS代码:

.comment-list{margin:0;list-style:none; padding: 5px 0}
ol.comment-list li{ margin: 10px 0;padding: 10px 10px 5px;border:1px solid #e3e3e3;background-color:#FAFAFA;-moz-border-radius:5px; -webkit-border-radius:5px;}
ol.comment-list li.comment-odd{background-color: #F4F9FF; border-color: #D0DDF6; }
ol.comment-list li.comment-even{background-color:#fff; border-color: #E3E3E3;}
ol.comment-list li.comment-by-author{border-color: #b8cdf6;}
ol.comment-list li.comment-by-user {}
ol.comment-list li .comment-reply{float: right; margin-top: -3px;}
ol.comment-list li .comment-reply a{font-size:12px;border:none;color:#aaa;}
ol.comment-list li .comment-reply a:hover{color:#444;}
.comment-body{overflow:hidden;}
.comment-body p{ margin: 5px 0}
.comment-author{border-bottom: 1px solid #ECECEC;height: 36px;padding-bottom: 5px;width: 100%;}
ol.comment-list li.comment-odd .comment-author { border-bottom-color:#D0DDF6}
.avatar{float:left;border:1px solid #E3E3E3; padding: 2px; background-color: #fff;}
.comment-info {color: #888;float: left;line-height: 16px;padding-left: 5px;} 
.comment-info .fn{font-style:normal; display: block; margin-top: 4px}
.comment-info .comment-meta{color:#999;font-size:10px;}

实现的效果:commentstyle.jpg 如果自己理解了上面的实现代码就可以通过修改css定义来实现自己喜欢的嵌套样式了。

已有 7 条评论 »

  1. 沙发,自定义评论想多爽就多爽。。。。

  2. 不错~~感谢站长分享

  3. 很明显没看文档~~~
    http://docs.typecho.org/themes/custom-comments

    1. 哟西,有更详细的文档~谢谢了

  4. What light of day isn't today?

  5. 看得不是很明白,还得再消化一下。。。。

  6. 我照着您说的做了下,怎么没有效果呢.

添加新评论 »

You must enable javascript to see captcha here!