Typecho 主题评论模块个性化的实现

06/11/201706:23:56
评论
115

早就想研究下这部份,一直拖到现在。 主题设计时,评论模块希望设计得独特,富有个性,就需要修改评论结构,而 typecho 默认模板中提供给我们的只有一行简单代码:

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

把结构都写死了。当然,其实官方的博客中有一篇文章已经声明可以自定义评论结构,只是不太详细,有点摸不着头脑~
于是今天抽空折腾了下,总的来说是 在 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;}
Typecho 响应式博客主题 Echo 未分类

Typecho 响应式博客主题 Echo

Echo主题简介一套基于layui框架的Typecho主题Echo,主题名取自博客域名(www.echo.so)。主题极简美观,并进行了响应式布局,使博客在手机和平板电脑上也有更好的浏览阅读体验。主题...
Typecho 漂亮的单栏主题 Aria 未分类

Typecho 漂亮的单栏主题 Aria

主题简介书写属于自己的篇章,一款简洁漂亮的单栏Typecho博客主题Aria,具体样式大家可以看底部下载部分的作者演示站,总的来说算是一个功能比较完整的主题了,最主要是作者更新的相对来说比较勤。主题预...
Typecho 简约大图封面主题 Cola 未分类

Typecho 简约大图封面主题 Cola

主题简介这是由网友@可乐投稿的作品,主题采用了大图封面的单栏设计,整体看上去比较干净,不过该主题可以优化的细节之处还有很多,比如:1.评论样式有点粗糙 2.配色有点不够统一,特别是按钮触发的部分 3....
Typecho程序伪静态规则大全 开发日志

Typecho程序伪静态规则大全

Typecho程序的伪静态规则不同于wp直接默认可用,需要我们手工加载到空间中才可以生效。这里TypechoTips整理了一些不同的主机环境中的伪静态规则,希望对大家有所帮助!1、Linux Apac...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: