Z-BlogPHP主题制作教程#15:评论框commentpost.php

 2016-03-16 08:51

评论框(commentpost.php)是浏览者发表评论的地方,他主要由多个输入框和“提交”按钮组成。Z-BlogPHP标准的输入框由评论者名称、邮箱地址、网址、评论正文和验证码(可开启/关闭)组成。

 Z-BlogPHP主题制作教程评论框

按照这样的图片,我们先把看到形状做成html:

<div>
    <form id="frmSumbit" target="_self" method="post" action="{$article.CommentPostUrl}" >
    <input type="hidden" name="inpId" id="inpId" value="{$article.ID}" />
    <input type="hidden" name="inpRevID" id="inpRevID" value="0" />
    <!-- 上两行为Z-BlogPHP必须 -->

    <p><label for="inpName">评论者(*)</label>
    <input type="text" name="inpName" id="inpName" value="{$user.Name}" /></p>
    <p><label for="inpEmail">E-mail(*)</label>
    <input type="text" name="inpEmail" id="inpEmail" value="{$user.Email}" /></p>
    <p><label for="inpHomePage">博客地址</label>
    <input type="text" name="inpHomePage" id="inpHomePage" value="{$user.HomePage}" /></p>

    <p><label for="txaArticle">文章评论(*)</label>
    <textarea name="txaArticle" id="txaArticle"></textarea></p>
    <p>
        <input name="sumbit" type="submit" value="发表评论" onclick="return VerifyMessage()" />
    </p>
    
    </form>
</div>

这是最基础的代码,大家可以自行在各项里面增加class元素。最上面的两个<input>为Z-BlogPHP主题评论框必须,依次就是图上所示的结构。之前我们说了,有一个验证码我们没有体现出来,为了完善,我们可以在适当的地方加入这个模块。又因为它的可选择性的,所以我们给它一个if

{if $option['ZC_COMMENT_VERIFY_ENABLE']}
    <p>
    <label for="inpVerify">验证码(*)</label>
    <input type="text" name="inpVerify" id="inpVerify" class="text" value="" />
    <img style="width:{$option['ZC_VERIFYCODE_WIDTH']}px;height:{$option['ZC_VERIFYCODE_HEIGHT']}px;cursor:pointer;" src="{$article.ValidCodeUrl}" alt="" title="" onclick="javascript:this.src='{$article.ValidCodeUrl}&amp;tm='+Math.random();"/>
    </p>
{/if}

有时候,了方便登录者评论,避免那些重复的输入,我们可以增加一个if判断:“当你是网站的用户时,则不需要输入了,直接评论即可。”

{if $user.ID>0}
    <input type="hidden" name="inpName" id="inpName" value="{$user.Name}" />
    <input type="hidden" name="inpEmail" id="inpEmail" value="{$user.Email}" />
    <input type="hidden" name="inpHomePage" id="inpHomePage" value="{$user.HomePage}" />
{else}
    ……
{/if}

看明白了上面的三段代码,我们就可以开始糅合了。将这三段通过简单的逻辑拼合起来,再加上点修饰,就完成了最终的Z-BlogPHP评论框的模版。

<div>
    <form id="frmSumbit" target="_self" method="post" action="{$article.CommentPostUrl}" >
    <input type="hidden" name="inpId" id="inpId" value="{$article.ID}" />
    <input type="hidden" name="inpRevID" id="inpRevID" value="0" />
    <!-- 上两行为Z-BlogPHP必须 -->
{if $user.ID>0}
    <input type="hidden" name="inpName" id="inpName" value="{$user.Name}" />
    <input type="hidden" name="inpEmail" id="inpEmail" value="{$user.Email}" />
    <input type="hidden" name="inpHomePage" id="inpHomePage" value="{$user.HomePage}" />
{else}
    <p><label for="inpName">评论者(*)</label>
    <input type="text" name="inpName" id="inpName" value="{$user.Name}" /></p>
    <p><label for="inpEmail">E-mail(*)</label>
    <input type="text" name="inpEmail" id="inpEmail" value="{$user.Email}" /></p>
    <p><label for="inpHomePage">博客地址</label>
    <input type="text" name="inpHomePage" id="inpHomePage" value="{$user.HomePage}" /></p>

    <p><label for="txaArticle">文章评论(*)</label>
    <textarea name="txaArticle" id="txaArticle"></textarea></p>

{if $option['ZC_COMMENT_VERIFY_ENABLE']}
    <p>
    <label for="inpVerify">验证码(*)</label>
    <input type="text" name="inpVerify" id="inpVerify" class="text" value="" />
    <img style="width:{$option['ZC_VERIFYCODE_WIDTH']}px;height:{$option['ZC_VERIFYCODE_HEIGHT']}px;cursor:pointer;" src="{$article.ValidCodeUrl}" alt="" title="" onclick="javascript:this.src='{$article.ValidCodeUrl}&amp;tm='+Math.random();"/>
    </p>
{/if}

{/if}
    <p>
        <input name="sumbit" type="submit" value="发表评论" onclick="return VerifyMessage()" />
    </p>
    
    </form>
</div>


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:总结
作者头像

作者:紫铜炉

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

 发表评论: