uchome模板全解析(二)

13年前
本篇主要以几个例子来详细说明下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,就这么简单,这样设计师只要了解几个简单的语法,就知道显示效果是什么样了。