Magento模板设计者入门分析

很多开发者对magento的页面显示和执行方式很模糊,没有一个整体的概念,现在这里就大概的总结一下。

一、模板

magento的模板(template)比较复杂,需要.phtml文件、.xml文件、样式文件这三种文件才能实现一个完整的模板。

二、程序是怎么实现页面的呢?

当安装了默认的magento后, Home page 的Layout 默认为2columns-right,如图一所示。

1、设计路径

默认的页面设计路径是magento\app\design\frontend\default;

当页面Layout选择”1 column”的时候,那么对应的文件是magento\app\design\frontend\base\default\template\page\1column.phtml;

当页面Layout选择”2columns-right”(2 columns with right bar )的时候,那么对应的文件是magento\app\design\frontend\base\default\template\page\2columns-right.phtml;

注意:base旧版本是default;

其它类此;

2、php的函数调用

我们看下2columns-right.phtml这个文件的内容,找到其中一个php的函数调用$this->getChildHtml(‘header’);

这个函数就是magento为了获得header的方法,这个header从哪里去获得呢?

打开magento\app\design\frontend\base\default\layout\page.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>

这里是header区块的结构,magento以block(区块)来布局页面的,一个block就是一个逻辑输出。

这个header结构调用了三个block,分别是topLinks,store_language,topMenu。

这些block从哪得到呢?

属性type=”page/html_header”,指明要从magento\app\code\core\Mage\Page\Block\Html的Mage_Page_Block_Html_Header对象里获得,代码在Header.php文件中。

以此类推,topLinks是从magento\app\code\core\Mage\Page\Block\Template的Mage_Page_Block_Template_Links对象获得,代码在Links.php文件中;

topMenu是从magento\app\code\core\Mage\Core\Block\Text中的Mage_Core_Block_Text_List对象获得,代码在List.php文件中。

3、页面视图

在Header.php文件可以看到如下代码:

class Mage_Page_Block_Html_Header extends Mage_Core_Block_Template

{

public function _construct()

{

$this->setTemplate('page/html/header.phtml');

}

...

}

在这个Block对象里,可以发现初始化的时候有一行 $this->setTemplate(‘page/html/header.phtml’)的代码;其它Block对象里都有类似于这样的初始化代码。

例如遇到$this->setTemplate(‘page/template/links.phtml’)这样的代码,到相应的magento\app\design\frontend\default\default\template\目录下,可以找到对应的html模板,可以修改对应的页面视图。

相关文章:

1、深入理解Magento – 第三章 – 布局,块和模板
https://www.onexin.net/programming/magento/depth-understanding-of-magento-chapter-iii-layout-block-and-template/

2、Magento程序结构图
https://www.onexin.net/programming/magento/magento-program-structure-diagram/

3、Magento 1.7.0.2 中文语言包发布
https://www.onexin.net/programming/magento/magento-1-7-0-2-chinese-language-pack-release/

4、magento开发必备插件列表汇总
https://www.onexin.net/programming/magento/magento-development-of-the-necessary-plug-ins-list-summary/

5、Magento多语言设置——优化前台与后台实现方法
https://www.onexin.net/programming/magento/magento-multi-language-set-methods-and-front-switch-mode/

转载请注明出处:https://www.onexin.net/programming/magento/introduction-to-magento-template-designer-analysis/

Leave a Reply

Your email address will not be published. Required fields are marked *