菠萝教你做模板之三-文章频道的模板制作
上一节我们已经讲过了如何制作首页模板,今天我们说一下如何制作文章频道的模板
请记住,所有phpcms的模板都是三部分 ,掌握了这个要点,我们就可以做出很多个性化的模板,只要你想的到,将标签插入相应的地方就行了!
打开article文件夹,我们会发现有这些模板,
图片附件: Snap1.jpg (2006-7-15 10:07 AM, 103.79 K)screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"我们会在后台看到这些模板的用途
图片附件: Snap3.jpg (2006-7-15 10:07 AM, 357.5 K)screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"当我们自己定义了模板之后,可以在后台更新这些模板的说明,所有的说明文件,被记录在templatenames.php这个文件中
1.频道首页的制作
我们用DW打开index.html文件
会发现这样的代码
图片附件: Snap1.jpg (2006-7-15 11:22 AM, 383.58 K)screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}" mousewheel="return imgzoom(this);"所有黑色的部分就是标签,绿色的是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="{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="{$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="{$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="{$channelurl}list_js.php?catid={$catid}&iselite=1&articlenum=10&titlelen=28&ordertype=1"></script>
<!--热点文章js调用-->
<script type="text/javascript" src="{$channelurl}list_js.php?catid={$catid}&articlenum=10&titlelen=28&ordertype=5"></script>
<!--搜索框-->
<script language="Javascript" src="{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="{$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="{$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="{PHPCMS_PATH}comment/list_js.php?item=articleid&itemid={$articleid}&commentnum=10&ordertype=1"></script>
<!--最新文章-->
<script type="text/javascript" src="{$channelurl}list_js.php?catid={$catid}&articlenum=10&titlelen=30&ordertype=1"></script>
<!--推荐文章js调用--><script type="text/javascript" src="{$channelurl}list_js.php?catid={$catid}&iselite=1&articlenum=10&titlelen=30&ordertype=1"></script>
<!--热点文章js调用--><script type="text/javascript" src="{$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="{$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的制作
这个里面没什么将的
所有的函数都是有相应的中文说明的