轉載：hellokeykey.com

?

magento模板開發過程中比較讓人迷惑的就是magento的結構控制，在這《magento模板中XML與phtml關系》一系列的文章中，我將對此進行入門的講解。

?

在 magento官網模板設計教程 中已經初步講解了模版中.xml與.phtml的關系。

模板文件分別存放于app和skin文件夾。app文件夾存放的是模板的結構文件。skin文件夾存放的是模版的css信息，也就是樣式文件。

?

app文件夾下的模板文件夾的結構如下圖

?

layout文件夾存放的是此模板的.xml文件（也就是模版的結構文件），template是.phtml模板文件。

在layout的任何一個.xml文件中我們可以看到

    <block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu"/>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
</block>
  

?

<default><action> <block><reference>等標簽,這些都是在控制magento各個頁面的結構。

在template中的.phtml文件中我們可以看到

    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
........
  

?

這樣的代碼，可以看到html 并且聲明一個css的class，這樣在.phtml中就是在控制模板的樣式。定義了css的class那么在skin的css文件就有用了。 getChildHtml(‘header’)是在輸出header這個block也就是說，在.phtml文件中我們對于XML文件中聲明好的 block進行輸出，想輸出在哪個div里面就在哪個div中使用getChildHtml(‘header’)，也就是說phtml在對xml定義的結 構進行進一步的細化，并且讓css加入到模板的構建中來。

?

不要迷惑，看下總結

?

總結：

1. .xml與.phtml同樣都在控制模板的結構，但是要先在.xml中聲明下，才能在.phtml中使用getChildHtml( )函數輸出摸一個結構模塊。也就是xml在先，phtml在后。

?

2. .xml文件與phtml同樣控制文件結構，但是phtml中使用html的控制結構標簽如<div>，并且可以寫上css的類。.phtml就是一個php文件。它對模板的結構使用div等html標簽進行更詳細的排版，并且引入css修飾樣式。

?

?

今天我來繼續講下magento中xml文件與phtml文件的關系，了解這兩種magento結構文件的關系，是magento模板制作的最基礎知識。

?

本例以magento 1.4 中的base下的default模板為例

?

進入正題，我來說說xml可以做到，但是phtml做不到的事情。

?

1.定義頁面結構（1欄，2欄，3欄）

?

.xml中定義頁面結構，.phtml默認沒有此功能。在magento中默認的頁面結構有1欄結構，2欄結構，3欄結構。這個頁面結構就是在xml文件中定義的。

?

如在:app\design\frontend\base\default\layout\page.xml 中

    <default translate="label" module="page">
        <label>All Pages</label>
        <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
  

?

這個template=”page/3columns.phtml”就是在定義所有的頁面默認使用3欄結構。

?

在：app\design\frontend\base\default\layout\catalog.xml

    <!--
Product view
-->
 
    <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>
  

?

在這個文件里面<template>page/2columns-right.phtml</template>就是在跟 新<catalog_product_view translate=”label”>的頁面結構，就是將詳細產品頁更新為2欄-右欄結構，不再使用page.xml文件中所設置的3欄結構。

所以大家想改某個頁面的結構直接將這些定義結構的地方代碼換掉就行了。

?

隨便打開一個.xml文件，搜下column這個關鍵字。有的話，然后在看下外層的xml標簽，基本就知道是在設置哪個頁面的結構了，這就是一個快速學習magento模板制作的途徑。

?

by the way：對于magento開發者來說，在這些地方改下頁面結構是必要的，但是對于使用者，magento后臺的大多數編輯頁面中，都是設置layout的地方，對于使用者，可以在這些地方設置你的頁面結構。

?

2.編輯左右欄的內容，中間欄的內容

?

magento左右欄怎么添加block?這個是大多數magento模板初學者會遇到的問題，答案就是，在xml添加。在xml中聲明添加到左欄還是右欄，添加使用哪個.phtml文件。

?

看下面的siderbar

?

此廣告圖片就是在xml中添加的。

?

文件路徑：app\design\frontend\base\default\layout\catalog.xml

    <reference name="right">
          <block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
          <block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml">
              <action method="setImgSrc"><src>images/media/col_right_callout.jpg</src></action>
              <action method="setImgAlt" translate="alt" module="catalog"><alt>Keep your eyes open for our special Back to School items and save A LOT!</alt></action>
          </block>
      </reference>
  

?

<reference name=”right”>就是更新右欄

?

<block type=”core/template” name=”right.permanent.callout” template=”callouts/right_col.phtml”>就是在定義更具體的東西，我們這個廣告圖的圖片輸出，就在 callouts/right_col.phtml文件中。

?

before=”cart_sidebar”是在定義排列順序，cart_sidebar是其它block的name。

?

仿照這個例子我們就可以在magento的左右欄添加或者刪除block了。

?

3.添加css js文件

?

xml可以定義不同頁面的結構，并且可以給不同的頁面添加不同的css js文件。我們的phtml可以做到這點，但是遠沒有xml做的好。

?

如果你在magento的產品詳細頁加了一個js效果，你可以將要加載的js文件只在這個頁面加載，那么我們就要到定義產品詳細頁的頁面的xml來添加。

?

文件路徑：app\design\frontend\base\default\layout\catalog.xml

    <!--
Product view
-->
 
    <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>
        <reference name="head">
            <action method="addJs"><script>varien/product.js</script></action>
 
            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        </reference>
  

?

在<catalog_product_view translate=”label”>里面的<reference name=”head”>里面使用action標簽來添加css，js。我們仿下就好了。

?

?

我們來看看magento模板文件的XML與phtml文件以及文件結構。我突然覺得有必要說下，我將對大多數的xml文件以及phtml文件的作用做下講解。

?

本次講解使用magento1.4，模板使用base中default模板。

我們對應著XML文件和phtml文件來進行說明，按照字母順序還是說，我不太清楚的就忽略掉，我都不知道的，基本大多數人都用不到。

?

xml文件全部在：app\design\frontend\base\default\layout

phtml文件以及文件夾全部在在：app\design\frontend\base\default\template

• catalog.xml 這個是控制產品列表頁和產品詳細頁的對應于template\catalog 這個文件夾的所有phtml內容。
• catalogsearch.xml 這個是控制搜索的，有模板頭部的搜索框，高級搜索，已經搜索結果頁面。對應于template\catalogsearch這個文件夾里的所有phtml文件。
• checkout.xml 控制結賬相關頁面，如購物車頁面，購物車在邊欄的siderbar，結賬流程頁面。對應于template\checkout文件中的內容。
• cms.xml 這個既然名字是CMS，所以如果后臺的某個cms的static page頁面或者自己想自己寫個phtml的block想以siderbar的形式出現在模板邊欄中，為為甚么不在這個文件中聲明下呢。 對應的文件夾template\cms。
• contacts.xml 控制聯系我們頁面，想改這個頁面的結構，從2欄換到1欄，就要修改這個文件了，對應于template\contacts文件夾。
• customer.xml 控制登陸，注冊，忘記密碼，用戶面板頁面。用戶面板的左側的鏈接就是這里添加上的。對應于template\customer文件夾。
• directory.xml控制貨幣相關內容，默認在左欄顯示的貨幣下拉菜單就是在這個文件控制的，對應于template\directory文件夾。
• downloadable.xml是相關于可下載產品的相關內容，如用戶面板頁面左欄的鏈接，可以在這個文件中刪掉。對應于template\downloadable。
• newsletter.xml控制訂閱郵件的xml，左欄的訂閱就是在這個文件控制。對應于template\newsletter文件。
• page.xml這個是很重要的xml，首先他定義了magento默認的頁面結構，控制所有頁面默認加載的js以及css文件，定義不同頁面結 構加載不同的模板文件，等等。對應于template\page，此文件夾頁非常重要，包含magento頭部，中間部分，底部的模板文件。包含 magento所有頁面的基礎框架文件。
• poll.xml控制投票在邊欄的顯示，對應文件template\poll
• reports.xml控制最近查看和比較產品在邊欄的顯示，對應文件template\reports
• sales.xml 前臺訂單顯示的相關內容，大多是相關于在用戶面板頁的“我的訂單”里的內容。對應文件template\sales
• sendfriend.xml控制產品發送好友共享功能，發送好友頁面的結構。對應文件template\sendfriend
• shipping.xml訂單運輸的相關內容，對應文件template\shipping
• tag.xml控制產品標簽的相關內容，用戶面板的標簽，產品詳細頁的標簽，邊欄的標簽。對應文件template\tag
• wishlist.xml控制我的收藏相關功能，用戶面板的收藏，發送收藏到好友，magento頭部的我的收藏的鏈接也是在這個文件控制的。對應模板文件template\wishlist

簡簡單單的說了一遍，打開每個xml文件，看一下，基本就知道是在控制什么內容了。大家需要對各個文件有所了解。

?

PHP Cross Reference of Magento

?

http://www.8tiny.com/source/magento//nav.html?app/design/frontend/default/modern/template/page/3columns.phtml.html

?

?

magento模板中XML與phtml關系