菠蘿教你做模板之五-圖片頻道的模板制作_PHPCms教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
菠蘿教你做模板之五-圖片頻道的模板制作
前面我們已經(jīng)講過了文章、下載頻道的模板制作,今天講完圖片頻道之后,剩下的就是專題的制作,雖然每個(gè)頻道都有專題,但是制作方法都是一樣的,我們講集中講解。好,閑話不說,開始講課。
打開picture/index.html文件,我們就會(huì)發(fā)現(xiàn)都是我們前面講過很熟悉的標(biāo)簽,圖片頻道與別的頻道最大的不同,就是在顯示的時(shí)候默認(rèn)顯示的都是縮略圖,也就是我們看到的這一串標(biāo)簽
{$picpicture(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,3,1,0,130,100,5)}
因此我們主要來講這個(gè)標(biāo)簽的制作,別的頂級(jí)欄目。終極欄目的制作和文章頻道都是相同的
在picture文件夾下面以tag開頭的文件有4個(gè)
tag_picpicture.html 圖片縮略圖調(diào)用標(biāo)簽
tag_picturelist.html 圖片標(biāo)題列表調(diào)用標(biāo)簽
tag_slidepicpicture.html 圖片幻燈片調(diào)用標(biāo)簽
tag_slidepicpicture-js.html 圖片js效果標(biāo)簽?zāi)0?br />
打開tag_picpicture.html,我們會(huì)看到
{loop $pictures $i $picture}
$i是用來判定幾列的
利用這個(gè)i來和系統(tǒng)設(shè)置的$cols 做比較
利用他們的余數(shù)來判定是否分行
<img src='{$picture[thumb]}' alt='{$picture[alt]}' width='{$imgwidth}' height='{$imgheight}'> 這里面就是你在發(fā)布圖片時(shí)候選的 縮略圖的大小
<a href='{$picture[url]}' target='_blank' title='{$picture[alt]}'[/color]>{$picture[title]}</a>
這幾個(gè)分別是圖片的地址 圖片的提示 圖片的標(biāo)題
{if $descriptionlen}
<tr>
<td>{$picture[content]} <a href='{$picture[url]}' target='_blank'>具體>></a></td>
</tr>
{/if}
這一句是,假如答應(yīng)顯示說明,則顯示具體的說明信息
在tag_picturelist.html中,顯示的東西則比縮略圖模板要多
{$picture[img]} 標(biāo)題圖片
{$picture[catname]} 所屬欄目
<a href="{$picture[url]}" title="{$picture[alt]}" target="{$picture[target]}" class="tag_title_link{$picture[fonttype]}">{$picture[title]}</a> 圖片標(biāo)題及路徑
{if $showhits}({$picture[hits]}){/if} 假如答應(yīng)顯示點(diǎn)擊數(shù),則顯示點(diǎn)擊數(shù)
{if $showauthor}[作者:{$picture[author]}]{/if} 顯示作者
{if $datetype}[<span class="tag_date">{$picture[adddate]}</span>]{/if} 顯示添加時(shí)間
{if $descriptionlen}{$picture[content]}{/if} 顯示說明
圖片內(nèi)容頁content.html的制作
打開這個(gè)網(wǎng)頁
<script language=javascript type=text/javascript>
function fontZoom(size)
{
document.getElementById('{$addtime}l').style.fontSize=size 'px'
}
var pictureurl=new Array();
var picturename=new Array();
{loop $pictureurls $id $pic}
pictureurl[{$id}] = "{$pic[url]}";
前面我們已經(jīng)講過了文章、下載頻道的模板制作,今天講完圖片頻道之后,剩下的就是專題的制作,雖然每個(gè)頻道都有專題,但是制作方法都是一樣的,我們講集中講解。好,閑話不說,開始講課。
打開picture/index.html文件,我們就會(huì)發(fā)現(xiàn)都是我們前面講過很熟悉的標(biāo)簽,圖片頻道與別的頻道最大的不同,就是在顯示的時(shí)候默認(rèn)顯示的都是縮略圖,也就是我們看到的這一串標(biāo)簽
{$picpicture(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,3,1,0,130,100,5)}
因此我們主要來講這個(gè)標(biāo)簽的制作,別的頂級(jí)欄目。終極欄目的制作和文章頻道都是相同的
在picture文件夾下面以tag開頭的文件有4個(gè)
tag_picpicture.html 圖片縮略圖調(diào)用標(biāo)簽
tag_picturelist.html 圖片標(biāo)題列表調(diào)用標(biāo)簽
tag_slidepicpicture.html 圖片幻燈片調(diào)用標(biāo)簽
tag_slidepicpicture-js.html 圖片js效果標(biāo)簽?zāi)0?br />
打開tag_picpicture.html,我們會(huì)看到
{loop $pictures $i $picture}
$i是用來判定幾列的
利用這個(gè)i來和系統(tǒng)設(shè)置的$cols 做比較
利用他們的余數(shù)來判定是否分行
<img src='{$picture[thumb]}' alt='{$picture[alt]}' width='{$imgwidth}' height='{$imgheight}'> 這里面就是你在發(fā)布圖片時(shí)候選的 縮略圖的大小
<a href='{$picture[url]}' target='_blank' title='{$picture[alt]}'[/color]>{$picture[title]}</a>
這幾個(gè)分別是圖片的地址 圖片的提示 圖片的標(biāo)題
{if $descriptionlen}
<tr>
<td>{$picture[content]} <a href='{$picture[url]}' target='_blank'>具體>></a></td>
</tr>
{/if}
這一句是,假如答應(yīng)顯示說明,則顯示具體的說明信息
在tag_picturelist.html中,顯示的東西則比縮略圖模板要多
{$picture[img]} 標(biāo)題圖片
{$picture[catname]} 所屬欄目
<a href="{$picture[url]}" title="{$picture[alt]}" target="{$picture[target]}" class="tag_title_link{$picture[fonttype]}">{$picture[title]}</a> 圖片標(biāo)題及路徑
{if $showhits}({$picture[hits]}){/if} 假如答應(yīng)顯示點(diǎn)擊數(shù),則顯示點(diǎn)擊數(shù)
{if $showauthor}[作者:{$picture[author]}]{/if} 顯示作者
{if $datetype}[<span class="tag_date">{$picture[adddate]}</span>]{/if} 顯示添加時(shí)間
{if $descriptionlen}{$picture[content]}{/if} 顯示說明
圖片內(nèi)容頁content.html的制作
打開這個(gè)網(wǎng)頁
<script language=javascript type=text/javascript>
function fontZoom(size)
{
document.getElementById('{$addtime}l').style.fontSize=size 'px'
}
var pictureurl=new Array();
var picturename=new Array();
{loop $pictureurls $id $pic}
pictureurl[{$id}] = "{$pic[url]}";
相關(guān)PHPCms教程:
- PHPCMS v9 安裝環(huán)境要求
- PHPCMS mysql優(yōu)化教程
- PHPCMS shtml設(shè)置
- phpcms本地網(wǎng)站遷移至虛擬主機(jī)的教程
- Phpcms V9 調(diào)用全站最新文章的代碼
- Phpcms V9 調(diào)用全站文章排行的解決方案
- Phpcms V9 調(diào)用隨機(jī)文章的方法
- 讓PHPCms內(nèi)容頁支持JavaScript
- phpcms教程: phpcms V9 默認(rèn)模板文件目錄結(jié)構(gòu)
- phpcms教程:phpcms V9 常用文件目錄結(jié)構(gòu)介紹
- PhpCms系統(tǒng)設(shè)置:我的面板
- PhpCms系統(tǒng)設(shè)置:附件管理
- 相關(guān)鏈接:
- 教程說明:
PHPCms教程-菠蘿教你做模板之五-圖片頻道的模板制作
。