差别
这里会显示出您选择的修订版和当前版本之间的差别。
themes:custom-comments [2013/12/18 17:09] ShingChi |
themes:custom-comments [2013/12/22 09:24] (当前版本) ShingChi |
||
---|---|---|---|
行 1: | 行 1: | ||
====== 自定义评论列表区域 ====== | ====== 自定义评论列表区域 ====== | ||
- | 假如我们要实现一段这样的评论的 html 代码,效果当然要综合 css 样式来看 | + | ===== 一、自定义单条评论的HTML代码 ===== |
- | <code html><li id="li-comment-250" class="comment-body comment-parent comment-odd"> | + | 在自定义评论前,我们得先设计好单条评论的 HTML 代码结构,如: |
- | <div id="comment-250"> | + | |
+ | <code html><li id="li-comment-520" class="comment-body comment-parent comment-odd"> | ||
+ | <div id="comment-520"> | ||
<div class="comment-author"> | <div class="comment-author"> | ||
- | <img class="avatar" src="avatar.png" alt="" width="40" height="40"><!-- 评论者头像 --> | + | <img class="avatar" src="avatar.png" alt="" width="40" height="40"> |
<cite class="fn"><a href="评论者主页">评论者名字</a></cite> | <cite class="fn"><a href="评论者主页">评论者名字</a></cite> | ||
</div> | </div> | ||
行 14: | 行 16: | ||
</div> | </div> | ||
<p>我是评论内容</p> | <p>我是评论内容</p> | ||
- | </div><!-- 评论者信息及内容 --> | + | </div><!-- 单条评论者信息及内容 --> |
<div class="comment-children"> | <div class="comment-children"> | ||
<!-- 嵌套评论相关 --> | <!-- 嵌套评论相关 --> | ||
行 20: | 行 22: | ||
</li></code> | </li></code> | ||
- | 如何去实现呢?首先要打开模板文件夹里的 comments.php 文件,做好修改准备。 | + | 自定义好HTML代码后,将如何去实现呢?首先我们要打开模板文件夹里的 comments.php 文件,做好修改准备。 |
- | ===== 一、把上面的代码,也即你要自定义的 html 代码,复制到这个文件的最上面 ===== | + | ===== 二、使用自定义评论函数 ===== |
- | ===== 二、在这段代码的外围加入自定义评论样式的函数 ===== | + | 打开 comments.php 文件后,我们需要在它的顶部,插入以下函数代码: |
<code php><?php function threadedComments($comments, $options) { | <code php><?php function threadedComments($comments, $options) { | ||
行 38: | 行 40: | ||
?> | ?> | ||
- | /* 这里放刚才上面写的评论的 html 代码 */ | + | /* 自定义评论的代码结构 */ |
<?php } ?></code> | <?php } ?></code> | ||
- | ===== 三、在 li 的 css 样式中判断不同层次的、不同 ID 的评论,并添加 css 样式 ===== | + | 其次,将我们刚才自定义好的单条评论的 HTML 代码,放在上面代码里注释的地方,如下: |
- | 注意区别下面两句的不同地方 | + | <code html><?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为子级,否则是父级 | ||
+ | ?> | ||
- | <code html><li id="li-comment-250" class="comment-body comment-parent comment-odd"></code> | + | /* 自定义评论的代码结构 */ |
+ | <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> | ||
- | 加入判断代码之后,第一处是判断评论 ID,后者是判断当前评论是父级评论还是子级评论,且判断评论 ID 的奇偶数 | + | <?php } ?></code> |
- | <code php><li id="li-<?php $comments->theId(); ?>" class="comment-body<?php | + | ===== 三、用系统的评论变量替换HTML中相关属性 ===== |
+ | |||
+ | 把 HTML 里相关的属性,替换成 typecho 系统中的评论变量,变量的列表可以参考下面。下面的例子,是替换评论的 id: | ||
+ | |||
+ | <code html><!-- 替换前 --> | ||
+ | <li id="li-comment-520" class="comment-body comment-parent comment-odd"></code> | ||
+ | |||
+ | <code php>/* 替换后 */ | ||
+ | <li id="li-<?php $comments->theId(); ?>" class="comment-body<?php | ||
if ($comments->_levels > 0) { | if ($comments->_levels > 0) { | ||
echo ' comment-child'; | echo ' comment-child'; | ||
行 61: | 行 97: | ||
?>"></code> | ?>"></code> | ||
- | ===== 四、添加评论者的相关信息和评论内容 ===== | + | 其中,替换ID这里,还需要判断判断当前评论是父级评论还是子级评论,且判断评论 ID 的奇偶数等。 |
- | <code html><div id="comment-250"> | + | ===== 四、添加嵌套评论(子评论) ===== |
- | <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></code> | + | |
- | 更改后代码,注意各个信息的代码是什么 | + | 替换前: |
- | + | ||
- | <code php><div id="<?php $comments->theId(); ?>"> <!-- 评论 ID --> | + | |
- | <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(); ?> <!-- 评论内容 --> | + | |
- | </div></code> | + | |
- | + | ||
- | 相关参数及说明: | + | |
- | + | ||
- | <code php><?php $comments->gravatar('40', ''); ?> //头像,有两个参数,大小、默认头像? | + | |
- | <?php $comments->author(); ?> //评论作者 | + | |
- | <?php $comments->permalink(); ?> //当前评论的连接地址 | + | |
- | <?php $comments->date('Y-m-d H:i'); ?> //评论时间,可在括号里设置格式 | + | |
- | <?php $comments->reply(); ?> //回复按钮,可在括号里自定义评论按钮的文字 | + | |
- | <?php $comments->content(); ?> //评论内容</code> | + | |
- | + | ||
- | ===== 五、添加嵌套评论(子评论)的代码 ===== | + | |
<code html><div class="comment-children"> | <code html><div class="comment-children"> | ||
行 104: | 行 107: | ||
</div></code> | </div></code> | ||
- | 更改后如下: | + | 替换后后如下: |
- | <code php><?php if ($comments->children) { ?> //是否嵌套评论判断开始 | + | <code php><?php if ($comments->children) { ?> //是否嵌套评论判断开始 |
<div class="comment-children"> | <div class="comment-children"> | ||
- | <?php $comments->threadedComments($options); ?> //嵌套评论所有内容 | + | <?php $comments->threadedComments($options); ?> //嵌套评论所有内容 |
</div> | </div> | ||
- | <?php } ?> //是否嵌套评论判断结束</code> | + | <?php } ?> //是否嵌套评论判断结束</code> |
+ | |||
+ | ===== 五、相关变量及说明 ===== | ||
+ | |||
+ | <code php><?php $comments->gravatar('40', ''); ?> //头像,有两个参数,大小、默认头像? | ||
+ | <?php $comments->author(); ?> //评论作者 | ||
+ | <?php $comments->permalink(); ?> //当前评论的连接地址 | ||
+ | <?php $comments->date('Y-m-d H:i'); ?>//评论时间,可在括号里设置格式 | ||
+ | <?php $comments->reply(); ?> //回复按钮,可在括号里自定义评论按钮的文字 | ||
+ | <?php $comments->content(); ?> //评论内容</code> | ||
+ | |||
+ | ===== 六、最终得到的代码 ===== | ||
- | 到这里整个自定义评论样式到这里就结束了,**最终得到**的便是以下代码 | + | 当我们把上面所有变量都替换完成之后,最终得到的代码如下: |
<code php><?php function threadedComments($comments, $options) { | <code php><?php function threadedComments($comments, $options) { | ||
行 156: | 行 170: | ||
<?php } ?></code> | <?php } ?></code> | ||
- | **注意:**上面的自定义评论代码输出的就是本来评论页里的这段代码,所以你就不用对原来的这段代码做任何更改了。 | + | **注意:**上面的自定义评论代码输出的,就是本来评论页里的下面这段代码,所以你就不用对这段代码做任何更改了。 |
<code php><?php $comments->listComments(); ?></code> | <code php><?php $comments->listComments(); ?></code> | ||
- | SVN 版本更新:首次评论审核提示,在自定义评论代码的适当地方添加以下语句,否则将看不到审核提示语句。 | + | 最新版本更新:首次评论审核提示,在自定义评论代码的适当地方添加以下语句,否则将看不到审核提示语句。 |
<code php><?php $singleCommentOptions->commentStatus(); ?></code> | <code php><?php $singleCommentOptions->commentStatus(); ?></code> |