Image Credit: Chiara Aliotta and Helvecio Da Silva
複習一下:佈景主題的檔案分布
Joomla! 佈景主題相關檔案位於網站根目錄的「templates」資料夾,各佈景主題存放在以佈景主題為名的子資料夾。以預設網站佈景主題「Protostar」為例,相關檔案位於「templates/protostar」。
Joomla! 佈景主題有三個重要的運作檔案,分別是:
- index.php:網站首頁檔案,載入佈景主題需要的各項資源及定義。(頁面編碼、樣式定義、模組區塊規劃、運作框架等)
- templateDetails.xml:記載佈景主題所使用的檔案、資料夾資訊,以及設定參數。
- template.css(位於「css」資料夾中):定義網站畫面中各元素(文字、選單、按鈕等)所使用的 CSS 樣式。
從手冊資源獲得修改資料
還記得阿寶提過,付費佈景主題的優點之一是「提供參考文件」嗎?以 JoomlaShine 為例,該公司提供如何自訂佈景主題的「Customization Manual」手冊,你可以透過此手冊快速找到想要修正的位置,節省時間。
▲JoomlaShine 提供的 Coustmization Manual 文件關於 template.css 的說明。
利用瀏覽器功能或外掛/純文字編輯器找出樣式修改處
如果你使用的佈景主題來自免費佈景主題資源網站,可能就沒有上述參考資料,這個時候該怎麼辦?
主流瀏覽器可透過內建功能,或是新增外掛的方式分析網站畫面的顯示結構,你可透過這類工具找到要修改的檔案(通常是 css/template.css)以及位置。
▲Google 瀏覽器(Chrome)可透過「檢查元素」功能分析畫面元素所使用的樣式關聯檔案及位置。
有些佈景主題使用自製的顯示框架顯示網站畫面,為了加速顯示速度會使用快取機制負責樣式輸出,你在檢查畫面顯示元素時會發現像是「48dc35cd1fc6c745bb.css.php」之類的暫存樣式檔案。
面對這類看不到原始樣式檔案的情況,可透過純文字編輯器的「檔案內搜尋」功能,將搜尋位置指向佈景主題資料夾,以關鍵字方式(例如樣式的顏色)找到有關的檔案。
什麼是佈景主題覆寫?
在 Joomla! 網站中運作的擴充套件,不論是元件、模組、還是外掛,都會有個檔案負責運作結果的規劃,阿寶稱之為「版型檔案」(layout)。如果你具備 HTML/CSS/PHP 知識,覺得某個擴充套件呈現的方式需要修改,原則上修改套件的版型檔案就能完成。
但是你知道的,Joomla! 會定期釋出更新版本來修復系統問題或新增功能,如果釋出的更新檔案包含你所更動過的版型檔案,那麼你的心血在更新過後不就被覆蓋掉了?
為了不讓以上狀況發生,也為了管理上的方便,你可以依照指定的方式將版型檔案放在佈景主題資料夾中,讓擴充套件依照你的規劃取代原有版型呈現畫面,這種作法就稱為佈景主題覆寫(template override)。
Joomla! 擴充套件版型檔案位置
在說明佈景主題覆寫步驟之前,瞭解一下擴充套件的版型檔案位置。你會在 Joomla! 擴充套件的程式資料夾中找到名為「tmpl」的子資料夾,版型檔案就在這裡。
元件型態的擴充套件具備多種運作類型,版型檔案及資料夾先包含在運作類型為名的資料夾,然後再歸類在「Views」資料夾。以下舉例說明模組、外掛、元件的預設版型檔案路徑:
- 「登入」模組的版型檔案:modules/mod_login/tmpl/default.php。
- 「頁面導航」外掛版型檔案:plugins/content/pagenavigation/tmpl/default.php。
- 內容元件運作類型「文章全文」的版型檔案:components/com_content/views/article/tmpl/default.php。
利用「先佈景主題,後套件本身」規則,實現佈景主題覆寫
本文一開始阿寶曾說「不要直接修改擴充套件的版型檔案」,除了擔心系統更新可能覆蓋你的成果之外,在檔案管理上也會有狀況:修改版型檔案數量一多,管理複雜度會等比級數提升。
想像一下:你為了讓網站畫面更符合心中想要的樣子,修改了三個元件、五個模組及兩個外掛的版型檔案。如果沒有額外註記,一個月後你還記得修改了哪些?如果要將版型檔案另做備份,又要到哪裡備份,備份什麼?
你會在佈景主題的資料夾中找到名為「html」的資料夾,在商業佈景主題中,你會在這個資料夾中看到像是「com_contact」、「com_content」、「mod_menu」等,以擴充套件為名的資料夾。
▲付費佈景主題會為常見擴充套件設計版型檔案,以利與佈景主題相配合。
Joomla! 系統在顯示套件運作結果時,會先到正在使用的佈景主題「html」資料夾,看看有無對應的版型檔案,如果沒有才使用擴充套件自己的版型檔案,顯示運作畫面。
透過將版型檔案放在佈景主題「html」資料夾的方式,你能以自己的版型規劃取代擴充套件的原先規劃,避開跟擴充套件混雜在一起時,容易被覆蓋或是管理不便的問題,這就是佈景主題覆寫運作的方式及好處。
你會在元件或是模組的編輯畫面中看到「選擇版面」選項,這裡看到的「預設」項目意指會使用「default.php」檔案規劃的版型。當你將自訂的版型檔案儲存在相同路徑時,將會在這個選項中看到自訂版型列在其中提供選擇。
#圖說:
▲修改 default.php 更改預設版型,或是另存檔案選擇。
透過佈景主題管理建立自訂版型檔案
瞭解擴充套件的版型檔案位置,也知道佈景主題負責覆寫版型規劃的資料夾及存放格式,那麼是不是該利用檔案管理程式,去擴充套件資料夾複製版型檔案?Joomla! 3 有方便且快速的方法。
還記得在佈景主題管理畫面中,點選佈景主題樣式名稱後開啟的檔案管理介面嗎?在這個畫面中有個叫做「建立覆蓋」的功能分頁。你可在這個畫面點選你要自訂版型的擴充套件項目,Joomla! 就會幫你將版型檔案複製一份到佈景主題的「html」資料夾,快速且不遺漏,方便吧?
▲Protostar 佈景主題「html」資料夾中預設存在的版型檔案。
▲在佈景主題「樣式」畫面點選「Protostar」,然後在「建立覆蓋」分頁畫面中點選「com_search – search」項目。
▲畫面顯示「成功建立覆蓋」訊息,在佈景主題「html」資料夾新增擴充套件的版型檔案。
▲回到 Protostar 佈景主題的 html 資料夾,搜尋元件所使用的版型檔案已按格式建立完成,可以動手修改了。