Magento模板製做詳細教程

時間 2019-11-10

標籤 magento 模板製做詳細教程简体版

原文原文鏈接

Magento設計人員專業名詞（Magento Design Terminologies）css

爲了可以更好的理解本設計人員中文手冊，熟悉一下Magento系統中的設計方面的術語是很關鍵的。術語的這一章介紹可能對於你來講是比較新的概念，因此，您能夠利用這段時間完全的讀通他們。但最重要的，若是你不能充分把握這些概念，不要灰心，全部這些新名詞-本章僅僅向你介紹一次，在後面的章節會對這些簡單的定義進一步深刻研究和擴大。這一章介紹的術語包括：html

網站和網店（Website and Store）程序員

Magento中的一個網站（Website）是一些共享相同的客戶、訂單信息和購物車信息的商店（Store）的集合。Store是一些 Store View的集合。這些都是比較籠統的概念，咱們在確立個別特別須要的網店時用這些概念能夠很好的創建。下面有幾種肯定不一樣website, store 和store views用途的：web

方案 1

一家名爲Dubloo的公司建立了一個在線銷售平臺，它包括三個獨立的服裝商店，每一個迎合不一樣價格水平的受衆。 Dubloo公司但願三個商店可以共享全部客戶和訂單信息。在這種狀況下， Dubloo公司將有一個網站（Website），下面有三個三個商店（Store）。商店將肯定個別的價格水平商店，網站將成爲Dubloo公司的總平臺。編程

方案 2

一家名爲My Laptops要創建兩個單獨的網站，兩個都是銷售筆記本電腦，可是不一樣的價格。他們還但願每一個站點提供英文和西班牙文的選擇，每一個客戶能夠在語言選擇中選擇本身的語言。它們還須要兩個網站同步客戶和訂單信息。在這種狀況下，Store View將在網站中將肯定每一個英文和西班牙文版本。兩個網站分別是「My Laptops」和「Cheap Laptops」。緩存

方案 3

一家名爲Bongo's Instruments想建立一個在線的銷售網點。沒有其餘分支店，Bongo's Instruments就是是商店以及網站。安全

界面（Interface）app

Magento的界面（Interface）是一些主題（Themes）的集合，主題是肯定網店的外觀和前臺頁面結構的。一個界面能夠在Magento後臺爲網站級別和/或Store View級別指定（瞭解如何爲網站/商店分配一個界面）。框架

若是您指派一個在網站級別的界面，全部在這個網站下的商店將繼承此界面。你能夠進一步指定一個在Store View和商店級別的界面，能夠有效的覆蓋繼承來的網站的界面。例如你在一個名爲「John’s Pancea」的網站下經營四個不一樣的商店-經過學習下面每一個方法的效果，您能夠輕鬆地根據你的業務的需求來肯定部署設計的方法。frontend

1. 網站級別的聲明（Website-level declaration）

若是您想爲四個商店都創建一個統一的外觀和感受的設計，您將指定一個網站級別的界面，在這種狀況下，全部四個商店將繼承網站的界面。

2. Store View級別的聲明（Store view-level declaration）

若是你想每家商店都有一個單獨的外觀和感受的設計，你能夠爲每一個Store View指定一個界面，在這種狀況下，四個商店都有其獨特的外觀和感受。

主題（Themes）

Magento中的一個主題（Theme）是由佈局（Layout），模板（Template）和皮膚文件（skin文件是控制網店的顯示效果的）組成。Magento被設計成一次能夠加載多個主題的功能，所以，經過兩種類型來區分主題：

默認主題（Default theme）
每個界面都有一個主要的主題，稱之爲界面的默認主題。當你爲你的網店指定一個界面的時候，系統就會自動地尋找這個默認主題，並按照這個主題來顯示前臺。爲了自定義網店設計，您能夠修改這個主題，或新建一個非默認主題，並加載它。默認的主題必須包含全部必要的佈局，模板和皮膚，以確保網店順利運行，做爲主題層次系統中最低級的主題。
非默認主題（Non-default theme）
非默認主題能夠根據你的須要來包含或多或少的主題元素文件（Layout、Template和Skin）。這種類型的主題能夠做爲網店的臨時季節性的更改，而沒有必要創建一個新的默認主題，一般能夠經過建立的幾張圖片和更新一些的CSS來實現，例如：你能夠輕鬆地將您的網店從日常的頁面外觀變成有聖誕節氣氛的網店。

讓咱們來了解一些主題的組件：

佈局（Layout） (在app/design/frontend/your_interface/your_theme/layout/)
布局是XML文件，它的做用是定義不一樣頁面的區塊（Block）結構，以及控制頁面的META信息和網頁的編碼。佈局文件是基於每一個模塊分佈的，每個模塊擁有它本身的佈局文件。要深刻了解Layout，請閱讀佈局的介紹。
模板（Templates） (在app/design/frontend/your_interface/your_theme/template/)
模板是PHTML文件，它包含（X）HTML標籤和一些用來實現信息和功能顯示的邏輯的PHP代碼。
本地（Locale） (在app/design/frontend/your_interface/your_theme/locale/)
這些都是在每一個語言基礎上組織的簡單的文本文件，包含商店的翻譯副本。
皮膚（Skins） (在skin/frontend/your_interface/your_theme/)
皮膚是具體區塊（Blocks）中的JavaScript、CSS和圖片文件。你可能會問什麼是區塊？很好的問題，不過不用擔憂，Magento已經爲這個組件定義好了，看下一節。

區塊（Blocks）

圖 1. 結構區塊(Structural Block) (藍色區域)

圖 2. 內容區塊（Content Block） (橙色區域)

區塊（Block）是Magento用來區分系統中一系列功能，並建立一個可見的、操做方式統一的模塊化方式來管理這些功能的方式。有兩種類型的 Block，而且它們相互工做來建立輸出的內容：

結構區塊（Structural Blocks）
這些Blocks是設計成來建立網店頁面的可視結構的。例如：頭部（Header）、左邊欄（Left Column）、主體內容（Main Column）和頁眉（Footer），看圖1。
內容區塊（Content Blocks）
這些Blocks是在Structural Block中生成實際的內容的。它們是具體的每一個功能的表現塊，它們會部署Template Files到Structural Block中生成(X)HTML內容。例如：分類列表（Category List），小購物車（Mini Cart），產品標籤（Product Tags）和產品列表（Product Listing）等等就是它們本身的內容區塊，見圖2。

模板中包含模板以組織全體的(X)HTML輸入是做爲一個典型的電子商務應用，但Magento中是經過block來收集和整理網頁內容。

管理Magento主題（Working with Magento Themes）

在這章咱們將詳細講述如何管理及製做Magento模板主題

Magento主題的特色

主題’（Theme）這個詞你可能比較熟悉了。不管是做爲使用者，設計者，或二者都是，在不少Web應用程序中都會有主題這個選項。主題基本上兩種類型的用戶：首先，使用者型，在流浪商店時的美觀和實用性的角度體驗；第二，設計者型，就是參與主題的設計和建設的設計人員。

對於第一種用戶類型，一家網店的用戶體驗就是可以很好的知足瀏覽者的視覺需求和購買需求。第二種用戶類型做爲創做者，最好是可以頗有效率的創建一個新的網店主題。咱們認可，這兩個用戶類型都影響到商店的最後利潤，所以，即便是用戶體驗都不能夠忽視的。

由於咱們知道，做爲設計師你已經設計好了漂亮的圖形頁面素材（爲使用者服務），在這裏咱們只但願可以幫組你創建一個強大的主題管理功能，以最大限度地提升您的工做效率，並讓你的創意到一個新的層次。下面列出的一些要點，咱們認爲確定讓你滿意：

最大化定製能力（Maximum customization power）
經過Magento你能夠在分類頁面和產品頁面的級別來更改頁面的外觀和風格，這樣可讓你的網店更多樣化，從而給您更強大的市場營銷和促銷的能力。之前是否想象過爲網店的每一個產品都定製獨特的頁面？經過Magento，你能夠輕鬆地實現這一點，並且 Magento提供了快捷的方來來自定義每一個分類和每一個產品的頁面。
多主題支持（Multiple themes）
Magento可讓您一次加載多個主題，容許你在默認店鋪設計和臨時（季節性銷售等）設計間切換 — 這些操做都是很是簡單。
不間斷地工做（Uninterrupted workflow）
經過Magento的徹底面向對象的程序設計，全部模塊均可以經過模板中的標籤當即使用。並且由於Magento的功能豐富，你沒必要依賴程序員來爲你完成簡單的工做。Magento的社區成員不斷成長（包括Magento的官方團體），在裏面你能夠找到不少的應用知識，而不用你本身摸索。
最小化調試時間（Minimize debugging time）
設計師一般會在檢查工具發現錯誤時花費寶貴的時間檢查。校驗工具可能告訴你什麼是錯的，可是他歷來不告訴你錯誤發生在哪裏。Magento的模塊化的機制使得每一個模板都最小化 (X)HTML的數量，減小的數量意味着更容易發現錯誤所在，這樣你就能夠把精力更多放在真正最重要的地方。

真的，Magento提供最好的地方就是它提供的靈活性，在你爲網店前臺定製精彩的主題時而無需顧慮太多東西。天空纔是Magento的極限，儘可能發揮你的想象，創造一個屬於你本身的網店吧。

新建Magento主題

讓咱們首先介紹主題的相關一些目錄。打開Magento根目錄下面的目錄：

目錄1: app/design/frontend/default/default/ — 此目錄包含佈局（layout），翻譯（本地）和模板文件。
目錄2: skin/frontend/default/default/ — 此目錄包含圖片、CSS和Javascript文件。當創建主題時，這兩個目錄就是文件的工做目錄。

正如您可能已經注意到，咱們已經將主題文件分爲兩部分。分開的文件可讓你的網店更加安全，Magento在設計時也已經在程序的每一個地方提供最高的安全性。

讓咱們繼續產品這兩個目錄。

乍一看您會發如今兩個目錄中的目錄的名稱「default/default」：

目錄1: app/design/frontend/default/default/
目錄2: skin/frontend/default/default/

在這兩種狀況下，*表示界面(Interface)的名稱，並*表示主題（Theme）的名稱。因此，若是你在創建一個界面「my_interface」下的主題「my_theme」，你的工做目錄將是‘app/design/frontend/my_interface/my_theme/’。

你能夠在你的界面下保存多個主題，在編寫本手冊時，你的網店只能加載默認主題和一個另外的主題（注：Magento 的最新版本已經能夠加載多個主題）。要了解Magento是如何一次加載多個主題的，能夠閱讀主題的層次結構：這使用了兩個主題，所以，您可讓您的網店平時使用默認主題，在季節性或事件中使用的額外的主題（要閱讀有關多個主題如何工做，以及有什麼好處的，閱讀Say Hello to Multiple Themes）。

建立一個新的默認主題（Creating a new default theme）

爲了建立一個新的默認主題，首先您必須複製一個現有的默認主題做爲新主題修改的基礎。建立一個app/design/frontend /default/default/目錄的副本，並重命名（界面interface和主題theme的名稱應當是一個以小寫字母開頭的數字英文字母組合的字符串。好比‘My New Theme’ 和‘02123_my_theme’就很差，‘my_new_theme’就比較好）。程序是經過主題目錄的名稱來確認主題的。 skin/frontend/default/default也是一樣操做。就這樣子！您如今已經成功地建立了一個新的默認主題。要了解如何分配這個主題到商店上，請閱讀下面的指定一個新的主題。

建立一個新的非默認主題（Creating a new non-default theme)

圖1

當建立一個新的非默認主題，則不須要複製任何現有的默認主題目錄。最有可能的是你只要改變一些特定的文件，所以只須要複製一些須要修改的文件做爲起點。有一個規則你必定要切記並遵循，你必須保持Magento的主題文件目錄結構。例如，若是全部非默認主題在catalogo模塊下都有一個文件叫 ‘home.phtml’，在app/design/frontend/your_interface/your_non_default_theme/目錄下你將須要建立一個子目錄叫‘template/catalog ’存放該文件。當你打開一個默認Magento主題目錄(圖1),能夠看到目錄結構—請確保新的主題有一樣的結構。

爲商店指定界面和主題（Assigning interface and theme to the store）

如今，您已經建立了本身的主題（不管是默認仍是非默認），您須要將分配給您的Websit/Store，以使之得以生效。轉到Magento管理後臺（ie.www.mydomain.com/admin），而後選擇Design 配置標籤（System -> Configuration -> Design tab）。

在圖2的左上角，你能夠看到一個‘Current Configuration Scope’的下拉框。

要管理管理站點級別的設計 , 從下拉框中選擇站點的名字，而後按照下面步驟操做。
要管理管理Store view級別的設計 , 從下拉框中選擇Store View的名字，而後按照下面步驟操做。

步驟 1
在Design選項卡上，在Current package name中輸入的新主題所屬的界面（interface）名稱。若是留空Magento會自動設成‘default’。

步驟 2
在Default（在主題標題下面）中，輸入商店要加載的此新主題的名稱。若是您將此框留空， Magento會自動加載的‘default’主題（請記住，無論你在此Design中如何配置，Magento都將自動裝載名字叫‘default’的主題。若是你在後臺指定另一個主題，那麼它將優先被裝載，可是 ‘default’的主題仍然被一同裝載。在未來版本中這個策略可能被改變, 無論怎樣，目標都是讓你能徹底控制裝載到店鋪的主題）。你能夠分別裝載主題的文件類型（佈局，模板，皮膚或翻譯文件），相應處輸入主題的名稱。

步驟 3
當完成時，點擊Save Config按鈕，而後刷新網站—Yeah！如今你能夠在前臺看到新的主題了。

如今咱們已經知道如何建立和管理主題了，下面讓咱們學習Magento是如何處理這些主題的。

多主題入門（Say Hello to Multiple Themes）

注意:無限容量的主題將成爲可與即將發佈。雖然在編寫本手冊時時只有兩個主題能夠加載一次的運做幕後保持不變，您將受益於這一文件。

假期經常是網店增長銷售的好機會—客戶排隊爲他們的家人和朋友購買聖誕禮物，媽媽排隊爲他們的孩子買萬聖節服裝。爲了鼓勵顧客光顧你的店鋪，你必須仔細調整店鋪設計以適應季節性要求。像圖 3所示的店鋪沒有在聖誕節氣氛 – 其實這時的網店可能就須要一點點紅色添加吸氣，一點雪花和聖誕老人的形象 – 如圖4作的就比較好!

圖3：未經修改的設計

圖4: 你須要的設計

經過Magento你能夠爲商店處理多個主題的能力，以便在不一樣的時候使用。在店鋪載入多個主題，你能夠在日常使用普通的店面設計，在聖誕時就能夠使用聖誕主題。

經過對上面的兩個設計的仔細查看，您會發現他們有類似的基本設計。雖然圖4是聖誕主題，可是還能夠看到是普通主題的頁面結構做爲基礎。二者之間惟一真正有區別的是設計方面的，僅僅可能包括少數幾個CSS和圖像文件和稍微改變的模板文件。因爲實際上變化是輕微的，你不須要一個全新的默認主題來適應您的聖誕主題。您所須要的僅僅是替換幾個文件，讓你的商店更加好更加有趣。Magento的多個主題功能正是爲此須要創建的，你只須要點擊一下季節性主題的開關就能夠實現改變，同時也能夠維護您的默認主題。

Magento處理裝載多個主題指派所謂層次的主題僅僅是一個過程取消了多餘的文件加載只有那些居住在hierarchy.The最高層次是由您在管理的設計和配置選項卡你有能力這樣作所以將成爲功能齊全即將穩定的版本。在撰寫本文時，該等級的主題是已經決定的你，做爲Magento加載的默認'主題在系統第一次（將它放在最低等級），而後載入中的第二個主題您指定在管理（將其置於在最高等級）。

Magento經過主題被指定的層次（Hierarchy）來處理裝載的多個主題，這僅僅是一個取消在高層次的主題中已經存在的文件的多餘的文件加載。層次能夠在後臺的Design標籤中指定。在撰寫本文時，主題的層次已經決定，Magento首先加載‘default’主題（將它放在最低層次），而後載入你在後臺中指定的第二個主題（將其置於在最高層次）。

主題的層次（Hierarchy of Themes）

當您在Magento中爲店鋪指定多個主題時, 實際上你已經用到了這個層次（Hierarchy）的好處。建立主題是爲了生成使人喜好的圖形界面，那麼Magento的目標就是確保應用可以定位和正確無誤地裝載要求的主題，保證應用程序運行不出現錯誤。

例如，若是您的分類列表頁面調用‘view.phtml’（在這種狀況下，此模板成爲一個必需的文件），可是程序在高層次的主題中沒法找到該文件（注：在撰寫本手冊時，最高層次主題是你在後臺指定的，最低層次的主題是Magento自動加載的‘default’主題。在講來發布的版本中，Magent將爲您提供可以徹底控制您的主題層次的功能），它會在下一層次的主題中尋找該文件。若是這種失敗，它將繼續努力下降主題的層次尋找，直至它可以找到‘view.phtml’文件時，該就中止搜索並加載。這種方法的建築設計被稱爲fallbacks ，由於應用程序‘fall back’下一個所需文件的可能來源，以便檢索和加載它。

假如你爲店鋪指定了三個主題，每一個主題包含的文件以下：

表格 1

default	my_theme_1	my_theme_2
All required files	templates/3-col-layout.phtml	templates/3-col-ayout.phtml
	templates/header.phtml	css/base.css
	images/logo.gif
	css/base.css
	css/boxes.css

這三個主題的層次以下：

表格 2

HIGHEST	my_theme_2
	my_theme_1
LOWEST	default

仔細觀察，在表1有幾個冗餘的文件如templates/3-col-layout.phtml 和css/base.css。如今讓咱們從新排表格讓這些冗餘文件在主題之間平信排列。

表格 3

default	my_theme_1	my_theme_2
All required files
	templates/3-col-layout.phtml	templates/3-col-layout.phtml
	templates/header.phtml
	images/logo.gif
	css/base.css	css/base.css
	css/boxes.css

你可能會問：「Ok, 太好了.可是這意味着什麼？」
好, 讓我提醒你，表3中的那些文件是你看這些文件的方式，而不是Magento看這些文件的方式。

表4告訴你Magento 怎樣看待這些文件的裝載：

表格 4

default	my_theme_1	my_theme_2
All required files
		templates/3-col-layout.phtml
	templates/header.phtml
	images/logo.gif
		css/base.css
	css/boxes.css

看到了嗎？Magento是怎樣忽略層次裏那些冗餘文件和僅僅識別層次裏更高的主題的文件的。這是由於當它發現要求的文件就停止查找層次低的主題中的該文件而繼續查找尚未發現的文件。

建立本身的主題（Building Your Theme）

Magento是創建在徹底模塊化的模式基礎上的，這爲你的網店帶來無限的可擴展性和靈活性。在創建主題時這種方式就會顯現出來。在本章中，咱們將探討這意味着什麼，並教會你如何爲你的Magento店鋪創建你本身的主題。

在Magento以前你極可能已經使用過其餘電子商務程序。可能你在開發網店主題方面有必定的經驗了，可是咱們但願你拋棄以往經驗的來的全部期待，這並不意味者你要學習一個全新的語言，也不意味着你要改變你的工做流程，只是你要學習一些新的技巧來開發Magento的主題。掌握這些工具而且始終注意關注他們，你會喜歡上這種結構的。準備好了嗎？下面咱們開始介紹：

結構區塊（Structural Blocks）
內容區塊（Content Blocks）
佈局（Layout）

創建心理導向圖（Creating the Mental Note）

爲了讓您清楚地瞭解什麼是塊（block）和佈局（layout），這裏有一個心理圖片，您能夠借鑑一下：

想象一個長方體的輪廓(如圖1 – 不要一次性瀏覽整個圖品，順着下面想象下去)
想象整個輪廓被填滿。
想象如今是兩個塊，他們的輪廓疊在一塊兒。
想象如今是三個塊，他們的輪廓疊在一塊兒。
如今是四個塊，他們的輪廓疊在一塊兒。

圖1

如今咱們來看一些一個分類頁面的縮略圖

圖2

如今看看上面的縮略圖被分割的兩種狀況快照

圖3

圖4

剛纔創建的思惟導向圖給爲你在概念和真實區塊之間進行了一個平行的比較，也許你徹底糊塗了，讓我來解釋一下。

從概念角度看，圖3中的框架是結構區塊。他們是內容區塊的父區塊，他們幫助定義內容區塊在網點頁面中的顯示位置（如在圖4中）。這些結構區塊一般的存在形式爲頁眉區，左側欄區，右側欄區…等等。這有助於建立網店的視覺結構。

另外一方面，內容區塊概念上就是裝點結構區塊的獨立顏色的區塊。在一個網店內容裏，他們纔是真正的內容。內容區塊表明着頁面內的每個功能特性（好比分類列表，標註和產品標籤…等等），而且使用模板文件生成(x)HTML插入到父結構區塊裏。

佈局（Layout）工具能夠爲每一個你建立的結構區塊分配內容區塊。佈局是以XML文本文件的形式存在，能夠修改各個頁面中各個結構區塊的設計和指定顯示模板的內容區塊。事實上，經過一些佈局文件的幫助，你能夠修改網店每個頁面的視覺效果。要了解更多閱讀介紹佈局（Intro to Layouts）一章。

在Magento裏你再也不須要left_column.ext這個模板文件，取而代之的是經過管理每一個功能性基礎元素來管理模板。你能夠經過一些佈局命令載入或者卸載功能元素來控制網店頁面。

下面是Magento提供的創建主題的工具：

模板（Templates）
佈局（Layouts）
區塊（Blocks）
皮膚（Skins） (images, CSS and block-specific Javascript)

要爲Magento網店創建一個主題，下面是你要操做的其中一些步驟：

第一步：關閉系統緩存(Disable your system cache)

爲了讓Magento系統執行一個完整的過程，須要在後臺先禁用系統緩存（http://yourhost.com/admin）和System -> Cache Management。在All Cache中選擇Disable，而後點擊保存。這樣作將確保您能夠在網店中看到實時更改的反映。

第二步：肯定你網店可能使用的全部結構類型

甚至在你開始建立的商店的標記以前，您首先須要問一下本身要爲你的網店的每一個頁面結構定義好一個頁面類型。你本身可能會列一個相似於下面的清單：

主頁將使用三欄結構three column structure。
分類列表頁面使用兩欄結構並帶一個有側欄two column structure that includes a right column。
客戶頁面使用兩欄結構並帶一個左側欄two column structure that includes a left column.

骨架模板（Skeleton template）

當你完成了這個清單以後，你會爲每一個結構類型創建(X)HTML並在app/design/frontend/your_interface/your_theme/template/page/下保存這些骨架模板。一個骨架模板就是包含一個頁面的整體結構（除的塊），是爲每一個結塊區塊定義好了整體結構。

骨架模板例子：

瀏覽上面的簡單骨架模板，你會注意到每一個表現的標記中有一個PHP方法getChildHtml()?>。這就是 Magento將結構區塊加載到骨架模板中的方法，而且決定了內容區塊在商店頁面中的顯示位置。

每一個getChildHtml都會調用一個名稱<div class="header"><?=$this->getChildHtml('header')?></div>，這些名稱是在佈局中結構區塊的惟一標識。骨架模板經過布局應用到商店中。

第三步：根據功能性修剪你的(X)HTML

一旦您創建您的骨架模板，您如今須要建立的模板每一個內容塊。

Magento喜歡有意義模板

您將須要削減你的頁面的(X)HTML標記，並根據每一個標記爲頁面提供功能。舉例來講，若是你有mini-cart區的設計，此區域的標記將有用於這個區域的本身的模板文件。同時產品標籤，newsletter，註冊等...全部這些功能Magento都已經配備了，所以您能夠參考現有的模板標記來創建您的標記邏輯。

哪裏保存模板

圖 5

商店中的每一個頁面的全部標記（包含一系列的模板）都是表示一個模塊的功能。當你想修改一個頁面調用的模板，能夠他開Template Path提示。要打開這個功能，按下面操做：
1. 進入後臺，到System -> Configuration
2. 在右上角的Website/Store選擇器中選擇你的商店
3. 而後選擇左側欄的Developer標籤，並在Template Path Hints中選擇Yes
當您完成後，回到商店前臺，從新加載您的網頁，您將會看到全部模板塊的路徑。要更改標記的話，根據顯示的路徑找到並修改響應的模板。

第四步：改變佈局以適應你的設計

一旦您修改一些標記，你可能想移動一下這些模板看看這些模板修改的效果是什麼樣的。

如何找到佈局文件

要訪問佈局文件，能夠在app/design/frontend/your_interface/your_theme/layout/找到。就像模板文件同樣, 佈局文件也是基於每一個模塊的方式存儲的，這樣你就能夠方便的按模板提示來進行修改。首先，激活模板提示，刷新要修改的頁面，找尋模板提示的模板路徑。好比你想移動mini cart，參考模板路徑(例如:app/design/frontend/default/default/checkout/cart/sidebar.phtml)，用主題文件夾裏第一個文件夾名（字體加劇的那個）來尋找相關佈局文件。在這個例子裏，咱們要尋找'checkout.xml' 來修改mini cart的位置。

默認佈局（Default Layout）和佈局更新（Layout Updates）

一共有兩種佈局：默認（default）和更新（updates）。一個默認佈局(例如page.xml)是默認應用到網店每一個頁面的佈局。全部其他的佈局文件都是更新佈局，也就是在默認佈局基礎上進行響應的更新佈局。

讓咱們舉例說明一下骨架模板（skeleton template):
在默認佈局裏，你已經設置爲三欄結構，就是說，默認幾乎全部的頁面都是三欄結構。可是在產品頁面並不須要三欄，對產品頁面來講，你須要一個包括右側欄的兩欄結構佈局。爲了實現這一點，你不用理默認佈局，只要打開catalog.xml文件，你能夠在裏面修改一些你要實現包含右側欄的兩欄佈局命令。這就是所謂更新了一個佈局（updating a layout）。












<reference name="root">      <action method="setTemplate"><template>page/2columns-right.phtml</template></action></reference>

讓咱們看看另一個例子：

默認狀況下，你想訂閱newsletter區塊顯示在有側欄，但在客戶的賬戶頁面不顯示它。在這種狀況下，你能夠須要打開customer.xml 文件，在裏面你能夠刪除了newsletter內容區塊，這就讓此頁面不包括此newsletter功能。

佈局介紹（Intro to Layouts）

佈局（Layout），由其組建的表現形式來講很容易讓你覺得要使用它你首先必須學習普遍的編程邏輯知識。可是事實上，佈局只是由一些很容易學習的XML 標記組成的。經過學習一些關鍵的概念和佈局的命令，你很快就會創建了相關的信心和知識，以方便地爲你的店鋪設計結構。

圖1：

佈局(Layout)是Magento應用中的一個虛擬組件。經過修改了部分的佈局，您能夠爲店鋪頁面創建升級兼容的頁面修改。

佈局是由默認佈局和更新佈局組成，它們都是一些易於學習XML標記。經過這些佈局的命令，您能夠修改/指定的內容區塊和結構區塊的關係，並控制前臺店鋪的功能，例如能夠在具體的頁面中加載和不加載的具體Javascripts文件。

佈局文件是根據模塊分開的，每個模塊帶來了本身的佈局文件（例如' catalog.xml '是一個分類模塊的佈局文件， 'customer.xml'是客戶模塊的佈局文件...等）。這些佈局文件位於app/design/frontend/your_interface/your_theme/layout/ 中和每一個文件是進一步分開處理（見圖1），每一個處理（除了<default>）指定其在店鋪特定頁面的嵌套更新。

一些佈局文件中可能包含了<default>處理。在解析佈局文件時， Magent首先尋找分配到<default>的更新佈局處理幾乎全部的佈局文件，讀取他們的命令，在app/etc/modules/Mage_All.xml中指定。而後解析特定頁面佈局更新，最後創建一個商店的頁面。

Magento系統使用這種方式，以便無縫添加和刪除模塊而不影響其它模塊的系統。

佈局原理解析（Anatomy of Layout）

Magento中的佈局（Layout）包含一小部分的標記集合，做爲詳細說明關於程序如何創建一個頁面，如何創建它的行爲和每一個構建的區塊。最佳的佈局途徑是在每一個角度正確的劃分和使用。爲了讓您可以作到這一點，下面是一些行爲特性的佈局XML標記。

句柄（Handle）

Handle (圖1)是一個標識符，決定應用程序要如何經過嵌套的更新處理它。

若是句柄的名稱是<default>，而後應用程序知道在加載網店的幾乎全部頁面以前應該加載此特定頁面佈局的嵌套更新（咱們說'幾乎全部的'，由於一些特殊的頁面像產品圖片彈出窗口就沒有加載佈局中的<default>句柄）。

若是Magento找到<default>之外的句柄，它將按照指定的句柄中的頁面嵌套更新對頁面進行處理。例如，<catalog_product_view>包含Product View頁面的佈局更新，而<catalog_product_compare_index>包含Compare Product 頁面的更新佈局。句柄做爲設計人員設置在網店中的標識符，他不須要普遍的理解 Magento編程，也不該該須要修改。

<block>

Magento經過<block>標記決定頁面中的每一個區塊的行爲和視覺表現。在Magento中咱們已經提到了兩種類型的區塊-結構區塊（structural blocks）和內容區塊（content blocks）。區分這兩種區塊最好的方式是經過分配給它的標記屬性來區分。結構區塊一般包含屬性'as'，經過這個屬性值程序能夠與指定的區域（由getChildHtml 方法指定）中的模板聯繫。你會發如今默認佈局許多地方出現這個'as'屬性，由於默認佈局的一個性質就是是創建一個實際的佈局，在各個不一樣的頁面中的具體佈局上就能夠開始增長。例如，在默認佈局中，有像‘left’、‘right’、‘content’和‘footer’這些結構區塊。並非說這些區塊不能存在於正常的佈局更新中，但咱們爲何不首先在默認佈局中創建這些結構區塊，而後在後面每一個具體的頁面基礎上添加內容呢？讓咱們進一步挖掘<block>的現有屬性。

type – 這是模塊類的標識符，它定義了區塊的功能。此屬性不該該被修改。
name – 這是名稱，其餘的區塊能夠經過此名稱引用此區塊（看圖3）。
before (and) after – 這兩種方法決定內容區塊在結構區塊中的位置。before="-" 和 after="-"這樣的命令標誌此區塊的位置是一個結構區塊的最上方或最下方。
template - 這個屬性指定的值決定了此區塊的功能是使用哪一個模板。例如，若是這個屬性值指定了'catalog/category/view.phtml'，程序就會載入‘app/design/frontend/template/catalog/category/view.phtml’ 模板文件。要了解佈局是如何經過模板執行的，閱讀分步指南建設一個主題。
action – <action> 是用來控制前臺的功能的，如加載或不加載一個JavaScript。一套完整的action方式將很快推出，但此時的最佳的學習途徑是瞭解現有的佈局更新上面的不一樣Action方法。
as – 此屬性指定模板文件中會調用那個區塊。當您在模板中看到getChildHtml(' block_name ')的PHP方法，能夠確定它指的是引用屬性'as'的值爲' block_name '的區塊。 (例如：在骨架模板中的方法<?=$this->getChildHtml('header')?>是調用<block as=「header」>)

<reference>

<reference>是用來引用另外一個區塊。要引用靈位一個區塊，在內部的更新將應用於與其關聯的<block>（見圖 3）。

要使用引用，能夠經過區塊中的‘name’屬性值引用。此屬性的指向標籤中'name'屬性。因此，若是你使用<reference name="right">，響應的區塊名稱將是<block name="right">。

圖3：

XML的規則（Rules of XML）

若是你不熟悉XML，在遇到Magento中基於XML的佈局更新，您可能會對此規則有一兩個問題，您必須按照此規則修改XML文件。你要記得關於XML的是，當一個標籤打開後，它必須繼之以一個結束標記（<xml_tag></xml_tag>）或自我結束（<xml_tag/>），跟(X) HTML文件的標籤同樣。

圖4：

快速學習的例子（Quick Exercises to Get You Started）

就像其餘新的知識，最好的學習方法就是經過例子來學習。爲了你可以快速的學會使用佈局，下面準備了兩個Magento的聯繫，在進行此例子以前你要準備好Magento的默認主題。

要學習這兩個例子，能夠看這裏

到此你已經閱讀完了Magento設計人員手冊。咱們但願你已經學習到了設計Magento模板系統的相關知識。咱們也但願在本站的Magento論壇中看到你的學習經驗交流，在論壇中你能夠跟社區的其餘成員一塊兒分享Magento的相關經驗，歡迎你的加入。