忙于采集的蜜蜂,无暇在人前高谈阔论 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

Typecho评论模块个性化

开发 memory 发布于May 8, 2015 标签: PHP

老早就想研究下这部份,一直拖到现在。 主题设计时,评论模块希望设计得独特,富有个性,就需要修改评论结构,而 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;}

相关推荐

添加新评论

全部评论:已有 8 条评论

  1. nice

    请教下这个评论审核提示代码是直接在评论模板调用的吗,我直接用了报错呢 致命错误:调用非函数对象中的成员函数 谢谢!

    1. memory

      这个是15年的文章了,这几年不知道有没有变化 。 你可以根据错误信息具体调试一下。若搞不明白,可以到typecho的论坛发个贴,直接@memory 我帮你看下。

  2. 夏目贵志

    我终于懂了是什么意思了!!!

  3. John

    请问移动评论框的onclick怎么写?

  4. 阿狸派

    学到了,非常感谢会常来看看

  5. Roogle

    谢谢博主分享,代码用上了,原生评论折腾的有点烦了

    1. memory

      现在很多用畅言或多说的,改个JS就完事了,还方便,哈哈。我是折腾命,没办法啦,

  6. 12

    看看

网站状态

  • 栏目分类:49个
  • 发布文章:1550篇
  • 用户评论:825条
  • 开博至今:4310天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • memory: 海哥最近更新的新版的我还没有测试过。具体原因还不清楚。不过你可能...
  • yiye: 楼主,我下的是最新的官方mysql镜像,然后密码用户名都正确,数...
  • memory: 这个是15年的文章了,这几年不知道有没有变化 。 你可以根据错误...
  • nice: 请教下这个评论审核提示代码是直接在评论模板调用的吗,我直接用了...
  • vultr: 学习了
  • 小云: 厉害,实用
  • memory: NND。自己写的看不懂了。。。
  • memory: 服务器上的一个配置.
  • haha: 是在主机端还是从机端设置
  • wu先生: 收藏备用。
  • memory: 哈哈,无所谓了。。。早改了
  • 文小刀: 真的是很标题
  • 进击的巨波: 终于找到一篇真正行的通的安装git文档,写的非常详细,感谢!
  • memory: 可以邮件告知一下具体错误给我。你可以在本地先测试一下。我这样测试...
  • 钛客志: 你好博主,我是按照你的方法设置,但是老是出错,要么站点出问题,不...
  • 小云: 受教了
  • memory: 这是个扩展,安装就有了.