The Concept of Template

The Concept of Template

出自LifeType 中文文件計畫

在2006年10月19日 (四) 03:45由Bibicall (對話 | 貢獻)所做的修訂版本
(差異) ←上一修訂 | 當前修訂 (差異) | 下一修訂→ (差異)
跳轉到: 導航, 搜尋

模版如何運作?

前面提到過,LifeType使用Smarty引擎來產生網誌的網頁內容。也就意味著使用者可以輕易的在後台管理介面中,更換模版改變網頁的外觀。但,模版是如何運作?使用者又該如何製作屬於自己的模版呢?

開始之前必須先知道的是,所有的模版存放在LifeType架構中的哪一個位置。LifeType的模版是存放在*templates/*之下,在這個資料夾中,除了網誌可以使用的模版之外,還包含了後台頁面(admin)、摘要頁面(summary)、安裝精靈(wizard)、RSS feed頁面(rss)以及郵件通告(misc)等模版。

LifeType預設的網誌模版有三個,分別是standard、grey與blueish。以grey模版為例,在grey資料夾中,我們可以看到以下的*.template文件檔:

  • commentarticle.template
  • commentform.template
  • demosites.template
  • error.template
  • features.template
  • footer.template
  • header.template
  • main.template
  • post.template
  • postandcomments.template
  • posttrackbacks.template
  • samplerss.template
  • album.template
  • albums.template
  • resource.template
  • searchresults.template

在這16個*.template文件檔中,以粗體表示的是最基本的模版,也是必須存在的模版。這9個模版更是網誌運作與呈現不可缺少的。以下簡述9個檔案的基本功能:

  • main.template:這個檔案控制網誌的主頁面。
  • postandcomments.template:這個檔案控制網誌文章內容與迴響內容的呈現。
  • commentarticle.template:這個檔案主要用來顯示新增(或回覆)迴響時的表單。
  • posttrackbacks.template:用來顯示網誌文章的所有引用資訊。
  • error.template:顯示錯誤訊息用。
  • album.template:顯示資源中心資料夾下的檔案。
  • albums.template:與上述檔案不同之處,這個檔案室用來顯示資源中心裡所有最上層的資料夾。
  • resource.template:用來顯示檔案詳細資料。
  • searchresults.template:顧名思義,就是用來顯示網誌中搜尋結果。

看到這,或許有人會懷疑,既然只需要9個模版檔案即可,那為何又多出7個額外的檔案?這7個檔案或許不起眼,但卻是修改模版中不可缺的幫手,有了這7個檔案,讓模版的修改更加容易。

上述9個主要模版檔案中,每一個檔案都必須有完整的網頁結構,才能讓網誌正常運作。而這些網頁呈現所需的結構,有部分是一再重複的。在製作模版的過程中,如果要讓每個頁面有相同的頁首與頁尾,沒別的辦法,只能重複的執行「複製、貼上」的動作9次。若不幸中途做了點修改,那又得回頭去「複製、貼上」。

幸好,Smarty允許使用{include...}標籤在當案中匯入另一個檔案,只要在標籤中加上參數「file」,並設定好匯入檔案的路徑即可。有了這樣的功能,在製作或修改模版的時候,我們只需將會重複使用的部分寫成一個檔案,再利用{include...}標籤將其匯入LifeType的主要模版之中。

以頁首與頁尾為例子,若所有模版均使用相同的頁首(header)與頁尾(footer),那麼模版開發者只需將頁首頁尾的部分另外寫成header.template與footer.template兩個檔案,再用{include...}標籤匯入到主要的模版檔案中,方法如下:

{include file="$blogtemplate/header.template"}

...

模版內容

...

{include file="$blogtemplate/footer.template"}

有一點須注意的是,{include...}標籤中使用的路徑是相對於templates/ 資料夾的。另外,也可以使用$blogtemplate變數來表示templates/底下各個模版資料夾的名稱,這樣一來就算模版資料夾更名或搬移,也不會影響模版的運作。

利用這樣的方式,當我們修改模版頁首的呈現時,只需針對header.template修改一次,即可達到全部修改的目的。也因此,才會出現 commentform.template、post.template等檔案的出現。而這些模版中,我們已經知道header.template與 footer.template,分別控制頁面的頁首與頁尾呈現,在此簡單敘述commentform.template與post.template這兩個檔案的作用:

  • commentform.template:這個檔案主要包含了提交迴響的表格,因為也具有可重複使用的特性,因此將其獨立出來,再以匯入的方式工其他檔案使用。一般來說,這個檔案常用在postandcomments.template之中。
  • post.template:這個檔案主要包含了網誌的文章內容,一般來說,這個檔案常用在main.template與postandcomments.template之中。

(以上摘譯改寫自 LifeType英文wiki文件,下方Smarty如何產生php頁面的圖解與說明,改寫自Mark Wu的0.32 版教學投影片。)

說完了LifeType模版的基本結構,那這些模版究竟是如何運作,成為最後呈現在網頁上面的樣子?以下借用Jace Ju的Smarty入門中的Smarty樣版引擎運作示意圖,來說明LifeType模版的運作流程。 圖片連結:http://forum.lifetype.org.tw/index.php?action=dlattach;topic=1552.0;id=89;image