Z-BlogPHP主题制作教程#16:评论输出comment.php

 2016-03-16 09:56

Z-BlogPHP主题模板的评论输出(comment.php)主要在“评论者的回复”上有点绕头,其他的还是比较简单的。我们先做一个简单的评论输出。

<ul id="cmt{$comment.ID}">
    <li>
    <img src="{$comment.Author.Avatar}"/>
    <span class="commentname"><a href="{$comment.Author.HomePage}" rel="nofollow" target="_blank">{$comment.Author.StaticName}</a></span>
    <br/>
    <small>发布于{$comment.Time()}</small>
    </li>
    <li>{$comment.Content}</li>
</ul>

这里我们直接用 <ul> 做的外框。其中的 #cmt{$comment.ID} 是为了我们做锚文本和回复用的。

输出实现的内容如下。这代码展示了评论者的头像、评论者名称,评论时间和评论内容。其中,评论者名称上做了一个外链接,所以我们加了 rel和target 两个属性。

Z-BlogPHP主题制作教程评论输出

这里的“回复该评论”我们要实现一个功能:当评论者点击回复上一评论时,自动在这条评论的下面一行加上一条评论。并且,实现一定的缩进。

20160316101848.jpg

其实,我们熟悉 <ul> 架构的人应该明白,这就是采用的是 <ul> 里面套 <ul> 的形式。那么我们也就可以采用comment.php模版里面套comment.php的方法来实现这一功能。考虑到可能会出现多条评论,所以我们再加上一个 foreach 命令,整理下代码就变成:

<ul id="cmt{$comment.ID}">
    <li>
    <img src="{$comment.Author.Avatar}"/>
    <span class="commentname"><a href="{$comment.Author.HomePage}" rel="nofollow" target="_blank">{$comment.Author.StaticName}</a></span>
    <br/>
    <small>
        发布于{$comment.Time()} 
        <span>
            <a href="#comment" onclick="RevertComment('{$comment.ID}')">回复该评论</a>
        </span>
    </small>
    </li>
    <li>{$comment.Content}
        {foreach $comment.Comments as $comment}<!-- 嵌套模版 -->
        {template:comment}
        {/foreach}
    </li>
</ul>


Z-BlogPHP主题制作教程:

  1. Z-BlogPHP主题制作教程#1:了解Z-BlogPHP主题
  2. Z-BlogPHP主题制作教程#2:制作静态网站页面
  3. Z-BlogPHP主题制作教程#3:快速制作一个主题
  4. Z-BlogPHP主题制作教程#4:了解template文件夹
  5. Z-BlogPHP主题制作教程#5:模板基本语言
  6. Z-BlogPHP主题制作教程#6:index.php模版
  7. Z-BlogPHP主题制作教程#7:header.php模版
  8. Z-BlogPHP主题制作教程#8:footer.php模版
  9. Z-BlogPHP主题制作教程#9:post-multi和post-istop
  10. Z-BlogPHP主题制作教程#10:分页的pagebar.php
  11. Z-BlogPHP主题制作教程#11:sidebar.php和module.php
  12. Z-BlogPHP主题制作教程#12:内容模版single.php
  13. Z-BlogPHP主题制作教程#13:post-single和post-page
  14. Z-BlogPHP主题制作教程#14:评论外框comments.php
  15. Z-BlogPHP主题制作教程#15:评论框commentpost.php
  16. Z-BlogPHP主题制作教程#16:评论输出comment.php
  17. Z-BlogPHP主题制作教程#17:总结
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: