差别

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

到此差别页面的链接

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>​
打印/导出