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

评论框（commentpost.php）是浏览者发表评论的地方，他主要由多个输入框和“提交”按钮组成。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>