Magento默认page.xml布局文件详细说明

今天跟大家一起详细研究下page.xml的布局文件。

Magento布局文件解析顺序

xml布局文件一般位于app/design/{area}/{package}/{theme}/layout/目录下。Layout文件一般包含block、reference、action三种标签。

对于Magento系统，首先会将系统中相关的layout合并，合并一般是包括app/design/frontend/base/default/layout目录下的xml文件，以及指定的模板下面的对应的layout文件。最终普通网页合并之后从default下 output=”toHtml”进行最终的输出，那么解析的block或其他元素也是从该节点进行解析。

1. 顶层的block一般位于page.xml中，如下所示。Output表示通过toHtml进行输出。默认使用3columns.phtml三列布局。Type对应Mage_Page_Block_Html类。

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

2. 在顶层的block中，一般包含以下几个关键部分，分别是Html头部、网页头部、内容左部中部右部、网页底部等这么几个基本结构布局。

<block type="page/html_head" name="head" as="head">
<block type="page/html_header" name="header" as="header">
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs" />
<block type="core/text_list" name="left" as="left" translate="label">
<block type="core/text_list" name="content" as="content" translate="label">
<block type="core/text_list" name="right" as="right" translate="label">
<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">

3. 每个模块一般情况下都会有对应的模块xml文件，如目录布局文件为catalog.xml文件，支付为checkout.xml。不过对于Magento系统来说，最终还是合并读取的。

4. 如果是目录模块被调用，在catalog.xml中，首先会将default节点中所有元素进行加载和解析，然后根据对应产品模块具体页面加载对应的节点，如分类文件默认采用catalog_category_default节点下的元素更新，如果分类设置为Is Anchor，则采用catalog_category_layered节点下的元素更新。产品默认采用catalog_product_view节点下 的元素更新。

Magento page.xml布局结构详解

1. Html头部：Html头部主要包括增加默认的JS和CSS相关文件。

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>

    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
    <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
    <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
    <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
</block>

2. 页面头部：主要包括一些头部链接、语言切换、页面导航栏等

 <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" translate="label">
        <label>Navigation Bar</label>
        <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
    </block>
    <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 type="page/html_welcome" name="welcome" as="welcome"/>
</block>

3. 左右部侧栏，一般有product_compare_sidebar、catalog.leftnav、catalog.product.related等侧边栏，具体需要看对应页面的所对应的侧边栏。

<block type="core/text_list" name="left" as="left" translate="label">
    <label>Left Column</label>
</block>

注意因为同一级别的block的加载是按照顺序来的，所以下面的右边栏区块正常应该在content区块的下面。

<block type="core/text_list" name="right" as="right" translate="label">
    <label>Right Column</label>
</block>

4. content内容一般在具体页面中进行指定，不同模块的内容肯定是不同的，在page.xml文件中只是定义了一个as。

<block type="core/text_list" name="content" as="content" translate="label">
    <label>Main Content Area</label>
</block>

5. footer包括了切换store、常见链接等。

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
    <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
        <label>Page Footer</label>
        <action method="setElementClass"><value>bottom-container</value></action>
    </block>
    <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>
    <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>
</block>

未经允许不得转载：哈勃私语 » Magento默认page.xml布局文件详细说明