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

差别

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

到此差别页面的链接

两侧同时换到之前的修订记录前一修订版
后一修订版		前一修订版
themes:custom-comments [2013/12/18 17:09] – ShingChithemes: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">+ 
 +<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>
打印/导出