欢迎来到我的网上家园,谢谢关心和支持!

帝国模板制作笔记(仿phpabc.cn)[!--temp.header--](一)

2019-03-08 14:33:39 帝国CMS
 <body class="homepage">之后,就是[!--temp.header--]标签。
以temp开头的标签是模板变量,在后台模板》公共模板变量》管理模板变量中可以看到,这个是页面头部模板,对面网页的logo和导航条。
以下是原模板内容:
<!-- 页头 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="63%">

<!-- 登录 -->
<script>
document.write('<script src="[!--news.url--]e/member/login/loginjs.php?t='+Math.random()+'"><'+'/script>');
</script>

这部分不多说,js调用的登录框,它的样式可以在模板中修改,但我并不需要它,所以把它删除了。
</td>

<td align="right">
<a onclick="window.external.addFavorite(location.href,document.title)" href="#ecms">加入收藏</a> | <a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('[!--news.url--]')" href="#ecms">设为首页</a> | <a href="[!--news.url--]e/member/cp/">会员中心</a> | <a href="[!--news.url--]e/DoInfo/">我要投稿</a> | <a href="[!--news.url--]e/web/?type=rss2&classid=[!--self.classid--]" target="_blank">RSS<img src="[!--news.url--]skin/default/images/rss.gif" border="0" hspace="2" /></a>

这部分是登录框右边的链接文字,也不需要。
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="10">
<tr valign="middle">

<td width="240" align="center"><a href="[!--news.url--]"><img src="[!--news.url--]skin/default/images/logo.gif" width="200" height="65" border="0" /></a></td>

这是logo图片框

<td align="center"><a href="http://www.phome.net/OpenSource/" target="_blank"><img src="[!--news.url--]skin/default/images/opensource.gif" width="100%" height="70" border="0" /></a></td>

这是logo右边的帝国广告
</tr>
</table>
<!-- 导航tab选项卡 -->
<table width="920" border="0" align="center" cellpadding="0" cellspacing="0" class="nav">
  <tr>
下面是导航条:
    <td class="nav_global"><ul>

        <li class="curr" id="tabnav_btn_0" onmouseover="tabit(this)"><a href="[!--news.url--]">首页</a></li>

       首页链接,帝国的栏目导航标签不解析首页,所以要手动添加

[showclasstemp]'0',12,0,0[/showclasstemp]

这个标签是重点要解析的,非常重要,本文的主要内容就是它了。
</ul></td>
  </tr>
</table>

帝国自带的模板是table格式的,我们要全部换成div的,并且自适应各种设备。我当初选择仿phpabc也就是因为它是自适应的,当然,还需要时行一点点改造。

在<body class="home blog">的下面的代码是:
<header id="header">这是网页头部块的开始(在第55行),我们再往下面找,在第100行会找到</header>,这是关闭了头部块。还是要强调,必须有开始有关闭,养成良好的写代码习惯,我们在写下开始,就要在它后面把关闭代码写下来,然后再在中间加其他代码。
在它的下面是:
<div class="navtop">
 <div class="logo"><a href="http://www.phpabc.cn">PHPABC.CN</a><p>专注PHP建站 | 这里长一点会比较好看  (─.─|||</p></div>
 <div class="search">
     <form id="searchform" method="get" action="http://www.phpabc.cn">
      <input type="text" value="" name="s" id="s" size="30" x-webkit-speech />
   <button type="submit" id="searchsubmit"><i class="iconfont">&#xe610;</i></button>
  </form>
 </div
 </div>
我把匹配的html标签用不同的颜色标了出来,可以清楚地看出它的结构,红色的是外框,里面有两个并列的块,绿色的是网站logo部分,我们可以放lgog图片,也可以用文字,因为原网站用的是文字,我为了省事,就跟原网站一样了,把它改成:<div class="logo"><a href="http://frjy.cn"><?=$public_r[sitename]?></a><p> [!--temp.miaoshu--] </p></div>
在这里有一个用蓝色表示的模板变量[!--temp.miaoshu--],这个变量不是系统自带的,可以在后台》模板》公共模板变量》点击:管理模板变量,然后在右边的对话框里添加这个变量,
变量名(*) [!--temp. miaoshu --] (如:ecms,变量就是[!--temp.ecms--]) <?=$public_r[sitename]?>这个读取的是网站名称,在后台系统》系统设置》系统参数设置中修改。
变量标识(*) lgog网站描述 (如:帝国CMS)
变量值(*)
免费的教育教学资源网站

蓝色部分是我自己添加的,你可以根据自己的情况添加,以后想要改动,只要修改这个变量即可。当然也可以不必这么麻烦,直接写在模板中也行。

下面是搜索表单:

 <form id="searchform" method="get" action="http://www.phpabc.cn">

这里的form是搜索表单的开始,也就是搜索的最外框,id后面是样式,method是提交搜索条件数据的方式,有两种get和post,帝国首页用的是post,所以我也把它我改成了post。action后的是把搜索条件数提交给谁进行处理,帝国提交给了e/search/index.php,所以这个也要改过来。另外帝国还有一个name="schform" 参数,我们也要加上去。这样这句就变成了<form action="[!--news.url--]e/search/index.php" method="post" name="searchform" id="searchform">

      <input type="text" value="" name="s" id="s" size="30" x-webkit-speech />

 这句是用来输入搜索条件数据的,input表示输入,type是输入数据的种类样式,text日指文本数据样式,只能输入文本。value是值,这个让用户输入,所以为空。name这个属性很重要,这个决定传给e/search/index.php的数据被当作那个变量进行查询处理,帝国里将它设为keyboard是作为关键字提交给程序处理。id是样式,是外观,这个在css里设置。size是大小,后台的30是长度,来控制搜索框的长短。修改后的代码是这样的: <input type="text" value="" name="keyboard" id="s" size="30" x-webkit-speech />
另外,帝国还要传递两个数据,<input type="hidden" name="show" value="title" />(这个是搜索哪个字段,这里value的值是title说明搜索的是标题字段,如果你要搜索别的字段,可以在这里写多个值,之间用英语,隔开,比如还搜内容字段,就写成 value="title,newstext")
<input type="hidden" name="tempid" value="1" />(这个是模板id)
  还要指定搜索范围,一般是新闻数据表,于是我又在下面加了一句 <input type="hidden" name="tbname" value="news" />这句话也是经过修改的,其中type 的属性hidden是隐藏的意思,这些输入数据内容用户是看不到的,也不用他们输入,value已经设置好了。这一句中是搜索news表。

 <button type="submit" id="searchsubmit"><i class="iconfont">&#xe610;</i></button>

这是提交按钮及其样式,不需要改动。

  </form>

关闭form。
经过改造后,完整的代码是这样的:

<form action="[!--news.url--]e/search/index.php" method="post" name="searchform" id="searchform">
      <input type="text" value="" name="keyboard" id="s" size="30" x-webkit-speech />
       <input type="hidden" name="show" value="title" />
      <input type="hidden" name="tempid" value="1" />
      <input type="hidden" name="tbname" value="news" />
   <button type="submit" id="searchsubmit"><i class="iconfont">&#xe610;</i></button>
  </form>

猜你喜欢

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表