網頁設計,好用的smarty教學

網頁設計,好用的smarty教學

smarty實例教學

一、什麼是smarty?
smarty是一個使用PHP寫出來的模板PHP模板引擎,它提供了邏輯與外在內容的分離,簡單的講,目的就是要使用PHP程式員同美工分
離,使用的程式員改變程式的邏輯內容不會影響到美工的頁面設計,美工重新修改頁面不會影響到程式的程式邏輯,這在多人合作的項目
中顯的尤為重要。

二、smarty優點:
1. 速度:採用smarty編寫的程式可以獲得最大速度的提高,這一點是相對於其它的模板引擎技術而言的。

2. 編譯型:採用smarty編寫的程式在執行時要編譯成一個非模板技術的PHP檔案,這個檔案採用了PHP與HTML混合的方式,在下一次訪
問模板時將WEB請求直接轉換到這個檔案中,而不再進行模板重新編譯(在源程式沒有改動的情況下)

3. 快取技術:smarty選用的一種快取技術,它可以將使用者最終看到的HTML檔案快取成一個靜態的HTML頁,當設定smarty的cache屬性為
true時,在smarty設定的cachetime期內將使用者的WEB請求直接轉換到這個靜態的HTML檔案中來,這相當於叫用一個靜態的HTML檔案。

4. 外掛技術:smarty可以自訂外掛。外掛實際就是一些自訂的函數。

5. 模板中可以使用if/elseif/else/endif。在模板檔案使用判斷語法可以非常方便的對模板進行格式重排。
三、不適合使用smarty的地方:

1. 需要實時更新的內容。例如像股票顯示,它需要經常對資料進行更新,這類型的程式使用smarty會使模板處理速度變慢。

2. 小項目。小項目因為項目簡單而美工與程式員兼於一人的項目,使用smarty會喪失php開發迅速的優點。

四、安裝smarty類:

安裝smarty的環境:php版本4.06以上版本。

安裝smarty方法非常簡單,從中下載smarty.t…將LIB中所有檔案
拷入comm目錄,完成基本安裝.

其它進階安裝使用方法請看手冊.

五、smarty在模板中的使用:

本節通過幾個實例來講一講smarty的使用。smarty模板通常使用.tpl來標識,有些人為了美工方便,將附檔名直接寫成.html,也是可以
的。本文中採用smarty標準寫法:以.tpl來表示為一個smarty模板。

PHP程式碼:——————————————————————————–

實例1:

先來看一個簡單的範例。
=====================================================
index.tpl
=====================================================

{* 顯示是smarty變數識符裡的用*包含的文字為註釋內容 *}
{include file=”header.tpl”}{*頁面頭*}
大家好,我叫{$name}, 歡迎大家閱讀我的smarty學習材料。
{include file=”foot.tpl”}{*頁面尾*}

上邊的這個範例是一個tpl模板,其中:
1. {**}是模板頁的註釋,它在smarty對模板進行解析時不進行任何輸出,僅供模板設計師對模板進行註釋。
2. {include file=”xxx.tpl”}使用此句將一個模板檔案包含到目前頁面中,範例中將在網站中公用事的head.tpl與foot.tpl進行了包含,你可以
這樣想,使用這一句將xxx.tpl中的內容全部複製在目前語法處。當然,你不使用這一句也可以,將XXX.tpl中的內容複製到目前語法處
也是完全可以了。

3.{$name}: 模板變數,smarty中的核心組成,採用smarty定義的左邊界符{與右邊界符}包含著、以PHP變數形式給出,在smarty程式中將使用
$smarty->assign(“name”, “李曉軍”);將模板中的$name替換成「李曉軍」三個字。

整個實例源程式如下:
=============================
header.tpl
=============================
<html>
<head>
<title>大師兄smarty教學</title>
</head>
<body>
===============================
foot.tpl
===============================
<hr>
<center> CopyRight(C) by 大師兄 2004年8月</center>
<hr>
</body>
</html>

=====================================================
index.tpl
=====================================================

{* 顯示是smarty變數識符裡的用*包含的文字為註釋內容 *}
{include file=”header.tpl”}{*頁面頭*}
大家好,我叫{$name}, 歡迎大家閱讀我的smarty學習材料。
{include file=”foot.tpl”}{*頁面尾*}

================================================
index.php
================================================
<?php

include_once(“./comm/Smarty.class.php”); //包含smarty類檔案

$smarty = new Smarty(); //建立smarty實例對像$smarty
$smarty->templates(“./templates”); //設定模板目錄
$smarty->templates_c(“./templates_c”); //設定編譯目錄

//—————————————————-
//左右邊界符,預設為{},但實際應用當中容易與JavaScript
//相衝突,所以建議設成<{}>或其它。
//—————————————————-
$smarty->left_delimiter = “{“;
$smarty->right_delimiter = “}”;

$smarty->assign(“name”, “李曉軍”); //進行模板變數替換

//編譯並顯示位於./templates下的index.tpl模板
$smarty->display(“index.tpl”);
?>

最終執行這個程式時將顯示為:
================================
執行index.php
================================
<html>
<head>
<title>大師兄smarty教學</title>
</head>
<body>
大家好,我叫李曉軍, 歡迎大家閱讀我的smarty學習材料。
<hr>
<center> CopyRight(C) by 大師兄 2004年8月</center>
<hr>
</body>
</html>

smarty實例教學(2)
這個範例是綜合使用smarty模板參數的一個範例,這些參數用來控制模板的輸出,我只選其中幾個,其它的參數你去看參考吧。
================================================
exmple2.tpl
================================================
<html>
<head><title>大師兄smarty範例2</title></head>
<body>
1. 第一句首字母要大寫:{$str1|capitalize}<br>
2. 第二句模板變數 + 李曉軍:{$str2|cat:”李曉軍”}<br>
3. 第三句輸出目前日期:{$str3|date_format:”%Y年%m月%d日”}
4. 第四句.php程式中不處理,它顯示預設值:{$str4|default:”沒有值!”}
5。第五句要讓它縮進8個空白字母位,並使用”*”取替這8個空白字元:<br>
{$str5|indent:8:”*”}}<br>
6. 第六句把TEACHerLI@163.com全部變為小寫:{$str6|lower}<br>
7. 第七句把變數中的teacherli替換成:李曉軍:{$str7|replace:”teacherli”:”李曉軍”}<br>
8. 第八句為組合使用變數修改器:{$str8|capitalize|cat:”這裡是新加的時間:”|date_format:”%Y年%m月%d日”|lower}
</body>
</html>

===============================================
example2 .php
===============================================
<?php

include_once(“./Smarty.class.php”); //包含smarty類檔案

$smarty = new Smarty(); //建立smarty實例對像$smarty
$smarty->templates(“./templates”); //設定模板目錄
$smarty->templates_c(“./templates_c”); //設定編譯目錄

//—————————————————-
//左右邊界符,預設為{},但實際應用當中容易與JavaScript
//相衝突,所以建議設成<{}>或其它。
//—————————————————-
$smarty->left_delimiter = “{“;
$smarty->right_delimiter = “}”;

$smarty->assign(“str1”, “my name is xiao jun, li.”); //將str1替換成My Name Is Xiao Jun, Li.
$smarty->assign(“str2”, “我的名字叫:”); //輸出: 我的名字叫:李曉軍
$smarty->assign(“str3”, “公元”); //輸出公元2004年8月21日(我的目前時間)
//$smarty->assign(“str4”, “”); //第四句不處理時會顯示預設值,如果使用前面這一句則替換為””
$smarty->assign(“str5”, “前邊8個*”); //第五句輸出:********前邊8個*
$smarty->assign(“str6”, “TEACHerLI@163.com“); //這裡將輸出teacherli@163.com
$smarty->assign(“str7”, “this is teacherli”); //在模板中顯示為:this is 李曉軍
$smarty->assign(“str8”, “HERE IS COMBINING:”);

//編譯並顯示位於./templates下的index.tpl模板
$smarty->display(“example2.tpl”);
?>

最終輸出效果:
======================================================
example2.php輸出效果:
======================================================
<html>
<head><title>大師兄smarty範例2</title></head>
<body>
1. 第一句首字母要大寫:My Name Is Xiao Jun, Li.<br>
2. 第二句模板變數 + 李曉軍:我的名字叫:李曉軍<br>
3. 第三句輸出目前日期:公元2004年8月21日<br>
4. 第四句.php程式中不處理,它顯示預設值:沒有值!<br>
5。第五句要讓它縮進8個空白字母位,並使用”*”取替這8個空白字元:<br>
********前邊8個*<br>
6. 第六句把TEACHerLI@163.com全部變為小寫:teacherli@163.com<br>
7. 第七句把變數中的teacherli替換成:李曉軍:this is 李曉軍<br>
8. 第八句為組合使用變數修改器:Here is Combining:這裡是新加的時間:2004年8月21日
</body>
</html>

在模板中的這些參數被稱為變數修改器(variable modifiers),使用這些參數可對模板進行一系列的修改控制。變數修改器
使用”|”和調節器名稱應用修改器, 使用”:”分開修改器參數。變數修改器可以組合使用,像第八句一樣,實際使用中可以靈活應用。

實例3.
==================================================
example3.tpl
==================================================
<html>
<head><title>模板中內定的一些函數</title></head>
<body>

{*下面的這一段相當於在模板內部定義一個變數UserName*}
{assign var=”UserName” value=”大師兄”}
這裡將顯示模板內部定義的一個變數:UserName = {$UserName}

下面的這一行將顯示3個checkBox:<br>
{html_checkboxes name=”CheckBox” values=$CheckName checked=$IsChecked output=$value separator=”<br />”}
下面在這一行將顯示3個radio:<br>
{html_radioes name=”RadioBox” values=$RadioName checked=$IsChecked output=$value separator=”<br />”}
下面顯示一個月,日, 年選擇框:<br>
{html_select_date}

<hr><b>CopyRight(C) By XiaoJun, Li 2004<b>{mailto address=”teacherli@163.ccom” text=”聯繫作者”}

</body>
</html>

======================================================
example3.php
======================================================
<?php

require_once (“./comm/Smarty.class.php”);

$smarty = new F117_Smarty;
$smarty->template_dir = ”./templates/”;
$smarty->compile_dir = ”./templates_c/”;
$smarty->config_dir = ”./configs/”;
$smarty->cache_dir = ”./cache/”;
$smarty->caching = false;

//————————————————————————————–
//處理{html_checkboxes name=”CheckBox” values=$CheckName checked=$IsChecked output=$value separator=”<br />”}
//————————————————————————————–
$smarty->assign(”CheckName”, array(
1001 => ”語文”,
1002 => ”數學”,
1003 => ”外語”));
$smarty->assign(”IsChecked”, 1001);
//————————————————————————————–
//處理{html_radioes name=”RadioBox” values=$RadioName checked=$IsChecked output=$value separator=”<br />”}
//————————————————————————————–
$smarty->assign(”RadioName”, array(
1001 => ”語文”,
1002 => ”數學”,
1003 => ”外語”));
$smarty->assign(”IsChecked”, 1001);

//————————————————————————————–
//{html_select_date}不用處理會自動輸出
//————————————————————————————–

$smarty->display(“example3.tpl”);
?>
smarty實例教學(3)

======================================================
example3.php輸出效果:
======================================================
<html>
<head><title>模板中內定的一些函數</title></head>
<body>

{assign var=”UserName” value=”大師兄”}
這裡將顯示模板內部定義的一個變數:UserName = 大師兄

下面的這一行將顯示3個checkBox:<br>
<input type=”checkbox” name=”CheckBox[]” value=”1000″>語文<br />
<input type=”checkbox” name=”CheckBox[]” value=”1001″ checked=”checked”>數學<br />
<input type=”checkbox” name=”CheckBox[]” value=”1002″>外語<br />
下面在這一行將顯示3個radio:<br>
<input type=”radio” name=”RadioBox[]” value=”1000″>語文<br />
<input type=”radio” name=”RadioBox[]” value=”1001″ checked=”checked”>數學<br />
<input type=”radio” name=”RadioBox[]” value=”1002″>外語<br />
下面顯示一個月,日, 年選擇框:<br>
<select name=”Date_Month”>
<option label=”January” value=”01″>January</option>
<option label=”February” value=”02″>February</option>
<option label=”March” value=”03″>March</option>
<option label=”April” value=”04″>April</option>
<option label=”May” value=”05″>May</option>
<option label=”June” value=”06″>June</option>
<option label=”July” value=”07″>July</option>
<option label=”August” value=”08″ selected=”selected”>August</option>
<option label=”September” value=”09″>September</option>
<option label=”October” value=”10″>October</option>
<option label=”November” value=”11″>November</option>
<option label=”December” value=”12″>December</option>
</select>
<select name=”Date_Day”>
<option label=”01″ value=”1″>01</option>
<option label=”02″ value=”2″>02</option>
<option label=”03″ value=”3″>03</option>
<option label=”04″ value=”4″>04</option>
<option label=”05″ value=”5″>05</option>
<option label=”06″ value=”6″>06</option>
<option label=”07″ value=”7″>07</option>
<option label=”08″ value=”8″>08</option>
<option label=”09″ value=”9″>09</option>
<option label=”10″ value=”10″>10</option>
<option label=”11″ value=”11″>11</option>
<option label=”12″ value=”12″>12</option>
<option label=”13″ value=”13″>13</option>
<option label=”14″ value=”14″>14</option>
<option label=”15″ value=”15″>15</option>
<option label=”16″ value=”16″>16</option>
<option label=”17″ value=”17″>17</option>
<option label=”18″ value=”18″>18</option>
<option label=”19″ value=”19″>19</option>
<option label=”20″ value=”20″>20</option>
<option label=”21″ value=”21″ selected=”selected”>21</option>
<option label=”22″ value=”22″>22</option>
<option label=”23″ value=”23″>23</option>
<option label=”24″ value=”24″>24</option>
<option label=”25″ value=”25″>25</option>
<option label=”26″ value=”26″>26</option>
<option label=”27″ value=”27″>27</option>
<option label=”28″ value=”28″>28</option>
<option label=”29″ value=”29″>29</option>
<option label=”30″ value=”30″>30</option>
<option label=”31″ value=”31″>31</option>
</select>
<select name=”Date_Year”>
<option label=”2004″ value=”2004″ selected=”selected”>2004</option>
</select>
<hr><b>CopyRight(C) By XiaoJun, Li 2004<b><a href=”mailto:teacherli@163.com”>ÁªÏµ×÷Õß</a>
</body>
</html>

例3使用了一些smarty模板中內置的一些函數,相似的函數大家可以在手冊中查到,使用方法很簡單,大家可以自己去搜尋.
例4.模板控制(if / elseif / else/ endif )
=======================================================
example4.tpl
=======================================================
<html>
<head><title>模板中的流程控制</title><head>
<body>
<table border=”1″>
{assign var=”tbColor” value=”#D4D0C8″}
色彩:{$tbColor}<br>

{section name=loop loop=$News}
{if $tbColor == “#D4D0C8″}
<tr bgcolor=”{$tbColor}”>
{assign var=”tbColor” value=”#EEEEEE”}
{else $tbColor == “#EEEEEE”}
<tr bgcolor = “{$tbColor}”>
{assign var=”tbColor” value=”#D4D0C8″}
{/if}
<td>{$News[loop].newsID}</td>
<td>{$News[loop].newsTitle}</td>
<tr>
{/section}
</table>
</body>
</html>
=======================================================
example4.php
=======================================================
<?php

require_once (“./public/inc/F117_Smarty.php”);

$smarty = new F117_Smarty;
$smarty->template_dir = ”./templates/”;
$smarty->compile_dir = ”./templates_c/”;
$smarty->config_dir = ”./configs/”;
$smarty->cache_dir = ”./cache/”;
$smarty->caching = false;

$array[]= array(“newsID”=>”001”, “newsTitle”=>”第1條新聞”);
$array[]= array(“newsID”=>”002”, “newsTitle”=>”第2條新聞”);
$array[]= array(“newsID”=>”003”, “newsTitle”=>”第3條新聞”);
$array[]= array(“newsID”=>”004”, “newsTitle”=>”第4條新聞”);
$array[]= array(“newsID”=>”005”, “newsTitle”=>”第5條新聞”);
$array[]= array(“newsID”=>”006”, “newsTitle”=>”第6條新聞”);
$array[]= array(“newsID”=>”007”, “newsTitle”=>”第7條新聞”);
$array[]= array(“newsID”=>”008”, “newsTitle”=>”第8條新聞”);
$smarty->assign(“News”, $array);

$smarty->display(“example4.tpl”);
?>
smarty實例教學(4)

==================================================
example4.php輸出:
==================================================
<html>
<head><title>模板中的流程控制</title><head>
<body>
<table border=”1″>

<tr bgcolor=”#D4D0C8″>

<td>001</td>
<td>第1條新聞</td>
</tr>
<tr bgcolor = “#EEEEEE”>

<td>002</td>
<td>第2條新聞</td>
</tr>
<tr bgcolor=”#D4D0C8″>

<td>003</td>
<td>第3條新聞</td>
</tr>
<tr bgcolor = “#EEEEEE”>

<td>004</td>
<td>第4條新聞</td>
</tr>
<tr bgcolor=”#D4D0C8″>

<td>005</td>
<td>第5條新聞</td>
</tr>
<tr bgcolor = “#EEEEEE”>

<td>006</td>
<td>第6條新聞</td>
</tr>
<tr bgcolor=”#D4D0C8″>

<td>007</td>
<td>第7條新聞</td>
</tr>
<tr bgcolor = “#EEEEEE”>

<td>008</td>
<td>第8條新聞</td>
</tr>
</table>
</body>
</html>

模板檔案中使用:
{if $tbColor == “#D4D0C8″}
<tr bgcolor=”{$tbColor}”>
{assign var=”tbColor” value=”#EEEEEE”}
{else $tbColor == “#EEEEEE”}
<tr bgcolor = “{$tbColor}”>
{assign var=”tbColor” value=”#D4D0C8″}
{/if}
這一語法塊進行設定每一行的背景顏色, {assign var=”tbColor” value=”#D4D0C8″}還記的吧,是例3中設定模板內部變數的定義方法,
使用模板內置 的流程控制語法有時可以極大程度上提高程式的控制能力,下面一個範例是phpx.com中曾經有位朋友問過的,我將它作為
實例放在這裡供大家學習.

例5: 使用模板內置流程控制語法進行一行多單元格內容輸出, 也就是在視覺上smarty每記輸出幾條記錄:
================================================
example5.tpl
================================================
<html>
<head><title>一行輸出多筆記錄</title></head>
<body>
<table>
<tr>
{section name=loop loop=$News step=1}
{if $smarty.section.loop.index % 4 == 0}
</tr>
<tr>
{/if}
<td>{$News[loop].newsID}</td>
<td>{$News[loop].newsTitle}</td>
{/section}
</tr>
</table>
</body>
</html>
====================================================
example5.php
====================================================
<?php

require_once (“./public/inc/F117_Smarty.php”);

$smarty = new F117_Smarty;
$smarty->template_dir = ”./templates/”;
$smarty->compile_dir = ”./templates_c/”;
$smarty->config_dir = ”./configs/”;
$smarty->cache_dir = ”./cache/”;
$smarty->caching = false;

$array[]= array(“newsID”=>”001”, “newsTitle”=>”第1條新聞”);
$array[]= array(“newsID”=>”002”, “newsTitle”=>”第2條新聞”);
$array[]= array(“newsID”=>”003”, “newsTitle”=>”第3條新聞”);
$array[]= array(“newsID”=>”004”, “newsTitle”=>”第4條新聞”);
$array[]= array(“newsID”=>”005”, “newsTitle”=>”第5條新聞”);
$array[]= array(“newsID”=>”006”, “newsTitle”=>”第6條新聞”);
$array[]= array(“newsID”=>”007”, “newsTitle”=>”第7條新聞”);
$array[]= array(“newsID”=>”008”, “newsTitle”=>”第8條新聞”);
$smarty->assign(“News”, $array);

$smarty->display(“example5.tpl”);
?>

==================================================
example5.php輸出內容:
==================================================
<html>
<head><title>一行輸出多筆記錄</title></head>
<body>
<table>
<tr>

</tr>
<tr>
<td>001</td>
<td>第1條新聞</td>

<td>002</td>
<td>第2條新聞</td>

<td>003</td>
<td>第3條新聞</td>

<td>004</td>
<td>第4條新聞</td>

</tr>
<tr>
<td>005</td>
<td>第5條新聞</td>

<td>006</td>
<td>第6條新聞</td>

<td>007</td>
<td>第7條新聞</td>

<td>008</td>
<td>第8條新聞</td>
</tr>
</table>
</body>
</html>

說明:本來還可以優化,使得第一行不輸出一個空行的<tr> </tr>,但是學習程式,簡單為好,先就這麼用了. 在這裡說明一下:
{section name=loop loop=$News step=1}
{if $smarty.section.loop.index % 4 == 0}
</tr>
<tr>
{/if}
<td>{$News[loop].newsID}</td>
<td>{$News[loop].newsTitle}</td>
{/section}

{section}{/section}指的是一個循環部分,在下一節會有詳細的介紹,我們主要來看看這一句:
{if $smarty.section.loop.index % 4 == 0}
$smarty.section.loop指出$smarty的實例中的section段有一個叫loop的部分, 它有一個屬性叫index, 它的表示目前循環的索引值,
從0開始遞增, 我們把它%4後與0相比較,也就是說,如果目前的索引值是4的倍數,它就輸出一個</tr><tr>,否則執行下面的部分,
很簡單的就解決了一個在程式上實現起來很麻煩的事情.