Magento中xml和phtml的关系

magento官方模板开发指导
magento模板开发过程中比较让人迷惑的就是magento的结构控制，在这《magento模板中XML与phtml关系》一系列的文章中，我将对此进行入门的讲解。

在magento官网模板设计教程中已经初步讲解了模版中.xml与.phtml的关系。

模板文件分别存放于app和skin文件夹。app文件夹存放的是模板的结构文件。skin文件夹存放的是模版的css信息，也就是样式文件。

 

app文件夹下的模板文件夹的结构如下图

magento的app文件夹下的模版文件结构

layout文件夹存放的是此模板的.xml文件（也就是模版的结构文件），template是.phtml模板文件。

 

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

123456789 <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文件中我们可以看到

123 <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修饰样式。

 

二、

xml和phtml是怎么配合着来生成我们的magento模版的？

本次讲解，使用magento 1.4版本，使用base中的default模板。

例子是最快速了解magento的方式了，我们来看下magento头部的搜索框，是怎么显示出来的。

 

在:app\design\frontend\base\default\layout\catalogsearch.xml 中有声明定义

1234 <default>     <reference name="header">         <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>     </reference>
然后在：app\design\frontend\base\default\template\page\html\header.phtml 中调用输出

12 <div class="quick-access">            <?php echo $this->getChildHtml('topSearch') ?>

 

我们看到在XML中有代码片段 as=”topSearch”， 然后在phtml的 getChildHtml( )的参数就是topSearch，所以啊，这就是关键点。

我们要将这个搜索从模板的头部（header）移动到模板的底部（footer）怎么办呢?

那么就先将上面的XML中的<reference name=”header”> 改成<reference name=”footer”>，

 

然后将app\design\frontend\base\default\template\page\html\header.phtml中的<?php echo $this->getChildHtml(‘topSearch’) ?>删掉将其添加到：app\design\frontend\base\default\template\page\html\footer.phtml中的适当位置。

 

这个时候我们就发现

<reference name="header"> 对应的就是app\design\frontend\base\default\template\page\html\header.phtml文件
<reference name="footer"> 对应的就是app\design\frontend\base\default\template\page\html\footer.phtml

为甚么呢？

我们看下：app\design\frontend\base\default\layout\page.xml文件中的定义这个footer和header的代码片段
12345678910111213 <PRE class=brush:xml><block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">                 <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">                     <label>Page Footer</label>                     <action method="setElementClass"><value>bottom-container</value></action>                 </block>                 <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>                 <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/> </block></PRE> <P>看这第一行代码，就说的很清楚了，name="footer" 并且template="page/html/footer.phtml"。所以这个<reference name="footer">就是在<BR> 对footer.phtm中的getChildHtml( )进行定义。