magento模板中XML与phtml关系(一)

magento官方模板开发指导
magento官方模板开发指导

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

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

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

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

magento的app文件夹下的模版文件结构
magento的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修饰样式。

转载表明出处:hellokeykey.com

《magento模板中XML与phtml关系(一)》有12个想法

  1. 请问上面的那个例子,
    1. header.phtml 模板文件里的getChildHtml(‘header’)是输出这个文件里的block也就是输出这个文件里定义的内容吧?
    2. 上面的那个.xml文件里的

    这两句给解释下 type是什么?name是什么?as是什么?
    第一句可以解释为type=模板文件的路径 name=模板文件名(去掉后缀) as=不晓得了
    但是为什么下面的block type不一致了呢?有点像嵌套的感觉,key给解释下吧。
    解决下这两个问题 很感谢你啊

    1. 你好,第一个问题是输出的xml中定义的内容。见下官方的对模板设计的文章,你就明白了,http://www.hellokeykey.com/magento-template-development-direction/ 此文章有提到。第二个问题,这个解释起来是一句两句的,简单说下,type是指向模块的block文件,以便其template调用响应的函数。name和as相当于css中的id与class的关系。例如第一个问题中的getChildHtml(‘header’)的header就是在xml文件中,有个地方声明的是 as=”header”或者name=”header”,才可以用getChildHtml输出。不明白的话,看下我的这个开发指导吧。

  2. 写的真好,第一遍没看明白,看了视频之后上手改了几个侧边栏之后 再看这个文章就豁然开朗了. 总结一下, PHTML 就是 我们要在页面上放哪些内容的文件,因为MAGENTO都是块级概念,也就是说MAGENTO页面上的所有的东西都是块,这些块就是在XML里定义好的, 我们把XML里的块用GETCHILDHTML命令调用就行了….是这么理解的吧…

评论已关闭。