uchome模板全解析(二)

本篇主要以幾個例子來詳細說明下uchome的模板文件結構及語法說明。

必須先來了解一下uchome的模板文件解析過程，我們以“隨便看看”里的“博客”為例：

它的url地址是http://home.xxx.com/network.php?ac=blog，

那么我們先打開/network.php看一下，我們看到第25行有一段

//允許的方法
$acs = array(’space’, ‘doing’, ‘blog’, ‘album’, ‘mtag’, ‘thread’, ’share’);
$ac = (empty($_GET['ac']) || !in_array($_GET['ac'], $acs))?’index’:$_GET['ac'];

這里是保證不會出現其他不存在的模塊。看到里面有個’blog’了吧。

然后又看到第37行里面有一段

//數據處理
include_once(S_ROOT.”./source/network_{$ac}.php”);

這個實際上引用了/source/network_blog.php文件，而network_blog.php里面進行相關的博客數據準備及其他操作，為下一步的解析模板做準備

最后第49行有

//模板調用

include_once template(”network_$ac”);

即用template函數解析對應的靜態htm模板頁面再進行調用，template函數就不詳細說了，主要是定位到模板文件夾下的指定模板頁面（例如這里就是/template/default/network_blog.htm），然后用正則表達式替換模板文件中的變量和模板語法語句，填充上一步得到的博客數據，然后輸出到屏幕

之所以使用模板頁面，而不直接在php里面寫htm代碼輸出，是為了使程序代碼和模板頁面分離，便于設計師和程序員的工作互不影響。

好了廢話了很多，先看一下uchome的基本模板語法

就以/template/default/network_blog.htm為例，它的內容是(綠色的和褐色底色的就是嵌入到模板頁面里面的語法代碼了)

<!–{eval $_TPL['titles'] = array(’日志’, ‘隨便看看’);}–>
<!–{template header}–>
<!–{template network_header}–>

<div id=“search” class=“h_status”>

<div id=“m_search”<!–{if !empty($gets) || !empty($_GET['view'])}–> style=”display:none;”<!–{/if}–>>
<form method=“get” action=“network.php”>
<input type=“text” name=“key” value=“$_GET[key]“ size=“26″ class=“t_input” />
<input type=“hidden” name=“ac” value=“$ac” />
<input type=“hidden” name=“searchmode” value=“1″ />
<input type=“submit” name=“searchsubmit” value=“搜索日志” class=“submit” />
<a href=“java script:;”onclick=“document.getElementById(’m_search’).style.display=’none’; document.getElementById(’adv_search’).style.display=’block’”>高級搜索< /a>
</form>
</div>
<form method=“get” action=“network.php”>
<table cellspacing=“0″ cellpadding=“0″ class=“formtable” id=“adv_search”<!–{if empty($gets) &&empty($_GET['view'])}–> style=”display:none;”<!–{/if}–>>
<tr>
<th width=“60″>關鍵字*</th>
<td>
<input type=“text” name=“key” value=“$_GET[key]“ size=“26″ class=“t_input” />
</td>
</tr>
<tr>
<th>作者名*</th>
<td>
<input type=“text” name=“username” value=“$_GET[username]“ size=“26″ class=“t_input” />
</td>
</tr>
<tr>
<th>時間范圍</th>
<td>
<input type=“text” name=“starttime” value=“$_GET[starttime]“ size=“10″ class=“t_input” /> ~ <inputtype=“text” name=“endtime” value=“$_GET[endtime]“ size=“10″ class=“t_input” />
格式為 YYYY-MM-DD
</td>
</tr>
<tr>
<th>搜索方式</th>
<td>
<label for=“subject”><input id=“subject” type=“radio” value=“subject”name=“type”$typearr[subject]>搜索標題</label>
<label for=“fulltext”><input id=“fulltext” type=“radio” value=“fulltext” name=“type”$typearr[fulltext]>全文搜索</label>
</td>
</tr>
<tr>
<th>結果排序</th>
<td>
<select name=“orderby”>
<option value=“dateline”>發布時間</option>
<option value=“replynum”$orderbyarr[replynum]>回復數量</option>
<option value=“viewnum”$orderbyarr[viewnum]>瀏覽次數</option>
</select>
<select name=“ascdesc”>
<option value=“asc”>按升序排列</option>
<option value=“desc”$ascdescarr[desc]>按降序排列</option>
</select>
</td>
</tr>
<tr>
<th>&nbsp;</th>
<td>
<input type=“hidden” name=“ac” value=“$ac” />
<input type=“hidden” name=“searchmode” value=“1″ />
<input type=“submit” name=“searchsubmit” value=“搜索” class=“submit” />
</td>
</tr>
</table>
</form>
</div>

<!–{if $list}–>
<div class=“entry_list”>
<ul>
<!–{loop $list $value}–>
<li>
<div class=“avatar48″><a href=“space.php?uid=$value[uid]“><img src=“<!–{avatar($value[uid],small)}–>” class=“avatar” /></a></div>
<div class=“title”>
<div class=“r_option”><a href=“cp.php?ac=share&type=blog&id=$value[blogid]“id=“a_share_$value[blogid]“ onclick=“ajaxmenu(event, this.id, 99999,” , -1)” class=“a_share”>分享</a></div>
<h4><a href=“space.php?uid=$value[uid]&do=blog&id=$value[blogid]“>$value[subject]</a></h4>
<div><a href=“space.php?uid=$value[uid]“>{$_SN[$value[uid]]}</a> <span class=“time”><!–{date(’Y-m-d H:i’,$value[dateline],1)}–></span></div>
</div>
<div class=“detail image_right l_text s_clear” id=“blog_article_$value[blogid]“>
<!–{if $value[pic]}–><p class=“image”><a href=“space.php?uid=$value[uid]&do=blog&id=$value[blogid]“><img src=“$value[pic]“ /> $value[message]
</div>
<div>
<!–{if $value[viewnum]}–><a href=“space.php?uid=$value[uid]&do=blog&id=$value[blogid]“>$value[viewnum] 次閱讀</a><spanclass=“pipe”>|</span><!–{/if}–>
<!–{if $value[replynum]}–><a href=“space.php?uid=$value[uid]&do=blog&id=$value[blogid]#comment”>$value[replynum] 個評論</a><!–{else}–>沒有評論<!–{/if}–>
</div>
</li>
<!–{/loop}–>
</ul>
</div>
<div class=“page”>
<!–{if $multi==’networkpage’}–>僅顯示最新發布的 $count 個日志<!–{else}–>$multi<!–{/if}–>
</div>
<!–{else}–>
<div class=“c_form”>沒有相應的日志。</div>
<!–{/if}–>

<!–{template footer}–>

一般來說，我們需要了解一下幾個與html標記不同的東西：

1><!–{xxxxx}–> 在html里面，這個表示將一段代碼注釋掉，不顯示出來，而在uchome模板里，它在里面放入了一對花括號，就表示是嵌入了php語句啦，可以被還原成正規的php代碼。

2>在模板里面，是可以直接顯示php的變量的，模板解析函數會將這些變量替換成實際的變量值。

1.變量設置與其他模板調用

第一句 設置變量的值

<!–{eval $_TPL['titles'] = array(’日志’, ‘隨便看看’);}–>

表示將$_TPL['titles']變量設置為array(’日志’, ‘隨便看看’);

第二句 調用另外一個模板文件進來[模板里面再調用模板]

<!–{template header}–>實際上相當于php中的

template(”header”) 即解析/template/default/header.htm文件

條件判斷 <!–{if xxx}–><!–{/if}–>類

首先是<!–{if $multi==’networkpage’}–>如果滿足條件，這里顯示一些東西<!–{/if}–>

以及<!–{if $multi==’networkpage’}–>如果滿足條件，這里顯示一些東西<!–{else}–>否則顯示其他的東西<!–{/if}–>

循環顯示 <!–{loop}–><!–{/loop}–>類

<!–{loop $list $value}–>

顯示了一遍又一遍啊又一遍 $value[name] : $value[job] <br />

<!–{/loop}–>

如上所示，這個就是將數組$list里面的元素一個接一個的顯示出來。假如我們這里的$list存儲了兩位設計師的資料

$list = array(0=>array(’name’ => ‘baobao’,’job’=>’超級設計師’),1=>array(’name’ => ‘小馬’,’job’=>’無敵設計師’));

那么這里最后得到的html代碼是

顯示了一遍又一遍啊又一遍 baobao :超級設計師 <br />

顯示了一遍又一遍啊又一遍 小馬 :無敵設計師 <br />

….

語法嵌套

當然了，語法可以嵌套，所以這也造成我們看模板文件的復雜性，比如在loop里面會有if，即表示每循環一次都要進行判斷；又或者if里面有loop，即表示只有滿足條件了，才會進行循環

2.變量顯示

直接顯示

在php里面，變量名是以$美元號為開頭的，所以如果在模板里面看見很多$_GET、$_POST、$list、$value[aaa]的這樣的東西，就表示顯示變量的值。不過我們如果要直接輸出變量值，一般習慣在變量名的前后加上花括號，避免模板解析錯誤，比如{$_GET[aa]}、{$_POST[bb]}、{$list}、{$value[aaa]}等等。

變量與標準html混寫

<a href=”cp.php?ac=friend&op=add&uid={$value[uid]}” id=”a_hot_friend_{$key}” onclick=”ajaxmenu(event, this.id, 99999, ”, -1)”>

如上面所示，其中既有html又有$value[uid]這樣的變量（還記得嗎？用花括號包起來防止變量解析錯誤），它們是混合在一起的，沒有關系，我們在腦海里把變量用一個數字或者字母來替換來想象，然后理解就容易了，類似上面那段，其實解析出來后顯示的是

<a href=”cp.php?ac=friend&op=add&uid=12345” id=”a_hot_friend_2342” onclick=”ajaxmenu(event, this.id, 99999, ”, -1)”>

OK，就這么簡單，這樣設計師只要了解幾個簡單的語法，就知道顯示效果是什么樣了。