這里只是說(shuō)到我做模板的一些經(jīng)驗(yàn),不涉及程序,對(duì)HTML有所了解的話,更容易理解。我所列的都是以我制作的大觀園網(wǎng)站為例子,希望能起個(gè)拋磚引玉的作用。。具體要做什么樣的效果,大家可以多動(dòng)手試下
一、使用公共模板變量定義通用部分
一般可建立[!--temp.header--],[!--temp.footer--],[!--temp.sitename--],[!--temp.search--]之類的常用部分。然后在頁(yè)面需要插入的地方直接插入。好處是修改時(shí)只需要修改這個(gè)變量,不必每個(gè)模板頁(yè)去都去改。
注意:動(dòng)態(tài)頁(yè)面,如搜索,評(píng)論等不支持公共模板變量
二、網(wǎng)站通用導(dǎo)航(所有一級(jí)欄目)
在3.7版本以前,只能手工設(shè)定,3.7新增的帶模板的導(dǎo)航標(biāo)簽可以實(shí)現(xiàn)
頁(yè)面模板內(nèi)容:
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
列表內(nèi)容模板
(list.var)
三、還是導(dǎo)航,在大欄目里顯示小欄目。和上面差不多,但有點(diǎn)不同,加了個(gè)更多的鏈接
標(biāo)簽調(diào)用
[showclasstemp]父欄目ID,標(biāo)簽?zāi)0錓D,是否顯示欄目信息數(shù)[/showclasstemp]
頁(yè)面模板內(nèi)容:
<div>民間傳統(tǒng)</div><div>[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]<ahref="[!--bclassurl--]">更多>></a></div>
列表內(nèi)容模板
(list.var)
<a href="[!--classurl--]" title="[!--classname--]">[!--classname--]</a> |
三、導(dǎo)航技巧真多,再告訴你一個(gè)用在欄目頁(yè)和列表頁(yè)的導(dǎo)航效果
頁(yè)面調(diào)用
<ul class="column">[showclasstemp]'selfinfo',標(biāo)簽?zāi)0錓D,0[/showclasstemp]</ul>
頁(yè)面模板內(nèi)容:
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]code]
列表內(nèi)容模板
(list.var)
<li><a href="[!--classurl--]">[!--classname--]</a></li>
為什么要用li呢?主要是方便修改樣式,你想讓它怎么顯示就怎么顯示,包括加邊框,背景之類的
在你的樣式表里這樣定義
ul {
padding: 0;
margin: 0;
}
.column li {
width: 49%;
padding: 0px;
margin: 0px;
float: left;
list-style: none;
background: url(icon_li4.gif) no-repeat left center;/*用背景圖定義前面的小圖標(biāo) */
}
這樣它顯示的就是一行二個(gè)欄目,如果是要它顯示一行一個(gè),則這樣定義
.column li {
padding: 0px;
margin: 0px;
list-style: none;
background: url(icon_li4.gif) no-repeat left center;/*用背景圖定義前面的小圖標(biāo) */
}
如果要它是橫向顯示,則可以這樣
.column li {
padding: 2px 4px;
margin: 0px;
display: inline;
list-style: none;
}
上傳以下圖片:
四、多用'selfinfo'
在欄目頁(yè)和列表頁(yè),用'selfinfo'代替具體的ID號(hào)(你需要特別指定的除外)
[phomenews]、[ecmsinfo]、[phomeautopic]等都可以用這個(gè)。
五、善用循環(huán)子欄目數(shù)據(jù)標(biāo)簽
這個(gè)是值得推薦的。像下面的效果圖,在以前是需要一個(gè)個(gè)自己定義,但有了這個(gè)標(biāo)簽,我們只需要一個(gè)標(biāo)簽調(diào)用就可以搞定,而且以后增加、刪除子欄目都不需要再手動(dòng)去改
標(biāo)簽調(diào)用: [listsonclass]'selfinfo',顯示條數(shù),標(biāo)題截取數(shù),是否顯示欄目名,操作類型,模板ID,只顯示有標(biāo)題圖片[/listsonclass]
頁(yè)面模板內(nèi)容:
<div class="c1">
<div class="pad-all">
<div class="title2">【[!--the.classname--]
】</div>
</div>
<ul>
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>
<div class="more"><a href="[!--the.classurl--]">更多>></a></div>
</div>
列表內(nèi)容模板
(list.var)
<li><a href="http://www.Hack50.com/master/College/cms/ecms/2009-03-18/9445.html"title="[!--oldtitle--]">[!--title--]</a> <spanclass="date">([!--newstime--])</span></li>
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注