0

Magento开发系列之四 布局、块和模板

Posted by Alan on August 9, 2015 in Coding, Magento |

刚刚接触Magento开发的人经常会搞不清布局(Layout)和视图(View)之间的分别。那么本节就来剖析Magento的布局/块,以及它们在Magento的MVC架构中所起到的作用。 和很多主流的MVC系统不同,Magento的Action控制器不向视图传递数据对象,并且通常也不会去设定视图对象中的属性值。而是由视图组件直接引用系统模型来获取所需显示的信息。 采用这种设计方法直接导致视图被分割成两个部分:块文件(Blocks)和模板文件(Templates),其中块是PHP对象,模板是混合了HTML和PHP的原生PHP文件,后缀名采用.phtml。每个块文件对应着一个模板文件,在模块文件中通过$this关键词来引用块文件中的对象。 先看看代码,打开app/design/frontend/base/default/template/catalog/product/list.phtml文件,会看到如下代码 其中getLoadedProductCollection方法来自块文件的Mage_Catalog_Block_Product_List类,具体位置在app/code/core/Mage/Catalog/Block/Product/List.php 块文件中的_getProductCollection会实例化模型并读取其中的数据,并将结果返回给模板文件。 块文件内置 块和模板文件真正的强大之处在于getChildHtml方法的使用,使用这个方法可以包含一级块、模板文件内的二级块、模板文件。页面上的HTML布局正是通过块文件不断地调用内嵌的块文件来创建的。下面我们就来看一看app/design/frontend/base/default/template/page/1column.phtml这个文件: 模板文件本身并不长,但通过多次调用$this->getChildHtml()方法包含并显示了多个块文件,这些块文件又会使用getChildHtml方法去调用其它块文件。 布局文件 这么看起来块文件和模板文件确实不错,那么如何让Magento知道在页面中使用哪一个块文件?先从哪一个块文件开始处理?又如何在getChildHtml中指定一个块文件呢?毕竟里面的参数看起来不太像是个块文件的名称。 这就需要讲到布局对象了,布局对象是一个指定了页面上将包含块文件的XML对象,它同时也指定了先处理哪一个块文件。在上节中我们在Action方法中使用了echo指令输出了一些内容,本节我们将会为Helloworld模块创建一个简单的HTML模板文件。首先创建一个app/design/frontend/base/default/layout/local.xml文件,加入如下代码 然后再创建一个app/design/frontend/base/default/template/alanhou/helloworld/simple_page.phtml文件并添加如下代码: 完成了上面的操作后,最后需要通过Action控制器来调用整个布局,那么我们需要对之前创建的indexAction方法进行如下调整: 清除缓存重新加载http://localhost/mgt/helloworld/index/index,就会显示刚刚在simple_page.phtml里所添加的内容,也就是整个屏幕都显示红色的背景。 你一定很好奇这背后到底发生了什么呢?下面就让我们一起来揭开这神秘的面纱。为方便观察首先安装一下Layoutviewer模块: 链接: http://pan.baidu.com/s/1qHTd8 密码: 2dya 只需解压缩然后拷贝到app目录中即可完成安装,这个模块类似于我们这前面小节里提到的Configviewer。安装完成后请访问http://localhost/magento/helloworld/index/index?showLayout=page 输出内容即为page请求的layout.xml,它由<block />, <reference /> 和<remove />等标签组成,当我们在调用loadLayout方法时,Magento实际完成的操作有: 生成Layout布局XML文件 实例化各<block />标签中的Block类,通过标签属性查找类并作为全局配置路径保存到布局对象的_blocks数组中,在该数组中以标签名作为数据的键 如若标签中包含输出属性,其值就会被添加到布局对象的_output数组中 然后在Action控制器中调用renderLayout方法时,Magento会遍历_output数组中的所有Block,将输出属性的值作为一个回调方法,这通常都是toHtml,也就是从块模板文件开始处理。接下我们会谈谈Block是怎么被实例化的,layout文件又是如何生成并完成输出的? Block的实例化 在生成的布局XML文件中,包含type属性的实际上是一个类群URI,比如 这些URI都引用全局配置文件中的一个地方,URI的前半部分(上例中都是page)会用于在全局配置文件中查询page的类名,而第二部分(分别是html和template_links)会被加到前面查询到的类名最后并形成Magento将要实例化的类。 以page/html为例,Magento会首先去依次查找全局配置文件中的global > blocks > page节点(参见Magento开发系列之二 配置文件) 查找到的结果即是上图中的 这里我们就得到了类名的前一部分Mage_Page_Block,然后将第二部分添加到后面就构成了将要实例化的类名Mage_Page_Block_Html。假如我们创建了一个和现有block同名的块文件,新的block会替换原来的实例,我们在前面创建的local.xml就做了这样的替换 名为root的block就被我们的创建的block所替换,指向了一个新phtml模板文件。 Reference标签 标签会将会将内部包含的所有XML声明以指定的名称放到现在的block中,它内部包含的节点会被作为所引用的父级block的子block 放在不同的layout文件中: 即便root block是在一个单独的布局XML文件中声明,新添加的block还是作为一个子block。Magento先创建一个名为root的page/html块,之后如果再遇到有对root的引用(reference),就会将新的块some.other.block.name作为root的子block。 Layout文件的生成过程 现在我们对于Layout XML文件已经有了更进一步的了解,但这个XML文件是从哪里来的呢?要解释这个问题就需要引入两个新的概念:指针(Handle)和安装包布局(Package Layout)。 Magento中的每个页面请求都会生成一些指针,我们前面创建的Layoutview模块将有助于形象化的展示这些指针,只需要访问http://localhost/magento/helloworld/index/index?showLayout=handles就会看到类似下面的结果(根据个人配置会略有差别) 以上输出的每一个都是指针,指针可以在Magento系统中的很多地方进行设置,这里我们着重讨论的是default和helloworld_index_index这两个。default指针在每个Magento的请求中都会出现,而helloworld_index_index是拼接了Router名称(helloworld)、Action控制器名称(index)和Action控制器方法名(index)所形成的一个字符串。这也就是说Action控制器中的每个方法都会对应一个指针。 […]

Tags: , , , , ,

0

WordPress模板集合

Posted by Alan on November 22, 2014 in 模板专区 |

Alterna – Ultra Multi-Purpose WordPress Theme Alterna is an retina-ready, fully responsive Multi-Purpose WordPress Theme.Alterna gives you an awesome premium theme to create your website for any type of website; business, corporate, portfolio, blog, products, magazine, shop etc…Alterna also Integrate WooCommerce, WPML, Facebook Page etc… Alterna includes Drag & Drop Visual Composer Page Builder value […]

Tags: , , , , , ,

0

WordPress模板下载-Bloggy

Posted by Alan on October 16, 2014 in 模板专区 |

Bloggy v.2是一款针对博主的Wordpress响应式主题,包含自定义的头部图片、文章格式以及多种页面模板来实现充分的客制化。 演示页面:http://www.anariel.com/bloggy/bloggy2/ 下载地址:WordPress模板下载-Bloggy Features: WordPress Theme Customizer Responsive Design WPML compatibility-in case your business needs a multi-language site Many Different page templates Post Formats Jetpack Widget Visibility – this awesome feature allows you to choose on which page your particular widget appears or dissapears Theme is styled for “WooCommerce” plugin Soliloquy slider plugin Widgetize […]

Tags: , , ,

0

Slash – 技术杂志类Blogger模板

Posted by Alan on October 13, 2014 in 模板专区 |

Slash可自定义、功能丰富的blogger模板,适用于技术、杂志、娱乐等主题的博客。使用了Mega菜单让访客可在各分类中更轻松的找到相关文章,该模板采用了3栏式的自适应布局。 演示地址:http://themeforest.net/item/slash-techmagazine-blogger-template/full_screen_preview/8109373 下载地址: Slash – 技术杂志类Blogger模板

Tags: , , , ,

0

内容展示模板-Corporate works

Posted by Alan on October 10, 2014 in 模板专区 |

Corporate works是一套简洁实用、功能齐全的模板,适用于内容展示,包括公司、产品和服务、个人或媒体机构等的展示。该模板包含6种配色方案及不同的字体,16种页面模板,应用此模板可进行无限的扩展开发。 演示页面:http://themeforest.net/item/corporate-works-html-version/full_screen_preview/161994 下载地址:内容展示模板-Corporate works Features: 6 color variations(blue, red, orange, green, pink, violet) 6 different fonts (nice ones) home page variations 16 page templates Loots of html elements Built in contact form Built in Twitter widget Multiple layout arrangements Wide slideshow with possibility to display 2 lines of text, title and link Elements styled […]

Tags: , ,

0

免费Responsive新闻站源代码-Exquisite

Posted by Alan on October 10, 2014 in 模板专区 |

Exquisite是一款适用于在线新闻、社论方面的主题,该主题包含自定义组件,首页布局,多类别以及多种配色方案,可以能过admin面板来自定义网站的颜色和字体。 演示页面:http://themes.fuelthemes.net/?theme=exquisite 下载地址:免费Responsive新闻站源代码-Exquisite

Tags: , , ,

0

WordPress免费自适应模板-Alterna 7

Posted by Alan on October 9, 2014 in 模板专区 |

Alterna是一款兼容Retina屏幕、全面自适应的多功能Wordpress主题,可通过该主题创建商业、企业、博客、杂志和购物等类型的站点。Alterna同时集成了WooCommerce, WPML, Facebook Page等。   演示页面:http://www.themefocus.co/demo/?product=alterna 下载地址:WordPress免费自适应模板-Alterna 7

Tags: , , , ,

0

Joomla免费自适应模板-JSN Glamo

Posted by Alan on October 9, 2014 in 模板专区 |

JSN Glamo是一个兼容Joomla 2.5和Joomla 3.x的自适应模板,适用于时尚零售行业,是对于RedShop的一个扩展。该主题具有极强的视觉冲击力,适合作为一个女性购物网站的模板,同时集成了社交图标以及友好的手机页面展示。   演示页面:http://themeforest.net/item/jsn-glamo-befits-fashion-retail-websites/full_screen_preview/6909468 下载地址:Joomla免费自适应模板-JSN Glamo

Tags: , , , ,

0

免费自适应Magento模板-Women Store

Posted by Alan on October 8, 2014 in 模板专区 |

Women Store是一个针对化妆品、美容产品、时装、首饰及鞋等相关行业的Magneto自适应主题。 该主题设计时尚,包含6种不同颜色搭配的版本,使用了大量的轮播、包含多列的mega目录,产品大小可通过后台来进行控制,支持Ajax layer navigation、价格滑块等功能。 演示页面:http://themeforest.net/item/women-store-responsive-magento-theme/full_screen_preview/5009919 下载地址:免费自适应Magento模板-Women Store 本站提供的下载资源仅供学习交流之用。 THEME FEATURES 6 skins available Responsive design Unlimited color Mega Menu Easy custom home page Easy install with One click Slide show banner with admin panel with many effect yo can choose ajax layer navigation ajax price slider ajax add to cart ajax toolbar, ajax sortby, […]

Tags: , , , ,

0

Magento免费Responsive模板-The Phoenix

Posted by Alan on October 8, 2014 in 模板专区 |

The Phoenix是一款在Theme Forest上当前售价为$84的自适应Magento主题。设计简洁,采用黑白本色,让您的网站独树一帜,别具一格。The Phoenix模板拥有强大的性能,易于自定义并拥有很炫的特效。 Main Features Responsive Design Support cpanel, Admin config Amazing menu Ajax cart: Ajax add to cart, compare, wishlish Upsell products slider Coud Zoom, Thumbnail slider, Pretty photo Brand slider logo Support Magento Community Edition 1.7.x, 1.8.x and 1.9.x Integrated Twitter Bootstraps Integrated Google Fonts, Integrated font FontAwesome PSDs file supplied Documentation […]

Tags: , , , ,

Copyright © 2012-2018 记录点滴生活 | Alan Hou的个人博客 All rights reserved.