您在这里: Typecho文档站点 » 主题开发 » 自定义评论列表区域

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

后一修订版		前一修订版
themes:custom-comments [2013/10/21 06:55] – 外部编辑 127.0.0.1themes:custom-comments [2024/06/12 10:10] (当前版本) – 外部编辑 127.0.0.1
行 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/ 
打印/导出