转载:hellokeykey.com
magento模板开发过程中比较让人迷惑的就是magento的结构控制,在这《magento模板中XML与phtml关系》一系列的文章中,我将对此进行入门的讲解。
在magento官网模板设计教程 中已经初步讲解了模版中.xml与.phtml的关系。
模板文件分别存放于app和skin文件夹。app文件夹存放的是模板的结构文件。skin文件夹存放的是模版的css信息,也就是样式文件。
app文件夹下的模板文件夹的结构如下图
layout文件夹存放的是此模板的.xml文件(也就是模版的结构文件),template是.phtml模板文件。
在layout的任何一个.xml文件中我们可以看到
top-container
在template中的.phtml文件中我们可以看到
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的控制结构标签如
今天我来继续讲下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 中
这个template=”page/3columns.phtml”就是在定义所有的页面默认使用3栏结构。
在:app\design\frontend\base\default\layout\catalog.xml
page/2columns-right.phtml
在这个文件里面page/2columns-right.phtml就是在跟 新
所以大家想改某个页面的结构直接将这些定义结构的地方代码换掉就行了。
随便打开一个.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
images/media/col_right_callout.jpg Keep your eyes open for our special Back to School items and save A LOT!
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
page/2columns-right.phtml js_css calendar/calendar-win2k-1.css js calendar/calendar.js js calendar/calendar-setup.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
简简单单的说了一遍,打开每个xml文件,看一下,基本就知道是在控制什么内容了。大家需要对各个文件有所了解。
http://www.8tiny.com/source/magento//nav.html?app/design/frontend/default/modern/template/page/3columns.phtml.html