差别
这里会显示出您选择的修订版和当前版本之间的差别。
|
themes:custom-comments [2013/10/21 06:55] 127.0.0.1 外部编辑 |
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\"> | + | |
| - | <div class=\"comment-author\"> | + | <code html><li id="li-comment-520" class="comment-body comment-parent comment-odd"> |
| - | <img class=\"avatar\" src=\"avatar.png\" alt=\"\" width=\"40\" height=\"40\"><!-- 评论者头像 --> | + | <div id="comment-520"> |
| - | <cite class=\"fn\"><a href=\"评论者主页\">评论者名字</a></cite> | + | <div class="comment-author"> |
| + | <img class="avatar" src="avatar.png" alt="" width="40" height="40"> | ||
| + | <cite class="fn"><a href="评论者主页">评论者名字</a></cite> | ||
| </div> | </div> | ||
| - | <div class=\"comment-meta\"> | + | <div class="comment-meta"> |
| - | <a href=\"评论地址\">评论时间</a> | + | <a href="评论地址">评论时间</a> |
| - | <span class=\"comment-reply\">回复按钮</span> | + | <span class="comment-reply">回复按钮</span> |
| </div> | </div> | ||
| <p>我是评论内容</p> | <p>我是评论内容</p> | ||
| - | </div><!-- 评论者信息及内容 --> | + | </div><!-- 单条评论者信息及内容 --> |
| - | <div class=\"comment-children\"> | + | <div class="comment-children"> |
| <!-- 嵌套评论相关 --> | <!-- 嵌套评论相关 --> | ||
| </div> | </div> | ||
| </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) { | ||
| - | $commentClass = \'\'; | + | $commentClass = ''; |
| if ($comments->authorId) { | if ($comments->authorId) { | ||
| if ($comments->authorId == $comments->ownerId) { | if ($comments->authorId == $comments->ownerId) { | ||
| - | $commentClass .= \' comment-by-author\'; //如果是文章作者的评论添加 .comment-by-author 样式 | + | $commentClass .= ' comment-by-author'; //如果是文章作者的评论添加 .comment-by-author 样式 |
| } else { | } else { | ||
| - | $commentClass .= \' comment-by-user\'; //如果是评论作者的添加 .comment-by-user 样式 | + | $commentClass .= ' comment-by-user'; //如果是评论作者的添加 .comment-by-user 样式 |
| } | } | ||
| } | } | ||
| - | $commentLevelClass = $comments->_levels > 0 ? \' comment-child\' : \' comment-parent\'; //评论层数大于0为子级，否则是父级 | + | $commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent'; //评论层数大于0为子级，否则是父级 |
| - | ?> //自定义评论函数开始 | + | ?> |
| - | //这里是上面的 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'; |
| - | $comments->levelsAlt(\' comment-level-odd\', \' comment-level-even\'); | + | $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); |
| } else { | } else { | ||
| - | echo \' comment-parent\'; | + | echo ' comment-parent'; |
| } | } | ||
| - | $comments->alt(\' comment-odd\', \' comment-even\'); | + | $comments->alt(' comment-odd', ' comment-even'); |
| echo $commentClass; | echo $commentClass; | ||
| - | ?>\"></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 --> | + | <code html><div class="comment-children"> |
| - | <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> | </div></code> | ||
| - | 相关参数及说明： | + | 替换后后如下： |
| - | <code php><?php $comments->gravatar(\'40\', \'\'); ?> //头像，有两个参数，大小、默认头像？ | + | <code php><?php if ($comments->children) { ?> //是否嵌套评论判断开始 |
| - | <?php $comments->author(); ?> //评论作者 | + | <div class="comment-children"> |
| - | <?php $comments->permalink(); ?> //当前评论的连接地址 | + | <?php $comments->threadedComments($options); ?> //嵌套评论所有内容 |
| - | <?php $comments->date(\'Y-m-d H:i\'); ?> //评论时间，可在括号里设置格式 | + | </div> |
| - | <?php $comments->reply(); ?> //回复按钮，可在括号里自定义评论按钮的文字 | + | <?php } ?> //是否嵌套评论判断结束</code> |
| - | <?php $comments->content(); ?> //评论内容</code> | + | |
| - | ===== 五、添加嵌套评论（子评论）的代码 ===== | + | ===== 五、相关变量及说明 ===== |
| - | <code html><div class=\"comment-children\"> | + | <code php><?php $comments->gravatar('40', ''); ?> //头像，有两个参数，大小、默认头像？ |
| - | <!-- 嵌套评论相关 --> | + | <?php $comments->author(); ?> //评论作者 |
| - | </div></code> | + | <?php $comments->permalink(); ?> //当前评论的连接地址 |
| + | <?php $comments->date('Y-m-d H:i'); ?>//评论时间，可在括号里设置格式 | ||
| + | <?php $comments->reply(); ?> //回复按钮，可在括号里自定义评论按钮的文字 | ||
| + | <?php $comments->content(); ?> //评论内容</code> | ||
| - | 更改后如下： | + | ===== 六、最终得到的代码 ===== |
| - | + | ||
| - | <code php><?php if ($comments->children) { ?> //是否嵌套评论判断开始 | + | |
| - | <div class=\"comment-children\"> | + | |
| - | <?php $comments->threadedComments($options); ?> //嵌套评论所有内容 | + | |
| - | </div> | + | |
| - | <?php } ?> //是否嵌套评论判断结束</code> | + | |
| - | 到这里整个自定义评论样式到这里就结束了，**最终得到**的便是以下代码 | + | 当我们把上面所有变量都替换完成之后，最终得到的代码如下： |
| <code php><?php function threadedComments($comments, $options) { | <code php><?php function threadedComments($comments, $options) { | ||
| - | $commentClass = \'\'; | + | $commentClass = ''; |
| if ($comments->authorId) { | if ($comments->authorId) { | ||
| if ($comments->authorId == $comments->ownerId) { | if ($comments->authorId == $comments->ownerId) { | ||
| - | $commentClass .= \' comment-by-author\'; | + | $commentClass .= ' comment-by-author'; |
| } else { | } else { | ||
| - | $commentClass .= \' comment-by-user\'; | + | $commentClass .= ' comment-by-user'; |
| } | } | ||
| } | } | ||
| | | ||
| - | $commentLevelClass = $comments->levels > 0 ? \' comment-child\' : \' comment-parent\'; | + | $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent'; |
| ?> | ?> | ||
| - | <li id=\"li-<?php $comments->theId(); ?>\" class=\"comment-body<?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'; |
| - | $comments->levelsAlt(\' comment-level-odd\', \' comment-level-even\'); | + | $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); |
| } else { | } else { | ||
| - | echo \' comment-parent\'; | + | echo ' comment-parent'; |
| } | } | ||
| - | $comments->alt(\' comment-odd\', \' comment-even\'); | + | $comments->alt(' comment-odd', ' comment-even'); |
| echo $commentClass; | echo $commentClass; | ||
| - | ?>\"> | + | ?>"> |
| - | <div id=\"<?php $comments->theId(); ?>\"> | + | <div id="<?php $comments->theId(); ?>"> |
| - | <div class=\"comment-author\"> | + | <div class="comment-author"> |
| - | <?php $comments->gravatar(\'40\', \'\'); ?> | + | <?php $comments->gravatar('40', ''); ?> |
| - | <cite class=\"fn\"><?php $comments->author(); ?></cite> | + | <cite class="fn"><?php $comments->author(); ?></cite> |
| </div> | </div> | ||
| - | <div class=\"comment-meta\"> | + | <div class="comment-meta"> |
| - | <a href=\"<?php $comments->permalink(); ?>\"><?php $comments->date(\'Y-m-d H:i\'); ?></a> | + | <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?></a> |
| - | <span class=\"comment-reply\"><?php $comments->reply(); ?></span> | + | <span class="comment-reply"><?php $comments->reply(); ?></span> |
| </div> | </div> | ||
| <?php $comments->content(); ?> | <?php $comments->content(); ?> | ||
| </div> | </div> | ||
| <?php if ($comments->children) { ?> | <?php if ($comments->children) { ?> | ||
| - | <div class=\"comment-children\"> | + | <div class="comment-children"> |
| <?php $comments->threadedComments($options); ?> | <?php $comments->threadedComments($options); ?> | ||
| </div> | </div> | ||
| 行 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> | ||
| - | |||
| - | 蚂蚱整理于 2012.03.16 | ||
| - | 如果系统加了反斜杠，请到下面看正确代码 | ||
| - | http://mazha.sinaapp.com/archives/16/ | ||
