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