深入理解Magento-3布局，块和模板

我们接着研究Magento。根据我们第二章讲的Magento MVC的架构，我们接下来应该讲模型（Model），但是我们跳过模型先来看布局和块。和一些流行的PHP MVC架构不同的是，Magento的执行控制器不直接将数据传给试图，相反的视图将直接引用模型，从模型取数据。这样的设计就导致了视图被拆分成两部 分，块（Block）和模板（Template）。块是PHP对象，而模板是原始PHP文件，混合了XHTML和PHP代码（也就是把PHP作为模板语言 来使用了）。每一个块都和一个唯一的模板文件绑定。在模板文件phtml中，“$this”就是指该模板文件对应的快对象。
让我们来看一个例子 File: app/design/frontend/base/default/template/catalog/product/list.phtml

你将看到如下代码

< ?php $_productCollection=$this->getLoadedProductCollection() ? >  
< ?php if(!$_productCollection->count()): ? >  
< p class="note-msg" >< ?php echo $this->__('There are no products matching the selection.') ? >< /p >  
< ?php else: ? >  
 

这里“getLoadedProductCollection”方法可以在这个模板的块对象“Mage_Catalog_Block_Product_List”中找到 File: app/code/core/Mage/Catalog/Block/Product/List.php

...  
public function getLoadedProductCollection()  
{  
    return $this->_getProductCollection();  
}    
...  

块的“_getProductCollection”方法会实例化模型，并读取数据然后返回给模板。

嵌套块
Magento把视图分离成块和模板的真正强大之处在于“getChildHtml”方法。这个方法可以让你实现在块中嵌套块的功能。顶层的块调用第二层的块，然后是第三层……这就是Magento如何输出HTML的。让我们来看一下单列的顶层模板 File: app/design/frontend/base/default/template/page/1column.phtml

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >  
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="< ?php echo $this->getLang() ? >" lang="< ?php echo $this->getLang() ? >" >  
< head >  
< ?php echo $this->getChildHtml('head') ? >  
< /head >  
< body< ?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ? > >  
< ?php echo $this->getChildHtml('after_body_start') ? >  
< div class="wrapper" >  
    < ?php echo $this->getChildHtml('global_notices') ? >  
    < div class="page" >  
        < ?php echo $this->getChildHtml('header') ? >  
        < div class="main-container col1-layout" >  
            < div class="main" >  
                < ?php echo $this->getChildHtml('breadcrumbs') ? >  
                < div class="col-main" >  
                    < ?php echo $this->getChildHtml('global_messages') ? >  
                    < ?php echo $this->getChildHtml('content') ? >  
                < /div >  
            < /div >  
        < /div >  
        < ?php echo $this->getChildHtml('footer') ? >  
        < ?php echo $this->getChildHtml('before_body_end') ? >  
    < /div >  
< /div >  
< ?php echo $this->getAbsoluteFooter() ? >  
< /body >  
< /html >  

我们可以看到这个模板里面很多地调用了“$this->getChildHtml(…)”。每次调用都会引入另外一个块的HTML内容，直到最底层的块。

布局对象
看到这里，你可能有这样的疑问
Magento怎么知道在一个页面上要用那些块？
Magento怎么知道哪一个块是顶层块？
“$this->getChildHtml(…)”里面的参数是什么意思？块的名字吗？
Magento引入了布局对象（Layout Object）来解决上面的那些问题。布局对象（或者说布局文件）就是一个XML文件，定义了一个页面包含了哪些块，并且定义了哪个块是顶层块。
在第二章的时候我们在执行方法（Action Method）里面直接输出了HTML内容。现在我们要为我们的Hello
World模块创建一个简单的HTML模板。首先我们要创建如下文件 app/design/frontend/default/default/layout/local.xml 包含以下内容

< layout version="0.1.0" >  
    < default >  
        < reference name="root" >  
            < block type="page/html" name="root" output="toHtml" template="../../../../../code/local/Magease/Helloworld/simple_page.phtml" / >  
        < /reference >  
    < /default >  
< /layout >   

再创建如下文件 app/code/local/Magease/Helloworld/simple_page.phtml 包含以下内容

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >  
< html xmlns="http://www.w3.org/1999/xhtml" >  
< head >  
    < title >Untitled< /title >  
    < meta name="generator" content="BBEdit 9.2" / >  
    < style type="text/css" >  
        body {  
            background-color:#f00;  
        }  
    < /style >  
< /head >  
< body >  
< /body >  
< /html >  

最后，我们要在执行控制器里面调用布局文件，开始输出HTML。修改执行方法如下

public function indexAction() {  
    //remove our previous echo  
    //echo 'Hello Index!';  
    $this->loadLayout();  
    $this->renderLayout();  
}  

清空Magento缓存，访问URL “http://exmaple.com/helloworld/index/index”。你应该看到一个纯红色背景的页面。这个页面的源代码应该和我们创建的文件“simple_page.phtml”一模一样。

究竟是怎么回事呢？
也许你看到这里一头雾水，没关系，我们来慢慢解释。首先你得安装一个 Layout Viewer 模块，这和我们第一章讲的 Config Viewer 模块很相似，都是查看Magento的内部信息。安装完这个模块之后【译者注：你需要参照第一章的内容，为这个模块创建“app/etc/modules/Magease_Layoutviewer.xml”】，打开如下URL http://example.com/helloworld/index/index?showLayout=page 你看到的是你正在请求的页面的布局文件。它是由< block / >，< reference / >和< remove / >组成的。当你在执行方法中调用“loadLayout”时，Magento会做如下处理生成这个布局文件为每一个< block / >和< reference / >标签实例化一个块对象。

块对象的类名是通过标签的name属性来查找的。这些块对象被存储在布局对象的_blocks数组中如果< block / >标签包含了output属性，那么这个块的名字和output属性的值会被添加到布局对象的_output数组中然后，当你在执行方法中调用“renderLayout”方法是，Magento会遍历_output数组中所有的块名字，从_blocks数组中获得该 名字的块，并调用块对象中使用output属性的值作为名字的函数。这个函数往往是“toHtml”。这个output属性也告诉Magento这里就是 输出HTML的起点，也就是顶层块。【译者注：直接阅读Layout类的代码应该比较容易理解这里的逻辑 File: app/code/core/Mage/Core/Model/Layout.php

public function getOutput()  
{  
    $out = '';  
    if (!emptyempty($this->_output)) {          
        foreach ($this->_output as $callback) {  
            $out .= $this->getBlock($callback[0])->$callback[1]();  
        }  
    }  
    return $out;  
}  
 

从这里我们也可以看出，一个页面的布局文件时可以拥有多个顶层块。
下面我们要讲解块对象是如何被实例化的，这个布局文件时如何被生成的，最后我们将动手做一个例子来实践这一章讲的内容。

实例化块对象
在布局文件中，< block / >和< reference / >标签有一个“type”属性，这个属性其实是一个URI

< block type="page/html" ...   >
< block type="page/template_links"  > 
 

Magento就是通过这个URI是用来查找块对应的类名。这个URI分为两部分，第一部分“page”是用来在全局配置中查找一个基本类名，第二部分“html”或者“template_link”将被添加到基本类名后面生成一个具体的将被实例化的类名。
我们以“page/html”为例。首先Magento在全局配置中找到节点 /global/blocks/page 有以下内容

< page >  
    < class >  
        Mage_Page_Block  
    < /class >  
< /page >  

这里我们拿到了一个基本类名“Mage_Page_Block”，然后添加URI的第二部分“html”到基本类名后面，我们就得到最终的块对象的类名 “Mage_Page_Block_Html”。块的类名在Magento中被称为“分组类名”（Grouped Class Names），这些类都用相似的方法被实例化。我们将在以后的章节中详细介绍这个概念。
< block / >和< reference / >的区别
我们上面提到< block / >和< reference / >都会实例化块对象，那么它们究竟有什么区别呢？ < reference / >
在布局文件中是用来表示替换一个已经存在的块，举个例子

< block type="page/html" name="root" output="toHtml" template="page/2columns-left.phtml" >  
    < !-- ... sub blocks ... -->  
< /block >  
< !-- ... -->  
< reference name="root" >  
    < block type="page/someothertype" name="root" template="path/to/some/other/template" / >  
    < !-- ... sub blocks ... -->  
    < /block >  
< /reference >  

Magento首先创建了一个名叫“root”的块。然后，它有发现了一个引用（reference）的名字也叫“root”，Magento会把原来那个“root”块替换成< reference / >标签里面的那个快。

再来看看我们之前创建那个local.xml

< layout version="0.1.0" >  
    < default >  
        < reference name="root" >  
            < block type="page/html" name="root" output="toHtml" template="../../../../../code/local/Magease/Helloworld/simple_page.phtml" / >  
        < /reference >  
    < /default >  
< /layout >     

在这里，块“root”被我们用< reference / >替换了，指向了一个不同的模板文件。

布局文件是如何生成的
现在我们对布局文件已经有所了解了，但是这个布局文件是那里来的呢？要回答这个问题，我们得引入Magento中的另外两个概念，操作（Handle）和包布局（Package Layout）。

操作
Magento会为每一个页面请求生成几个不同的操作。我们的Layout View模块可以显示这些处理器
http://example.com/helloworld/index/index?showLayout=handles

你应该看到类似如下列表的列表（和你的配置有关）
default
STORE_bare_us
THEME_frontend_default_default
helloworld_index_index
customer_logged_out

它们每一个都是一个操作的名字。我们可以在Magento系统的不同的地方配置操作。在这里我们需要关注两个操作 “default” 和 “helloworld_index_index”。“default”处理器是Magento的默认处理器，参与每一个请求的处理。 “helloworld_index_index”处理器的名字是frontname “helloworld”加上执行控制器的名字“index”再加上执行方法的名字“index”。这说明执行控制器的每一个执行方法都有一个相应的操作。

我们说过“index”是Magento默认的执行控制器和执行方法的名字，所以以下请求的操作名字也是“helloworld_index_index”。
http://example.com/helloworld/?showLayout=handles

包布局
包布局和我们以前讲过的全局配置有些相似。它是一个巨大的XML文档包含了Magento所有的布局配置。我们可以通过以Layout View模块来查看包布局，请求一下URL
http://example.com/helloworld/index/index?showLayout=package

你可能要等一会儿才能看到输出，因为文件很大。如果你的浏览器在渲染XML的时候卡死了，建议你换成text格式的
http://example.com/helloworld/index/index?showLayout=package&showLayoutFormat=text

假设你选择的是XML格式输出，那么你应该看到一个巨大的XML文件，这就是包布局。这个文件时Magento动态生成的，合并当前主题（theme）下面所有的布局文件。如果你用的是默认安装的话，这些布局文件在以下目录
app/design/frontend/base/default/layout/

其实在全局配置中，有一个< updates / >节点下面定义了所有将被装载的布局文件

< layout >  
    < updates >  
        < core >  
            < file >core.xml< /file >  
        < /core >  
        < page >  
            < file >page.xml< /file >  
        < /page >  
        ...  
    < /updates >  
< /layout >  

当这些文件被装载以后，Magento还会装载最后一个布局文件，local.xml，也就是我们之前新建的那个文件。我们可以通过这个文件来定制Magento的布局。

结合操作和包布局
在包布局文件中，我们可以看到一些熟悉的标签< block / >，< reference / >等等，但是他们都包含在一下这些标签中

< default / >  
< catalogsearch_advanced_index / >  
etc...  
 

这些就是操作标签。对于每个特定的请求来说，针对这个请求的布局文件是由包布局中所有和这个请求相关的操作标签组成的。比如我们上面的例子，和请求相关的操作标签如下

< default / >  
< STORE_bare_us / >  
< THEME_frontend_default_default / >  
< helloworld_index_index / >  
< customer_logged_out / >  
 

所以，针对请求
http://example.com/helloworld/index/index

布局文件就是包布局中上面这些标签的内容组合。在包布局文件中，还有一个标签< update / >值得我们注意。我们可以通过这个标签引入另外一个操作标签。比如

< customer_account_index >  
    < !-- ... -->  
    < update handle="customer_account"/ >  
    < !-- ... -->  
< /customer_account_index >  

这段代码的意思是，如果一个请求包含了“customer_acount_index”操作，那么这个请求的布局文件也应该包含“customer_account”操作标签下面的< block/ >和< reference / >。

更新我们的例子
好了，理论讲完了，让我们来修改我们的例子，把这一章的内容实践一下。我们重新来看local.xml

< layout version="0.1.0" >  
    < default >  
        < reference name="root" >  
            < block type="page/html" name="root" output="toHtml" template="../../../../../code/local/Magease/Helloworld/simple_page.phtml" / >  
        < /reference >  
    < /default >  
< /layout >  

我们用一个引用（reference）覆盖了名为“root”的块。然后定义了一个新的块，指向了一个不同的模板文件。我们把这个引用放 在< default / >操作标签下面，那就说明这个Layout将对所有的请求有效。如果你访问Magento自带的一些页面，你会发现它们要门是空白，要么就是和我 们“hello world”例子的红色背景，但这并不是我们想要的效果。我们来修改一下local.xml，让我们的模板仅对“hello world”的请求有效。

< layout version="0.1.0" >  
    < helloworld_index_index >  
        < reference name="root" >  
            < block type="page/html" name="root" output="toHtml" template="../../../../../code/local/Magease/Helloworld/simple_page.phtml" / >  
        < /reference >  
    < /helloworld_index_index >  
< /layout >  

我们把操作标签换成了“helloworld_index_index”。清空Magento缓存，重新访问Magento的各个页面，你应该发现都恢复了正常，但是针对"hello world"模块的请求页面还是我们自定义的那个。

目前我们只实现了一个“index”执行函数，现在我们来实现“goodbye”执行函数。修改我们的执行控制器代码如下

public function goodbyeAction() {  
    $this->loadLayout();  
    $this->renderLayout();           
}        
 

但是你访问一下页面的时候你还是会看到Magento的默认布局
http://example.com/helloworld/index/goodbye

那是因为我们没有为这个请求定义布局。我们需要在local.xml中添加“helloworld_index_goodbye”标签。由于 “index”请求和“goodbye”请求我们要套用的布局是一样的，所以我们将用< update >标签来重用已有的配置

< layout version="0.1.0" >  
    < !-- ... -->  
    < helloworld_index_goodbye >  
        < update handle="helloworld_index_index" / >  
    < /helloworld_index_goodbye >  
< /layout >  

清空Magento缓存，请求以下URL
http://example.com/helloworld/index/index
http://example.com/helloworld/index/goodbye

你将会得到两个完全相同的页面。

开始输出和getChildHtml方法
在Magento默认的配置下，HTML输出是从名为“root”的块开始（其实是因为这个块拥有output属性【任何一个拥有 output属性的块都是顶层块，在拥有多个顶层块的情况下Magento将按照块定义的先后顺序输出HTML】）。我们覆盖了“root”块的模板
template="../../../../../code/local/Magease/Helloworld/simple_page.phtml"

模板文件的查找路径是当前主题（theme）的根目录，Magento默认设置时这里
app/design/frontend/base/default

为页面加入内容
到目前为止，我们的页面都比较无聊，啥也没有。我们来为页面加点有意义的内容。修改local.xml如下

< helloworld_index_index >  
    < reference name="root" >  
        < block type="page/html" name="root" template="../../../../../code/local/Magease/Helloworld/simple_page.phtml" >  
            < block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml"/ >  
        < /block >  
    < /reference >  
< /helloworld_index_index >  

我们在“root”块里面嵌套了一个块“customer_form_register”。这个块是Magento本来就有的，包含了一张用户注册表单。 我们把这个块嵌套进来，那么我们在模板文件里面就能用这个块的内容。使用方法如下，修改simple_page.phtml

< body >  
    < ?php echo $this->getChildHtml('customer_form_register'); ? >  
< /body >  

这里“getChildHtml”的参数就是要引入的块的名字，使用起来相当方便。清空Magento缓存，刷新hello world页面，你应该在红色背景上看到用户注册表单。Magento还有一个块，叫做“top.links”，让我们把它也加进来。修改 simple_page.html

< body >  
    < h1 >Links< /h1 >  
    < ?php echo $this->getChildHtml('top.links'); ? >  
    < ?php echo $this->getChildHtml('customer_form_register'); ? >  
< /body >  

刷新页面，你会发现< h1 >Links< /h1 >显示出来了，但是“top.links”什么都没有显示。那是因为我们并没有把 这个块引入到local.xml，所以Magento找不到这个块。“getChildHtml”的参数一定要是当前页面的布局文件中声明过的块。这样的 话Magento就可以只实例化需要用到的块，节省了资源，我们也可以根据需要为块设置不同的模板文件。
我们修改local.xml文件如下

< helloworld_index_index >  
    < reference name="root" >  
        < block type="page/html" name="root" template="../../../../../code/local/Magease/Helloworld/simple_page.phtml" >  
            < block type="page/template_links" name="top.links"/ >  
            < block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml"/ >  
        < /block >  
    < /reference >  
< /helloworld_index_index >  

清空Magento缓存，刷新页面，你会看到一排链接显示出来了。【“top.links”块没有template属性，那是因为这个块的类中一定定义了默认的模板

protected function _construct()  
{  
    $this->setTemplate('page/template/links.phtml');  
}  

】

总结
这一章我们讲解了布局的基础知识。你可能会觉得这个很复杂，但是你也不必过分担心，因为平常使用Magento是不会用到这些知识 的，Magento提供的默认布局应该可以满足大部分需求。对于想要深入研究Magento的开发者来说，理解Magento的布局是至关重要的。布局， 块和模板构成了Magento MVC架构中的View，这也是Magento的特色之一。