标签模板及专题模板的制作
点击次数：31 次 发布日期：2008-11-16 10:36:43 作者：源代码网
|
菠萝教你做模板之三－文章频道的模板制作 上一节我们已经讲过了如何制作首页模板，今天我们说一下如何制作文章频道的模板 请记住，所有phpcms的模板都是三部分 ，掌握了这个要点，我们就可以做出很多个性化的模板，只要你想的到，将标签插入相应的地方就行了！ 打开article文件夹，我们会发现有这些模板，  图片附件: Snap1.jpg (2006-7-15 10:07 AM, 103.79 K) 我们会在后台看到这些模板的用途 图片附件: Snap3.jpg (2006-7-15 10:07 AM, 357.5 K) 当我们自己定义了模板之后，可以在后台更新这些模板的说明，所有的说明文件，被记录在templatenames.php这个文件中 1.频道首页的制作 我们用DW打开index.html文件 会发现这样的代码 图片附件: Snap1.jpg (2006-7-15 11:22 AM, 383.58 K) 所有黑色的部分就是标签，绿色的是html代码，蓝色的是超级链接以及样式表的属性。 当我们制作好html模板后，就可以在相应的地方插入标签了 涉及到的标签有 {template "phpcms","header"}公用头部模板 {template "phpcms","footer"}公用底部模板 <!--幻灯片标签--> {$slidepicarticle(0,$channelid,0,1,0,5,30,0,0,5,250,180,5000,-1)} <!--推荐文章列表--> {$articlelist(0,$channelid,0,1,0,0,10,50,0,1,0,1,2,1,0,0,1,1)} <!--最新公告列表--> {$announcelist(0,$channelid,0,5,30,0,0,1,200,100)} <!--图片文章--> {$picarticle(0,$channelid,0,0,0,0,5,22,0,0,0,1,1,1,134,96,5)} <!--搜索框--> <script language="Javascript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}data/js/search.js"></script> <!--最新专题列表--> {$speciallist(0,$channelid,0,0,1,28,50,0,0,4,100,100,1)} <!--投票调查--> {$voteshow(0,0,$channelid)} <!--友情链接--> {$linklist(0,$channelid,1,0,10,2)} 文字链接 {$linklist(0,$channelid,0,0,10,2)} logo链接 <!--自定义栏目开始--> <table width="100%" cellspacing="0" cellpadding="0"> {loop $childcats $i $cat} {if $i%2==0}<tr>{/if} <td valign="top" style="padding:0 5px;"> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td class="titlebar" width="100">{$cat[catname]}</td> <td width="10" height="25"><img src="http://www.admin5.com/article/20070410/{$skindir}/images/tit3_r.jpg"></td> <td width="225" align="right" class="bg_titlebar"><a href="{$cat[caturl]}" class="more">更多</a> </td> <td width="36"><img src="http://www.admin5.com/article/20070410/{$skindir}/images/tit2_r.jpg"></td> </tr> </table> {$articlelist(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,$cat[ordertype],2,1,0,0,$cat[target],1)} </td> {if $i%2==1}</tr>{/if} {/loop} </table> <!--自定义栏目结束--> 这一块是调用当前频道以及子栏目的循环 注意 这一块{if $i%2==0}<tr>{/if} {if $i%2==1}</tr>{/if} 表示的是分成两列 如果我们要分成三列，这个地方应该改成 {if $i%3==0}<tr>{/if} {if $i%3==2}</tr>{/if} {$cat[catname]} 栏目名称 {$articlelist(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,$cat[ordertype],2,1,0,0,$cat[target],1)} 这一行是该栏目下的文章列表 2.一级栏目category.html的制作 涉及到的js代码 <!--推荐文章js调用--> <script type="text/javascript" src="http://www.admin5.com/article/20070410/{$channelurl}list_js.php?catid={$catid}&iselite=1&articlenum=10&titlelen=28&ordertype=1"></script> <!--热点文章js调用--> <script type="text/javascript" src="http://www.admin5.com/article/20070410/{$channelurl}list_js.php?catid={$catid}&articlenum=10&titlelen=28&ordertype=5"></script> <!--搜索框--> <script language="Javascript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}data/js/search.js"></script> 涉及到的标签 当前位置：<a href="{$channelurl}">{$channelname}首页</a> >> {$position} 这个{$position}是一个函数，负责取当前的路径，我们可以灵活调用它，不幸的是，中间的风格符是">>"被固定好的，限制了我们的发挥 {loop get_childcat($channelid,$catid) $cat} ·<a href="{$cat[caturl]}" target="{$cat[target]}">{$cat[catname]}</a> {/loop} 正好也是一个循环，负责取当前目录下面的子栏目 {if $enableadd} {$picarticle(0,$channelid,$catid,1,0,0,5,10,0,0,0,1,1,1,128,96,5)} {/if} 这个判断语句的意思是 如果该栏目允许添加文章，那么显示该栏目下最新的5篇图片文章 {loop $arrchildid $i $childcat} {if $i%2==0}<tr>{/if} <td width="50%" valign="top" style="padding:0px 5px;"> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td class="titlebar" width="100">{$childcat[catname]}</td> <td width="10" height="25"><img src="http://www.admin5.com/article/20070410/{$skindir}/images/tit3_r.jpg"></td> <td align="right" class="bg_titlebar"><a href="{$childcat[caturl]}" target="{$childcat[target]}" class="more">更多</a> </td> <td width="36"><img src="http://www.admin5.com/article/20070410/{$skindir}/images/tit2_r.jpg"></td> </tr> </table> <!--自定义栏目文章列表--> {$articlelist(0,$channelid,$childcat[catid],1,0,0,$showchilditems,36,0,0,0,$childcat[itemordertype],2,0,0,0,1,1)} </td> {if $i%2==1}</tr>{/if} {/loop} 这一串也是用来取当前目录下面子目录名称及列表的 我们在前面index的制作中，已经讲过了如何将这个变成3列 3.终极栏目category_list.html的制作 这个页面里面没什么重要的，和上面的差不多 <!--最新图片文章-->{$picarticle(0,$channelid,$catid,1,0,0,5,16,0,0,0,1,1,1,120,90,5)} <!--栏目文章列表--> {$articlelist(0,$channelid,$catid,0,0,$page,$maxperpage,60,0,0,0,$itemordertype,1,0,0,0,0,1)} 4.文章页content.html的制作 文章页属于比较重要的页面，因为里面调用到的东西太多了 同时也是最容易出错的页面 <script type=text/javascript> function fontZoom(size) { document.getElementById("{$addtime}l").style.fontSize=size+"px"; } </script> 字体缩放函数 <!--相关评论js调用--> <script type="text/javascript" src="http://www.admin5.com/article/20070410/{PHPCMS_PATH}comment/list_js.php?item=articleid&itemid={$articleid}&commentnum=10&ordertype=1"></script> <!--最新文章--> <script type="text/javascript" src="http://www.admin5.com/article/20070410/{$channelurl}list_js.php?catid={$catid}&articlenum=10&titlelen=30&ordertype=1"></script> <!--推荐文章js调用--><script type="text/javascript" src="http://www.admin5.com/article/20070410/{$channelurl}list_js.php?catid={$catid}&iselite=1&articlenum=10&titlelen=30&ordertype=1"></script> <!--热点文章js调用--><script type="text/javascript" src="http://www.admin5.com/article/20070410/{$channelurl}list_js.php?catid={$catid}&articlenum=10&titlelen=30&ordertype=5"></script> 其中的articlenum=10 表示调用10条 titlelen=30表示标题长度为30，也就是15个汉字 <script type=text/javascript> document.getElementById("{$addtime}1").style.display="none"; document.getElementById("{$addtime}2").style.display="none"; 评论函数 function docheck() { myform.itemurl.value = window.location; if(myform.content.value=="") { alert("请输入评论内容!"); myform.content.focus(); return false; } return true; } </script> 调用评论次数，浏览次数的js代码 <script type="text/javascript" src="http://www.admin5.com/article/20070410/{$channelurl}show_js.php?articleid={$articleid}"></script> 使用到的标签代码 当前位置：<a href="{$channelurl}">{$channelname}首页</a> >> {$position} {$title} 注意｛$position｝是不能取到文章标题的，所以，需要后面加上{$title} <!--主标题--><div id="title">{$title} {if $pagenumber>1}({$page}){/if}</div> <!--副标题-->{if $subheading}<div class="subtitle" align="right">——{$subheading}</div>{/if} {$adddate} 文章添加时间 {$author} 作者 {$copyfromname} 来源 <span id="hits">0</span>浏览次数 <span id="commentnumber1">0</span>网友评论 【<a href="javascript :fontZoom(16)">大</a>】【<a href="javascript :fontZoom(14)">中</a>】【<a href="javascript :fontZoom(12)">小</a>】文字大小 {$stars} 评分等级 {if $description}<div class="description"><strong>简介：</strong>{$description}</div>{/if} 判断是否有评论 {$_PHPCMS["sitename"]}({$PHP_SITEURL}) 来源 {$username} 作者 {$title}({$itemurl}) 原文 {$content} 文章具体内容 $pages} 分页函数 {$checker} 责任编辑 <div class="gray" id="pre_and_next"></div> 分页函数 所有的这些都是可以在后台添加文章的时候看到的。 5.文章频道会员管理文章模板member.html的制作 {$username} 用户名 [{$cha["channelname"]} 频道名称 {$cha["itemnumber"]} 文章总数 {loop $items $item} <a href="{$item["itemurl"]}" target="_blank">{$item["title"]}</a> {if $item[ontop]}<font color="red">顶</font>{/if} {if $item[elite]}<font color="blue">荐</font>{/if} {$item["hits"]} 点击次数 {$item["adddate"]} 添加时间 {/loop} {$pages} 分页函数 6.文章频道会员发布文章myitem.html的制作 这个里面没什么将的 所有的函数都是有相应的中文说明的 源代码网供稿. |
