標(biāo)簽?zāi)0寮皩n}模板的制作
時(shí)間:2022-07-24 03:30:02 | 來(lái)源:建站知識(shí)
時(shí)間:2022-07-24 03:30:02 來(lái)源:建站知識(shí)
菠蘿教你做模板之三-文章頻道的模板制作
上一節(jié)我們已經(jīng)講過(guò)了如何制作首頁(yè)模板,今天我們說(shuō)一下如何制作文章頻道的模板
請(qǐng)記住,所有phpcms的模板都是三部分 ,掌握了這個(gè)要點(diǎn),我們就可以做出很多個(gè)性化的模板,只要你想的到,將標(biāo)簽插入相應(yīng)的地方就行了!
打開article文件夾,我們會(huì)發(fā)現(xiàn)有這些模板,
圖片附件: 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='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
我們會(huì)在后臺(tái)看到這些模板的用途
圖片附件: 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='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
當(dāng)我們自己定義了模板之后,可以在后臺(tái)更新這些模板的說(shuō)明,所有的說(shuō)明文件,被記錄在templatenames.php這個(gè)文件中
1.頻道首頁(yè)的制作
我們用DW打開index.html文件
會(huì)發(fā)現(xiàn)這樣的代碼
圖片附件: 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='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
所有黑色的部分就是標(biāo)簽,綠色的是html代碼,藍(lán)色的是超級(jí)鏈接以及樣式表的屬性。
當(dāng)我們制作好html模板后,就可以在相應(yīng)的地方插入標(biāo)簽了
涉及到的標(biāo)簽有
{template 'phpcms','header'}公用頭部模板
{template 'phpcms','footer'}公用底部模板
<!--幻燈片標(biāo)簽-->
{$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)}
<!--投票調(diào)查-->
{$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>
<!--自定義欄目結(jié)束-->
這一塊是調(diào)用當(dāng)前頻道以及子欄目的循環(huán)
注意
這一塊{if $i%2==0}<tr>{/if}
{if $i%2==1}</tr>{/if}
表示的是分成兩列
如果我們要分成三列,這個(gè)地方應(yīng)該改成
{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.一級(jí)欄目category.html的制作
涉及到的js代碼
<!--推薦文章js調(diào)用-->
<script type="text/javascript" src="{$channelurl}list_js.php?catid={$catid}&iselite=1&articlenum=10&titlelen=28&ordertype=1"></script>
<!--熱點(diǎn)文章js調(diào)用-->
<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>
涉及到的標(biāo)簽
當(dāng)前位置:<a href="{$channelurl}">{$channelname}首頁(yè)</a> >> {$position}
這個(gè){$position}是一個(gè)函數(shù),負(fù)責(zé)取當(dāng)前的路徑,我們可以靈活調(diào)用它,不幸的是,中間的風(fēng)格符是">>"被固定好的,限制了我們的發(fā)揮
{loop get_childcat($channelid,$catid) $cat}
·<a href="{$cat[caturl]}" target="{$cat[target]}">{$cat[catname]}</a>
{/loop}
正好也是一個(gè)循環(huán),負(fù)責(zé)取當(dāng)前目錄下面的子欄目
{if $enableadd}
{$picarticle(0,$channelid,$catid,1,0,0,5,10,0,0,0,1,1,1,128,96,5)}
{/if}
這個(gè)判斷語(yǔ)句的意思是
如果該欄目允許添加文章,那么顯示該欄目下最新的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}
這一串也是用來(lái)取當(dāng)前目錄下面子目錄名稱及列表的
我們?cè)谇懊鎖ndex的制作中,已經(jīng)講過(guò)了如何將這個(gè)變成3列
3.終極欄目category_list.html的制作
這個(gè)頁(yè)面里面沒什么重要的,和上面的差不多
<!--最新圖片文章-->{$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.文章頁(yè)content.html的制作
文章頁(yè)屬于比較重要的頁(yè)面,因?yàn)槔锩嬲{(diào)用到的東西太多了
同時(shí)也是最容易出錯(cuò)的頁(yè)面
<script type=text/javascript>
function fontZoom(size)
{
document.getElementById('{$addtime}l').style.fontSize=size+'px';
}
</script>
字體縮放函數(shù)
<!--相關(guān)評(píng)論js調(diào)用-->
<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調(diào)用--><script type="text/javascript" src="{$channelurl}list_js.php?catid={$catid}&iselite=1&articlenum=10&titlelen=30&ordertype=1"></script>
<!--熱點(diǎn)文章js調(diào)用--><script type="text/javascript" src="{$channelurl}list_js.php?catid={$catid}&articlenum=10&titlelen=30&ordertype=5"></script>
其中的articlenum=10 表示調(diào)用10條
titlelen=30表示標(biāo)題長(zhǎng)度為30,也就是15個(gè)漢字
<script type=text/javascript>
document.getElementById('{$addtime}1').style.display="none";
document.getElementById('{$addtime}2').style.display="none";
評(píng)論函數(shù)
function docheck()
{
myform.itemurl.value = window.location;
if(myform.content.value=="") {
alert("請(qǐng)輸入評(píng)論內(nèi)容!");
myform.content.focus();
return false;
}
return true;
}
</script>
調(diào)用評(píng)論次數(shù),瀏覽次數(shù)的js代碼
<script type="text/javascript" src="{$channelurl}show_js.php?articleid={$articleid}"></script>
使用到的標(biāo)簽代碼
當(dāng)前位置:<a href="{$channelurl}">{$channelname}首頁(yè)</a> >> {$position} {$title}
注意{$position}是不能取到文章標(biāo)題的,所以,需要后面加上{$title}
<!--主標(biāo)題--><div id="title">{$title} {if $pagenumber>1}({$page}){/if}</div>
<!--副標(biāo)題-->{if $subheading}<div class="subtitle" align="right">——{$subheading}</div>{/if}
{$adddate} 文章添加時(shí)間
{$author} 作者
{$copyfromname} 來(lái)源
<span id="hits">0</span>瀏覽次數(shù)
<span id="commentnumber1">0</span>網(wǎng)友評(píng)論
【<a href="javascript :fontZoom(16)">大</a>】【<a href="javascript :fontZoom(14)">中</a>】【<a href="javascript :fontZoom(12)">小</a>】文字大小
{$stars} 評(píng)分等級(jí)
{if $description}<div class="description"><strong>簡(jiǎn)介:</strong>{$description}</div>{/if} 判斷是否有評(píng)論
{$_PHPCMS['sitename']}({$PHP_SITEURL}) 來(lái)源
{$username} 作者
{$title}({$itemurl}) 原文
{$content} 文章具體內(nèi)容
$pages} 分頁(yè)函數(shù)
{$checker} 責(zé)任編輯
<div class="gray" id="pre_and_next"></div> 分頁(yè)函數(shù)
所有的這些都是可以在后臺(tái)添加文章的時(shí)候看到的。
5.文章頻道會(huì)員管理文章模板member.html的制作
{$username} 用戶名
[{$cha['channelname']} 頻道名稱
{$cha['itemnumber']} 文章總數(shù)
{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']} 點(diǎn)擊次數(shù)
{$item['adddate']} 添加時(shí)間
{/loop}
{$pages} 分頁(yè)函數(shù)
6.文章頻道會(huì)員發(fā)布文章myitem.html的制作
這個(gè)里面沒什么將的
所有的函數(shù)都是有相應(yīng)的中文說(shuō)明的