如何新增Joomla樣板(template)

joomla網頁主要是由樣板html及後台資料所組合而成的,可先由photoshop、Dreamviewer等軟體製作好畫面並切好成一區塊一區塊的的,再由joomla Module來控制輸出資料狀況,這就是樣板樣生成網頁的方式。

Joomla安裝完成後會有幾個樣板範例,可由這幾個範例來做延伸,下圖是安裝完後的首頁內容。

joomla安裝後預設樣板資料

可以把網頁內容分成數個區塊,每一個區塊的資料都是由joomla的module對應所產生的內容。

joomla樣版切片




樣板放置的位置為joomla安裝目錄下templates裡,每一個樣板都有自己的目錄名稱,joomla在有安裝範例樣資料的狀況下,使用rhuk_milkyway做為其預設樣板。

joomla rhuk_milkyway樣板位置

可由joomla選單上,選擇Template Manager來設定使用的樣板。

joomla後台Template Manager樣板控制器

joomla後台Template Manager樣板控制預設樣板

在樣板目錄下有二個檔案比較重要,一是index.php,此為樣板的內容,而另一是templateDetails.xml,此檔案定義了在樣板要使用的模組、內容及參數等。

joomla樣板設計需要之檔案

打開templateDetails.xml,可定義其

  • 樣板名稱name
  • 建立樣板日期creationDate
  • 樣板作者名稱author
  • 作者電子郵件authorEmail
  • copyright資訊copyright
  • 版權license
  • 版本version
  • 描述description

等等等

joomla樣板宣告

其中files裡內容需提供所有在樣板會使用到的內容,包含php、html、圖片、css及javascript等,而在positions裡則需告知要對應及使用的模組有那一些,可由後台新增相對應內容來顯示資料。

joomla templateDetails.xml內容

再來用一個簡單的例子說明如何把資料對應到樣板再輸出成html顯示於使用者端。

下圖Latest News及Popular為二塊資料顯示區。

joomla樣版資料顯示

打開index.php,內容的對應可使用以下語法

<jdoc:include type=”modules=” name=” templateDetails.xml裡positions名稱” />

可輸出positions為user1及user2二個的內容,其中user1為Latest News區塊資料而user2為Popular區塊資料。

joomla樣板設計

建立資料內容,可由joomla後台Extensions->Module Manager來管理及建立資料。

joomla 模組管理

由上方New按扭來增加需要的模組內容。

joomla新增模組

在建立module時,Position需選擇在templateDetails.xml定義之名稱,就可以連接資料與網頁內容了。

joomla設計樣板模組資料對應

其它補充:

在index.php建立時在header之前之內容,可以自訂需要載入之css及javascript等

joomla樣柀表頭內容

網頁主要的內容,也就是每頁的文章顯示則由

<jdoc:include type=”component” />

來顯示其內容資料

joomla每頁文章




發表迴響