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

2017年08月15日丨呆呆岛丨分类: 教程丨标签: Z-BlogPHPZ-BlogPHP主题制作

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

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

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

Markup
<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

Markup
{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判断:“当你是网站的用户时,则不需要输入了,直接评论即可。”

Markup
{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评论框的模版。

Markup
<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>



上一篇:
下一篇:



已有 1 条评论  


  1. 手机模板怎么修改导航? 我想修改一下手机模板

添加新评论