Joomla!1.0.12網站建置2－安裝佈景主題樣板

版本：2008/07/05 V1.0.1

作者：簡睿
版權：歡迎轉載，但請註明作者與來源連結

Joomla!網頁的外觀是使用樣板（Templates）來管理的，只要更換樣板，就能把網頁的樣式與呈現都改變掉，在本文我用Free的樣板：JSN Epic Free 2.0來示範如何輕易的變更網站的外觀。

下載資訊

• JSN Epic Free 2.0
• 商業使用必須購買PRO版本（美金25元）

將檔案下載並解壓縮到暫存目錄後，可以發現有兩個子目錄：for_joomla_10是給Jomla! 1.0.x使用，而for_joomla_15則是給Joomla!1.5使用，我們使用的是1.0的版本。首先要安裝的是擴充模組exmenu（Extended Menu），用來擴充選單功能的套件。

我們可以把Jommla!的模組（Modules）視為Blog系統裡的側邊欄位（或稱插入欄位、自由欄位），不同的模組會以不同的樣式顯示在前端的網頁裡。Joomla!另一個重要的元件是選單，透過選單我們才能建立各個網頁之間的連結。下列步驟複製已經存在的mainmenu而新增一個選單toolbarmenu：

1. 管理區功能表→【選單】→【選單管理】
2. 點選「mainmenu」，再按右上方的〔複製〕

1. 新選單名稱：toolbarmenu
2. 新模組名稱：toolbarmenu

Joomla!預設的選單模組是「mod_mainmenu」，它的功能較為簡單，我們可以上載擴充模組「exmenu」來取代預設的選單模組。這裡要能分辨選單和選單模組的差異，選單模組是把選單呈現在前端網頁的設定，二者不要混淆。

首先將jsn_epic_free_2.0_unzip.me.first.zip解壓縮，我們需要的檔案是解開的for_joomla_10mod_exmenu.zip。請依下列步驟來安裝exmenu模組：

安裝exmenu模組

1. 登入管理區後，點選功能表【新增或移除程式】→【模組】，表示要新增模組。
2. 先用〔瀏覽…〕找到 上述下載來的mod_exmenu.zip檔案後，再按〔上傳檔案 ＆ 安裝〕
3. 稍待一會後就會出現安裝資訊的繼續網頁，按「繼續…」



4. 在新增模組網頁往下捲動能看剛安裝的mod_exmenu模組的話，就是安裝成功了。由此例可以了解模組的名稱固定皆以 mod_ 開頭。

新增兩個Extended Menu模組

在一個Joomla!的網頁裡我們可以同時建立多個選單與選單模組，因此我們可以複製mod_exmenu再針對複製後的新模組來修改。複製mod_exmenu的步驟如下：

1. 在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」
2. 按右上方的〔複製〕圖示
3. 在「Extended Menu」下方會出現「Copy of Extended Menu」
4. 點擊「Copy of Extended Menu」連結以進入本項目的設定網頁，依下列指示修改欄位：

1. 標題：修改成此項目的標題，如「Ext Toolbar選單」
2. 版面位置：toolbar
3. 已發佈：變更成「是」
4. Menu Name：在此處指定要合用的選單代碼，請先選用「toolbarmenu」
5. 按右上方的〔儲存〕將上列變更儲存起來

再建立另一個名為「Ext 主選單」的Extended Menu模組：

1. 在功能表裡找到【模組】→【網站模組】→勾選「Extended Menu」
2. 按右上方的〔複製〕圖示
3. 在「Extended Menu」下方會出現「Copy of Extended Menu」
4. 點擊「Copy of Extended Menu」連結以進入本項目的設定網頁，依下列指示修改欄位：

1. 標題：修改成此項目的標題，如「Ext 主選單」
2. 版面位置：left
3. 已發佈：變更成「是」
4. Menu Name：在此處指定要合用的選單代碼，請先選用「mainmenu」
5. 按右上方的〔儲存〕將上列變更儲存起來

安裝新的佈景主題

Joomla!的模組分成網站與管理區兩大類，分別用來設定前端網站和後端管理區的佈景。管理區的樣板是管理人員在使用的，現有的應該足夠使用，建議不要修改，只要變更一般訪客會看到的前台網頁樣板即可。以下為新增JSN Epic Free 2.0佈景樣板到Jommla!前端網頁的步驟：

1. 由Joomla!管理區功能表→【安裝或移除程式】→【佈景主題 – 網站】進入佈景主題維護網頁
2. 按〔瀏覽〕並找到要上傳的for_joomla_10jsn_epic_free_2.0_j10.zip，
   選取好後按〔上傳檔案 ＆ 安裝〕
3. 看到上傳 「template – 成功」字樣後按〔繼續 …〕
4. 點選「JSN_Epic_Free」後按右上方的〔預設〕，以啟用此佈景主題
   
5. 重新整理前端網頁，網站已經套用新的佈景樣板了

依新佈景來設置網站

安裝網站的小圖示

網站小圖示指的是顯示在瀏覽器網址左側的圖形，我們可以依下列步驟把自己設計的圖示顯示在自己的網站上：

1. 使用圖示製作工具產生16px X 16px的.ico檔案，檔名固定為favicon.ico
2. 把favicon.ico複製到「Joomla!安裝目錄images」資料夾裡
3. 如果重新整理後看到的圖示仍未改變的話，先清除瀏覽器的暫存檔案後再檢視應該就OK了

設定上方的標題區

變更Logo圖示

1. 我們先使用功能表→【網站】→【媒體管理者】新增一個存放圖檔的新目錄（如建立JERRY目錄），再把要做為網站首頁Logo的圖檔上傳到此目錄裡
2. 再由【網站】→【佈景主題管理】→【網站佈景主題】點選「JSN_Epic_Free」後按右上方的〔編輯HTML〕
3. 網頁顯示jsn_epic_free/index.php的檔案內容，找到$logo_path後，將其路徑修改成新增目錄的Logo檔名

    將 $logo_path = "templates/jsn_epic_free/images/logo.png";
   改成 $logo_path = "images/JERRY/logo.png";
   

4. 依新的logo圖檔的尺寸大小修改$logo_width與$logo_height。修改後記得按右上方的〔儲存〕
5. 當然直接用文書編輯程式修改樣板的index.php是更快的方法，檔案完整路徑是c:\xampp\htdocs\Joomla目錄\templates\jsn_epic_freeindex.php

增加Suckerfish選單

接著在Logo圖形下方加入下拉式功能選單。

1. 由管理區功能表→【模組】→【網站模組】找到先前建立的「Ext Toolbar選單」，點擊以進入設定網頁
2. 顯示標題：否
3. 版面位置：toolbar
4. Menu Class Suffix：修改成「-suckerfish」
5. Expand Menu：是
6. 確認「Enable Menu Template」為「是」

迄今的成果如下圖所示，中間的黑色長條就是「toolbar」區，顯示的是「Ext Toolbar選單」模組：

增加圖片展示區

我們準備在標題區加入圖片展示區域，要使用的是JSN ImageShow模組。

1. 由http://www.joomlashine.com/index.php?option=com_docman&task=doc_download&gid=3&Itemid=39下載JSN ImageShow Free模組
2. 由管理區功能表→【新增或移除程式】→【模組】上傳並安裝mod_jsn_imageshow_free_1.0.6_j10.zip
3. 由【模組】→【網站模組】裡找到JSN
   ImageShow Free點擊之以進入設定網頁

1. 顯示標題：否
2. 版面位置：header
3. 已發佈：是
4. Height(px)：250
5. Image
   Folder：預設是/images/stories，我們可以用媒體管理建立新的目錄，再將之改成新的目錄（如images/photo，實體路徑是c:\xampp\htdocs\Joomla目錄\images\photo），要展示的圖片即存入指定的目錄裡；JSN ImageShow
   Free版本最多只能顯示10個圖片，若需要更多功能則請購買PRO版本
6. 把圖片複製到images/photo裡後重整前端網頁就能看到圖片的展示特效了。在設定網頁裡有更多的設定請自行測試、研究。

設定左方側邊欄位

變更主選單樣式

JSN Epic樣板有三種選單格式：Suckerfish、BulletTree與DivBar，Suckerfish
menu在前文已出現過，現在再來設定BulletTree式的選單樣式：

1. 管理區功能表→【模組】→【網站模組】，找到「Extended Menu」後複製成「Ext 主選單」
2. 修改「Ext 主選單」模組：

1. 顯示標題：否
2. 版面位置：left
3. Menu Class Suffix：-bullettree
4. Module Class Suffix：-box box-grey
5. Expand Menu：否
6. 按右上方的〔儲存〕

變更登入表單樣式

1. 在【模組】→【網站模組】裡點選「登入表單」模組
2. 變更下列欄位的設定值：

1. 模組CSS字尾：-box box-green icon-user
2. 按右上方的〔儲存〕

變身前	變身後

設定右方側邊欄位

變更投票樣式

1. 在【模組】→【網站模組】裡點選「RSS新聞供稿」模組
2. 變更下列欄位的設定值：

1. 模組CSS字尾：-box box-blue icon-selection
2. 按右上方的〔儲存〕

變身前	變身後

停止發佈不需要的模組

再由【模組】→【網站模組】裡把不需要的mod_mainmenu的所有模組都停止發佈，操作後前端網頁裡就看不到這些預設的選單了；找出所有mod_mainmenu模組的方法是由右上方的「- 選擇類型 -」裡選取mod_mainmenu。

再將「新聞快報」模組的版面位置由top改為right。

最後成果

最後的網頁成果如下或拜訪http://jdev.tw/joomla檢視(Sorry, 網站搬家後已無Demo站了)：

##

類似主題的文章

• 2009/11/22 [WordPress] 在插頁寫PHP的外掛：EXEC-PHP，讓行動版網頁顯示訪客統計 (0)
• 2008/12/20 [WordPress] 顯示網頁的資料庫查詢次數與執行秒數 (0)
• 2008/07/13 安裝Joomla! 論壇元件FireBoard (2)
• 2008/07/13 進階點的統計元件：JoomlaStats (0)
• 2008/07/11 解決Joomla! 突然出現的鎖定圖示 (0)
• 2008/07/06 Joomla! 1.0.12網站建置4－啟用統計模組 (1)
• 2008/07/05 Joomla! 1.0.12網站建置3－如何預覽版面位置 (0)
• 2008/06/28 Joomla! 1.0的系統目錄結構 (0)
• 2008/06/22 Joomla! 1.0.12網站建置 （多圖） (0)
• 2008/06/20 JEvents中文化修改 (0)

標籤: CMS, Joomla, PHP