前言：
態(tài)度云網(wǎng)站是基于搜索引擎 SEO 優(yōu)化和用戶管理體驗(yàn)和營(yíng)銷便利與一體而開(kāi)發(fā)的一套建站程序，客戶獲得使用權(quán)后，只需通過(guò)后臺(tái)選擇模板和簡(jiǎn)單設(shè)置后就可以實(shí)現(xiàn)企業(yè)面向互聯(lián)網(wǎng)的各類需求。為了達(dá)到更好的 SEO 推廣優(yōu)化效果和網(wǎng)絡(luò)營(yíng)銷效果，模板作者在制作模板的時(shí)候除了對(duì)自我的審美嚴(yán)格要求從界面上達(dá)到精益求精之外，還要從代碼上書(shū)寫(xiě)上嚴(yán)格的遵從規(guī)范。
注：本文檔適合于網(wǎng)站開(kāi)發(fā)入門(mén)者閱讀。不適合此條件的訪客請(qǐng)略過(guò)。
一、模板基礎(chǔ)結(jié)構(gòu)
二、模板基礎(chǔ)概念
頁(yè)面調(diào)用模板構(gòu)成和順序：
系統(tǒng)頭部模板
公共頭部模板
當(dāng)前頁(yè)面模板
公共底部模板
系統(tǒng)底部模板
系統(tǒng)頭部模板 global_head.htm
系統(tǒng)頭部模板里的代碼從 <html> 便簽開(kāi)始到 <body> 的開(kāi)始標(biāo)簽結(jié)束，承擔(dān)著加載當(dāng)前頁(yè)面 css 和 js 和SEO 等相關(guān)頭部信息的工作，因此每個(gè)頁(yè)面都必須加載，否則頁(yè)面將無(wú)法正常運(yùn)行。一般會(huì)把系統(tǒng)頭部模板寫(xiě)到 公共頭部模板(header.htm) 里，以便其他頁(yè)面調(diào)用了公共頭部模板(header.htm)后同時(shí)調(diào)用系統(tǒng)頭部模板。
模板中調(diào)用 global_head.htm 的代碼:
{include file=$_Y['template']['global_header']}公共頭部模板 header.htm
公共頭部模板是為了將每個(gè)頁(yè)面都要用到的 LOGO 、導(dǎo)航、或者幻燈片等全局內(nèi)容寫(xiě)到里面方便其他頁(yè)面調(diào)用。一般第一行會(huì)調(diào)用系統(tǒng)頭部模板(global_header.htm )。在header.htm 的最后一行 或者是 header.htm 中的最后一個(gè)全屏元素之后會(huì)預(yù)留一個(gè) <div class="wp"> 的開(kāi)始標(biāo)簽，用于控制頁(yè)面
主體寬度。
模板中調(diào)用 header.htm 的代碼:
{include file=$_Y['template']['header']}當(dāng)前頁(yè)面模板 （如 index.htm 或 portal 和 project 目錄里的模板）
當(dāng)前頁(yè)面模板指的是URL訪問(wèn)目標(biāo)頁(yè)面的主模板，一般會(huì)在最開(kāi)始的地方調(diào)用公共頭部模板(header.htm)和在最后一行調(diào)用公共底部模板(footer.htm)。
公共底部模板 footer.htm
公共底部模板一般書(shū)寫(xiě)網(wǎng)站的全局底部信息，如版權(quán)聲明、友情鏈接、底部導(dǎo)航等。一般會(huì)在最后一行調(diào)用系統(tǒng)底部模板(global_footer.htm)。在 footer.htm 的第一行或者是第一個(gè)全屏元素開(kāi)始之前把 header.htm 中的 <div class="wp"> 標(biāo)簽結(jié)束掉。要不然會(huì)造成代碼結(jié)構(gòu)的不完整而導(dǎo)致錯(cuò)亂
模板中調(diào)用 footer.htm 的代碼:
{include file=$_Y['template']['footer']}系統(tǒng)底部模板 global_footer.htm
系統(tǒng)底部模板里寫(xiě)有 </body> 和 </html> 兩個(gè)結(jié)束標(biāo)簽，同時(shí)承擔(dān)這頁(yè)面部分程序的結(jié)束工作，因此 global_footer.htm 模板也是每個(gè)頁(yè)面必須調(diào)用的。一般會(huì)在公共底部模板(footer.htm)中調(diào)用，方便其他頁(yè)面在調(diào)用 footer.htm 的時(shí)候調(diào)用。
模板中調(diào)用 global_footer.htm 的代碼
{include file=$_Y['template']['global_footer']}模板緩存和 {nocache} 方法
訪客通過(guò) URL 訪問(wèn)頁(yè)面時(shí)程序會(huì)通過(guò) URL 傳遞的參數(shù)處理數(shù)據(jù)并套用對(duì)應(yīng)模板顯示給用戶看，頁(yè)面程序在第一次運(yùn)行的時(shí)候 會(huì)生成緩存，在頁(yè)面下一次被訪問(wèn)的時(shí)候就會(huì)直接調(diào)用靜態(tài)的 HTML 緩存，以此加快運(yùn)行和訪問(wèn)速度，緩存將會(huì)在下一次更新內(nèi)容的時(shí)候被清除。所以在緩存存在期間，用戶看到的頁(yè)面其實(shí)都是緩存數(shù)據(jù)。有時(shí)候我們希望頁(yè)面的部分?jǐn)?shù)據(jù)是動(dòng)態(tài)顯示的，如文件頁(yè)面的編輯和刪除按鈕需要在用戶登陸的時(shí)候顯示，不登陸的時(shí)候不顯示，這時(shí)候我們需要在這些代碼用{nocache} 方法進(jìn)行包圍，如：
{nocache}
{if $_Y['self']}
<span>用戶登陸了</span>
{else}
<span>用戶沒(méi)有登陸</span>
{/if}
{/nocache}以上代碼范例演示了使用 $_Y['self'] 判斷用戶是否登陸來(lái)顯示不同的代碼效果。如果沒(méi)有包圍在 {nocache} 里面的話可能就會(huì)導(dǎo)致訪客在非登陸狀態(tài)下訪問(wèn)了網(wǎng)頁(yè)時(shí)候生成了緩存，然后其他訪客登陸的時(shí)候頁(yè)面調(diào)用了這個(gè)還沒(méi)有觸發(fā)更新的緩存而導(dǎo)致只顯示未登錄時(shí)候的代碼，簡(jiǎn)單說(shuō) {nocache} 就是為了逃脫緩存用的。
關(guān)于上例中用到的 {if} 方法請(qǐng)查看這個(gè)文檔 [點(diǎn)擊查看 條件判斷方法if]
三、數(shù)據(jù)概念
從模板的數(shù)據(jù)設(shè)計(jì)角度，我們把數(shù)據(jù)分為UI界面、靜態(tài)數(shù)據(jù)、動(dòng)態(tài)數(shù)據(jù)三個(gè)部分。
1、UI界面
UI界面是指模板作者在制作模板的時(shí)候?yàn)榱嗣阑缑娑褂玫膱D片或其他素材，是模板框架的組成部分，這類數(shù)據(jù)通常通過(guò) {F} 方法來(lái)對(duì)應(yīng)到指定本地靜態(tài)資源 如{F file="images/bg.png"}，客戶可以通過(guò)網(wǎng)站后臺(tái)替換圖片
2、靜態(tài)數(shù)據(jù)
靜態(tài)數(shù)據(jù)其實(shí)也是UI界面的一部分，這部分?jǐn)?shù)據(jù)通產(chǎn)有比較強(qiáng)的用戶個(gè)性因素，一般不同客戶會(huì)有不同的內(nèi)容組織需求，但是又不具有可復(fù)用性或只具有極低的復(fù)用性，所以這部分?jǐn)?shù)據(jù)我們通過(guò){diy type="static"}方法來(lái)提供給客戶進(jìn)行內(nèi)容替換
[點(diǎn)擊查看 用戶自定義數(shù)據(jù)方法 diy]
3、動(dòng)態(tài)數(shù)據(jù)
動(dòng)態(tài)數(shù)據(jù)是具有較強(qiáng)可復(fù)用的數(shù)據(jù)，這部分?jǐn)?shù)據(jù)會(huì)被記錄到數(shù)據(jù)庫(kù)中，并以變量的形式輸出供頁(yè)面動(dòng)態(tài)調(diào)用，如文章列表和文章內(nèi)容數(shù)據(jù)還有網(wǎng)站標(biāo)題、電話、QQ等。
網(wǎng)站信息，網(wǎng)站信息(包括狀態(tài)信息)存儲(chǔ)在 $_Y 數(shù)組里，$_Y 是一個(gè)全局變量，通常在網(wǎng)站全局任意地方可調(diào)用，如{$_Y['title']} 指的就是 網(wǎng)站標(biāo)題的意思。
文章內(nèi)容，文章內(nèi)容存儲(chǔ)在 $article 數(shù)組里,只在文章內(nèi)容頁(yè)可以被調(diào)用，如{$article['content']} 指的就是 文章內(nèi)容 {$article['title']} 指的就是文章標(biāo)題的意思。
[點(diǎn)擊查看 文章內(nèi)容變量$article]
文章列表，文章列表存儲(chǔ)在 $list 數(shù)組里,只在文章列表頁(yè)面可以被調(diào)用,文章列表頁(yè)的 $list 是存儲(chǔ)的是當(dāng)前URL請(qǐng)求規(guī)則下的 文章列表，通過(guò){foreach} 方法進(jìn)行遍歷使用
[點(diǎn)擊查看 遍歷數(shù)組方法foreach]
欄目信息，存儲(chǔ)欄目信息的數(shù)組有兩個(gè)，一個(gè)是 $cat,$cat存儲(chǔ)當(dāng)前欄目的信息，如{$cat['title']} 就是欄目標(biāo)題的意思，另一個(gè)變量是 $cats，$cats存儲(chǔ)當(dāng)前模塊下的所有欄目的信息集合，因此$cats 里面也包含了 $cat。(注：{$cats[$cat['catid']]['title']} 和 {$cat['title']} 是等值的)。
[點(diǎn)擊查看 欄目信息變量$cat 和 $cats]
動(dòng)態(tài) DIY，有時(shí)候模板某些部分的數(shù)據(jù)是需要由網(wǎng)站主輸入?yún)?shù)然后動(dòng)態(tài)調(diào)用數(shù)據(jù)庫(kù)數(shù)據(jù)的，這部分?jǐn)?shù)據(jù)我們叫做動(dòng)態(tài) DIY, 使用{diy type="$mod"}方法來(lái)和網(wǎng)站主進(jìn)行交互($mod 指的是 "news","show","about","job","team"中的任意一種)
[點(diǎn)擊查看 用戶自定義數(shù)據(jù)方法 diy]
查詢數(shù)據(jù)，某些特需場(chǎng)景下需要調(diào)用指定數(shù)據(jù)但是又沒(méi)有變量可用，并且不希望或者無(wú)法讓站長(zhǎng)通過(guò)動(dòng)態(tài)DIY調(diào)用數(shù)據(jù)的情況下，可以使用SQL查詢構(gòu)建一個(gè)返回?cái)?shù)據(jù)供頁(yè)面調(diào)用。如：{articlebysql}方法。但是從目前來(lái)看這種場(chǎng)景并不常見(jiàn)。
四、數(shù)組概念
了解數(shù)組之前我們先理解下變量，變量是一個(gè)數(shù)據(jù)容器，用來(lái)存儲(chǔ)由程序計(jì)算返回的數(shù)據(jù)，因?yàn)檫@個(gè)容器存儲(chǔ)的數(shù)據(jù)是隨著URL請(qǐng)求的參數(shù)和網(wǎng)站主的設(shè)置不同而打印結(jié)果不同的,因此稱為變量。模板頁(yè)面調(diào)用指定變量即等于調(diào)用了變量里的動(dòng)態(tài)數(shù)據(jù)。我們可以通過(guò){yun_dump} 方法查看變量(數(shù)組)的數(shù)據(jù)結(jié)構(gòu)
[點(diǎn)擊查看 變量數(shù)據(jù)結(jié)構(gòu)查看方法 yun_dump]
1）數(shù)組也屬于變量，因此數(shù)組也是用于存儲(chǔ)數(shù)據(jù)的容器。因?yàn)槭且粋€(gè)數(shù)據(jù)集合，所以我們稱為數(shù)組。數(shù)組由鍵值對(duì)組成。如
$people = array( 'name' => 'zhangwei', 'height' => '170', 'weight' => '60' );
以上列子中的變量 $people 就是一個(gè)數(shù)組，存儲(chǔ)著3個(gè)子元素(鍵值對(duì))
其中'name','height','weight'為“鍵”,因?yàn)楹芏嗲闆r下數(shù)組是數(shù)據(jù)庫(kù)表返回的結(jié)果，因此有時(shí)候我們也稱“鍵”為“字段”。
'zhangwei'、'170'、'60'為對(duì)應(yīng)“鍵”的值。
我們可以通過(guò) $people['name'] 來(lái)獲取到 'zhangwei' 這個(gè)值，如“這個(gè)人的名字叫{$people['name']}，他身高是{$people['height']}厘米,他的體重是{$people['wight']}公斤”。
2）數(shù)組的值也可以是一個(gè)數(shù)組，如：
$peoples = array( 'zhangwei' => array( 'height' => '170', 'weight' => '60' ), 'xiaoming' => array( 'height' => '172', 'weight' => '58' ) 'laowang' => array( 'height' => '165', 'weight' => '55' ) );
以上數(shù)組 $peoples 里有三個(gè)鍵值對(duì)(子元素)，存儲(chǔ)的是三個(gè)人的身高和體重信息。
我們可以通過(guò) $peoples['zhangwei']['height' ] 來(lái)獲取 zhangwei 的身高為 170。
我們可以通過(guò) {foreach} 來(lái)對(duì) $peoples 進(jìn)行遍歷（也叫循環(huán)），打印所有的人的信息。如：
<dl>
<dt>用戶信息</dt>
{foreach $peoples as $k => $v}
<dd>{$k}:身高{$v['height']}CM，體重{$v['weight']}KG </dd>
{/foreach}
</dl>打印出來(lái)的結(jié)果就是：
<dl> <dt>用戶信息</dt> <dd>zhangwei:身高170CM，體重60KG</dd> <dd>xiaoming:身高172CM，體重58KG</dd> <dd>laowang:身高165CM，體重55KG</dd> </dl>
3）上列結(jié)構(gòu)的數(shù)組稱為二維數(shù)組，按照數(shù)組值也可以是數(shù)組的原理推算出數(shù)組的維度是沒(méi)有上限的，如以下這個(gè)是三維數(shù)組：
$peoples = array( 'zhangwei' => array( 'height' => '170', 'weight' => '60' 'children'=> array( 'gaoshang', 'lili', 'luxi', ), ), 'xiaoming' => array( 'height' => '172', 'weight' => '58' 'children'=> array( 'wangtiang', 'tiangyi', 'wnagbaoqiang', ), ), 'laowang' => array( 'height' => '165', 'weight' => '55' 'children'=> array( 'keke', ), ), );
上例中{$peoples['zhangwei']['children']} 的值是一個(gè)數(shù)組，這個(gè)數(shù)組是沒(méi)有鍵的。它等值于
array( [0] => 'gaoshang', [1] => 'lili', [2] => 'luxi', ),
所以我們可以叫這樣的數(shù)組為索引數(shù)組，可以使用{$peoples['zhangwei']['children'][0]}來(lái)定位gaoshang，如“zhangwei有一個(gè)兒子名字叫{$peoples['zhangwei']['children'][0]}”,打印結(jié)果就是{zhangwei有一個(gè)兒子名字叫g(shù)aoshang}
4）現(xiàn)在我們解釋下上面我們演示的遍歷 一個(gè)二維數(shù)組的例子中的語(yǔ)法
{foreach $peoples as $k => $v}
<dd>{$k}:身高{$v['height']}CM，體重{$v['weight']}KG </dd>
{/foreach}foreach 就是我們模板里經(jīng)常用到的遍歷數(shù)組的方法 [點(diǎn)擊查看 遍歷數(shù)組方法foreach]
$peoples 是將要被遍歷的數(shù)組
$k 和 $v 是形參，意思是將每次遍歷出的鍵值對(duì)臨時(shí)進(jìn)行變量賦值，以便在 html 代碼中調(diào)用。所以 $k 和 $v 是可以根據(jù)不同情況隨意命名的。
如果我們不需要使用數(shù)組中的 “鍵”，我們還可以省略上例中的 $k。如：
{foreach $peoples as $v}
<dd>身高{$v['height']}CM，體重{$v['weight']}KG </dd>
{/foreach}四、代碼規(guī)范
書(shū)寫(xiě)代碼的過(guò)程中，應(yīng)該隨時(shí)保持代碼的整潔度，養(yǎng)成良好的代碼注釋習(xí)慣，并使用 tab 健縮進(jìn)代碼使代碼結(jié)構(gòu)清晰。CSS代碼要以模塊為單位分類碼放。
五、代碼封裝（快捷代碼）
為了加快開(kāi)發(fā)速度，系統(tǒng)提供了一些常用的代碼封裝，只要在模板里調(diào)用封裝標(biāo)簽即可實(shí)現(xiàn)代碼塊的輸出。
目前可供調(diào)用的標(biāo)簽有：
{html val="slider_1"}//傳統(tǒng)風(fēng)格的幻燈片
{html val="nav_menu"}//主導(dǎo)航
{html val="nav_top"} //頂部導(dǎo)航
{html val="nav_footer"} //底部導(dǎo)航
{html val="search"}//搜索框
{html val="links_text"}//友情鏈接
{html val="links_pic" picwidth="" picheight=""}
{html val="contactcard_dl"} //聯(lián)系我們卡片 dl
{html val="contactcard_ul"} //聯(lián)系我們卡片 ul
{html val="copyright"}//底部版權(quán)
{html val="sidebar_ul"}//內(nèi)容頁(yè)邊欄 ul
{html val="sidebar_dl"} //內(nèi)容頁(yè)邊欄 dl
閩公網(wǎng)安備號(hào):35010402350377
