一、需求
使用 typecho
进行模板开发的时候,默认评论样式很难看。
因此需要评论需要重新输出或进行样式设定。
默认的评论模板文件路径是:comments.php
关于评论模板开发的官方文档地址是:
主要使用的相关变量:
1 2 3 4 5 6 |
<?php $comments->gravatar('40', ''); ?> //头像,有两个参数,大小、默认头像? <?php $comments->author(); ?> //评论作者 <?php $comments->permalink(); ?> //当前评论的连接地址 <?php $comments->date('Y-m-d H:i'); ?>//评论时间,可在括号里设置格式 <?php $comments->reply(); ?> //回复按钮,可在括号里自定义评论按钮的文字 <?php $comments->content(); ?> //评论内容 |
二、自定义评论输出
1、threadedComments
方法
如果要自定义评论输出内容,则需要重写 threadedComments($comments, $options)
方法,这个方法需要放在模板文件中 <?php $this->comments()->to($comments); ?>
的前面,因为实际上 $this->comments()->to($comments);
会调用 threadedComment
模板。
下面的方法代码是我在 基于Bootstrap4的 响应式 typecho 博客主题 使用的自定义评论模板。
最终的效果是:
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 |
<?php function threadedComments($comments, $options) { $commentClass = ''; $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(); ?>" class="comment-item"> <div class="comment-author"> <?php $comments->gravatar('40', ''); ?> <span class="fn"> <?php $comments->author(); ?> <?php if ($comments->authorId) { if ($comments->authorId == $comments->ownerId) { echo "<span class='author-after-text'>[作者]</span>"; }?> <?php }?> </span> </div> <div class="comment-meta"> <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a> </div> <span class="comment-reply"><?php $comments->reply(); ?></span> <div class="comment-content"> <?php $comments->content(); ?> </div> </div> <?php if ($comments->children) { ?> <div class="comment-children"> <?php $comments->threadedComments($options); ?> </div> <?php } ?> </li> <?php } ?> |
2、css样式设置
使用上面代码输出的样式仍旧是默认的样式,因此需要对上面的 class 进行 css 处理。
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/*评论样式 start*/ .comments-wrapper { border-top: 1px dashed #cccccc; padding-top: 1rem; margin-top: 3rem; } .comments-wrapper img.avatar { text-align: center; margin-right: 10px; } .comments-wrapper .comment-content p { font-size: 14px; } .comment-list, .comment-list li { list-style: none; } .comments-wrapper .comment-author { display: inline-block; font-weight: 600; } .comments-wrapper .comment-meta { display: inline-block; } .comments-wrapper .comment-meta a { color: #cccccc; font-size: 12px; } .comments-wrapper .comment-content { padding-left: 52px; } .comments-wrapper .comment-reply { display: inline-block; float: right; font-size: 12px; } .comments-wrapper .comment-item { border-top: 1px solid #dfdfdf; padding-top: 10px; } .comment-list, .comment-list li { list-style: none; } .comment-children { padding-left: 40px; } .comment-list { padding-left: 0; } .comments-wrapper .cancel-comment-reply { margin: 10px 0; } .comment-author .author-after-text { font-size: 12px; color: #0c5; } .add-comments { margin-top: 1rem; } #response { margin: 1rem 0; } |
三、判断是否是作者本人的评论或者回复
如果要如上面示意图显示是否是本人发表的评论,则需要进行一次判断。
typecho
官方文档给的方式通过设置 class
的方式,如下:
1 2 3 4 5 6 7 8 |
$commentClass = ''; if ($comments->authorId) { if ($comments->authorId == $comments->ownerId) { $commentClass .= ' comment-by-author'; } else { $commentClass .= ' comment-by-user'; } } |
但是我在使用的时候,并不是很好用,反而会经常出现问题,样式控制也不好控制,于是我直接在作者名字上进行判断:
判断的代码放在作者输出之前或者之后都可以。
首先判断是否有 authorId
属性,如果有,则判断 authorId
和 ownerId
是否一致即可。
1 2 3 4 5 6 |
<?php $comments->author(); ?> <?php if ($comments->authorId) { if ($comments->authorId == $comments->ownerId) { echo "<span class='author-after-text'>[作者]</span>"; }?> <?php }?> |
本文最后更新于2021年4月8日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!