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