課程114：Smarty 樣版引擎：取得、安裝、設定、應用

課程114：Smarty 樣版引擎：版面配置

摘要：

在這個課程中，我們將以另一種角度來觀察網頁，分析網頁是由哪些部分所組成的。了解了網頁組成的成分之後，我們就可以這些部分給抽離出來，讓它成為一個獨立的檔案。再透過 Smarty樣版引擎，把各部分組合成為一個網頁。

網頁的組成：區塊

說明：

如果我們仔細觀察每個網頁，至少都可以分成以下幾個區塊：

頁首：網頁標題，主題等。
導覽：連接到網站各部分的連結。
內容：這頁網頁的內容。
頁尾：版權宣告，或其他連結與網站聯繫資料等。

要達到能夠在各個網頁中，能重複使用這些區塊，就必須將每個區塊獨立成為一個檔案。如果，要把這些區塊的檔案，組成一個網頁，我們就必須作一個檔案，作為整個網頁配置的主檔，負責指定每個區塊檔案在網頁呈現的位置。

這樣做，一開始會覺得很繁瑣，因為，一個網頁居然要使用五個檔案(四個區塊檔，加上一個網頁配置檔)來組成。的確，如果只是作一個網頁的話，使用樣版引擎，有點殺雞焉用牛刀的感覺。但是，在實務上，大部分的情況，一個網站中通常會有數十個，甚至上百個網頁配置相同的網頁。在這種情況之下，使用樣版引擎，來配置網頁的效益，就能夠突顯出來。

以下，我們就以實際的例子，來作說明。

準備工作：使用Dreamweaver MX 定義網站

使用Dreamweaver MX 定義一個 Site(名稱自定)。
在這個 Site 底下產生兩個資料夾，一個名稱為 114，一個名稱為 tpl。
在 tpl 資料夾之下，再產生一個 114 的資料夾。

產生區塊檔案：header.htm、menu.htm、content.htm、footer.htm

使用 Dreamweaver MX在 tpl/114 資料夾底下，產生這四個檔案。
去掉 <Body>(含)之前的所有標籤，以及</Body>(含)之後所有的標籤。

header.htm

<h1>國立嘉義大學圖書館</h1>

menu.htm

<table width="160" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td bgcolor="#9966FF"> <div align="center">
        <font color="#FFFFFF">主選單：</font></div></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFCC"> <div align="center">選單一</div></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFCC"> <div align="center">選單二</div></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFCC"> <div align="center">選單 N</div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFCC"><div align="center">回首頁</div></td>
  </tr>
</table>

content.htm

<p>這裡是內容區塊：</p>
<p>應該會有很多字 </p>

footer.htm

<p>版權所有：國立嘉義大學圖書館<br />
  來信請寄：<a href="mailto:webmaster@lib.ncyu.edu.tw">webmaster@lib.ncyu.edu.tw</a></p>

產生網頁配置檔：layout.htm

使用 Dreamweaver MX 在 tpl/114 資料夾底下，產生網頁配置檔。先以文字標明區塊，之後，我們會改用Smarty的語法來取代。

layout.htm

<html>
<head>
<title>{$pageTitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
</head>

<body>
<div align="center">header
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="15%">menu</td>
<td width="85%">content</td>
</tr>
</table>
footer </div>
</body>
</html>

修改網頁配置檔：layout.htm

說明：

到目前為止，我們只以文字來標明網頁配置檔中的區塊，並沒有使用 Smarty 的語法。在使用之前，我們先看一下哪些區塊，是會變動的，哪些是不會變動的。

為了使頁面風格以及瀏覽方式一致，通常在頁首、頁尾、以及導覽的部分通常是固定不變的，只有在內容區塊才會變動。

所以，在 header、footer、menu這三個文字所標明的區塊，含括的檔案，其檔名是不變的。而 content 所標明的區塊，應該隨著使用者點選而作改變；所以，這裡所含括的檔名，應該是變數。

Smarty 提供了 include 函式，讓我們可以把檔案含括進來。其格式如下：

{include file="檔案名稱"}

檔案名稱可以放絕對路徑，即實體檔案系統的絕對路徑。如，/home/lib13/public_html/tpl/114/header.htm。

也可以放相對路徑，即相對於 Smarty 物件 template_dir 屬性所定義的路徑。如，114/header.htm。

知道了哪些區塊是可變動的，哪些是固定不變的；以及知道 Smarty 的含括語法後，我們就可以修改網頁配置檔：layout.htm。

P.S. 使用 Dreamweaver MX來撰寫樣版時，注意要使用 Code View，不要在 Design View中寫 Smarty 的語法。不然，一些專屬的符號，如 { 和 }會被替代掉。

修改後的 layout.htm

<html>
<head>
<title>{$pageTitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
</head>

<body>
<div align="center">{include file="114/header.htm"}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="15%">{include file="114/menu.htm"}</td>
<td width="85%">{include file=$contentBlock}</td>
</tr>
</table>
{include file="114/footer.htm"} </div>
</body>
</html>

使用 Smarty 物件來呈現我們的網頁

說明：

樣版做好之後，我們就可以使用 Smarty 來呈現頁面。之前在課程 113 裡面，我們已經做好了一個 Page 的類別檔。在這裡我們就直接繼承這個類別，撰寫程式來呈現我們的頁面。

在你所定義的 Site 目錄底下，114 資料夾下，產生一個新檔，檔名：index.php。你可以使用 EditPlus 或 Dreamweaver MX 來編寫這個程式。

114/index.php

程式碼：

<?php
/*** 含括 Page 父類別 Page.class.php 檔案。 ***/
include_once('/home/lib13/public_html/Page.class.php');

/*** 產生 Smarty 物件。 ***/
$page = new Page;

/*** 設定樣版中的變數。 ***/
$page->assign('pageTitle', 'Smarty 網頁配置');
$page->assign('contentBlock', '114/content.htm');

/*** 呈現樣版。 ***/
$page->display('114/layout.htm');
?>

上傳檔案

你可以用 EditPlus 將 114/ 和 tpl/這兩個資料夾上傳到你的 publilc_html/目錄。或者，使用 Dreamweaver MX來上傳檔案。

使用 Dreamweaver MX 上傳 Site 的檔案時，必須先定義 Site 的 Remote Info。請參考下圖：

在 Site 中按 Connect To Remote Host按鈕之後，直接用拖拉的方式，把 114/和 tpl/ 這兩個資料夾，上傳在 public_html 目錄之下。

執行程式

使用相同的樣版，產生其他的網頁

說明：

做好一個頁面之後，我們就可以使用同樣的樣版，產生其他的頁面。只要產生新的內容區塊檔，然後，產生新的 PHP 檔，將 contenbBlock變數指定給新的內容區塊檔即可。

產生新的內容區塊檔：content1.htm

使用 Dreamweaver MX 在 tpl/114 資料夾底下，產生 content1.htm 內容檔。同樣刪掉<body>這類不必要的標籤。原始檔如下：

<p>內容區塊：</p>
<p>點選選單一的內容</p>
<p>應該也要有很多字</p>

產生 php 檔：select1.php

在你所定義的 Site 目錄底下，114 資料夾下，產生一個新檔，檔名：select1.php。做完後，上傳檔案。

程式碼：

<?php
/*** 含括 Page 父類別 Page.class.php 檔案。 ***/
include_once('/home/lib13/public_html/Page.class.php');

/*** 產生 Smarty 物件。 ***/
$page = new Page;

/*** 設定樣版中的變數。 ***/
$page->assign('pageTitle', 'Smarty 網頁配置');
$page->assign('contentBlock', '114/content1.htm');

/*** 呈現樣版。 ***/
$page->display('114/layout.htm');
?>

執行程式

練習：修改導覽區塊

請自行練習，修改 menu.htm。讓回首頁的文字連結，點選後，回到 114/index.php。點選單一，跳到 select1.php。並檢查，是否修改過 menu.htm之後，select1.php 和 index.php 的選單內容也跟著改變。

練習：增加新的 php 檔

使用之前產生 select1.php 的方式，再撰寫兩個新的 php 程式：select2.php 和 select3.php。然後，修改 menu.htm。