碼上歡樂
相關內容    簡體    繁體

Magento布局layout.xml文件詳解

本文轉載自   查看原文   2014-03-17 00:42   6848    Magento 1

解析順序

布局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類。

Php代碼   收藏代碼
  1. <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">  

 

2.在頂層的block中，一般包含以下幾個關鍵部分，分別是Html頭部、網頁頭部、內容左部中部右部、網頁底部這么幾個基本結構布局。

Php代碼   收藏代碼
  1. <block type="page/html_head" name="head" as="head">  
  2. <block type="page/html_header" name="header" as="header">  
  3. <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>  
  4. <block type="core/text_list" name="left" as="left" translate="label">  
  5. <block type="core/text_list" name="content" as="content" translate="label">  
  6. <block type="core/text_list" name="right" as="right" translate="label">  
  7. <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節點下 的元素更新。

 

現在我們詳細的分析一下page中的各個布局結構


1.Html頭部：Html頭部主要包括增加默認的js和css相關文件。

Php代碼   收藏代碼
  1. <block type="page/html_head" name="head" as="head">  
  2.     <action method="addJs"><script>prototype/prototype.js</script></action>  
  3.    
  4.     <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>  
  5. </block>  

 

2.頁面頭部：主要包括一些頭部鏈接、語言切換等

Php代碼   收藏代碼
  1. <block type="page/html_header" name="header" as="header">  
  2.     <block type="page/template_links" name="top.links" as="topLinks"/>  
  3.     <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>  
  4.     <block type="core/text_list" name="top.menu" as="topMenu" translate="label">  
  5.         <label>Navigation Bar</label>  
  6.     </block>  
  7.     <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">  
  8.         <label>Page Header</label>  
  9.         <action method="setElementClass"><value>top-container</value></action>  
  10.     </block>  
  11. </block>  

 

3.左右部側欄，一般有product_compare_sidebar、catalog.leftnav、catalog.product.related等側邊欄，具體需要看對應頁面的所對應的側邊欄。

 

4.content內容一般在具體頁面中進行指定，不同模塊的內容肯定是不同的，在page.xml文件中只是定義了一個as。

 

5.footer包括了切換store、常見鏈接等。

 

解析內容

布局xml文件一般位於app/design/{area}/{package}/{theme}/layout/目錄下。Layout文件一般包含block、reference、action三種標簽。

 

1.Block標簽指明對應的Html數據塊，在指定是一個Block后，系統首先會根據該Block的配置生成一個html數據塊，然后再繼續解析它所包含的其他內容。

Php代碼   收藏代碼
  1. <block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">  
  2.     <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>  
  3.     <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">  
  4.         <label>Shopping Cart Sidebar Extra Actions</label>  
  5.     </block>  
  6. </block>  

 

如在解析type=”checkout/cart_sidebar” block的時候，首先在config.xml找到checkout的block所對應的半類名，得到Mage_Checkout_Block，再和 cart_sidebar組成全稱類名為Mage_Checkout_Block_Cart_Sidebar，該Block類所對應的模板文件為 checkout/cart/sidebar.phtml，before=”-”表明在同級別上，它是排在最前面的。Name需要唯一，作為解析和引用使 用。


然后在解析子Block時候，如type=”core/text_list”的Block，會告訴他的父節點cart_sidebar該子節點信息，這 樣，在父節點所對應的模板文件中，才能使用getChildHtml(“cart_sidebar.extra_actions”)函數調用子節點的 html信息。
如果有as節點，表示該節點可以在其他地方被引用，也就是說可以在其他地方再次解析，比如as=’left’，則可以在其他地方用reference中進行添加相關block操作。

 

2.Reference標簽指明其他Block Name在該區域的一個引用，Reference所對應的Block一般都有as屬性。一般也只有一個name值，表示這一Block會使用該 Reference填充內容，將該Reference下的子Block作為對應Blok的子Block進行解析。

 

3.Action表明指定的Block執行一些特別的動作，比如添加js，css，給常量賦值，調用Block中對應的函數等。

Php代碼   收藏代碼
  1. <block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml">  
  2.     <action method="setImgSrc"><src>images/media/col_right_callout.jpg</src></action>  
  3.     <action method="setImgAlt" translate="alt" module="catalog"><alt>Keep your eyes open for our special Back to School items and save A LOT!</alt></action>  
  4. </block>  

 

在Block當中調用Mage_Core_Block_Template類解析callouts/right_col.phtml。在該block 下的action中，沒有指定節點，表明該action作用於上級Block即right.permanent.callout。在方法中使用 setImgSrc函數，那么對應的，可以在模板中使用getImgSrc獲取到action中所包含的值。


在setImgAlt中，也可以使用getImgAlt獲取值，不過其中使用translate屬性和module屬性，那么會調用Catalog中的Helper，對alt中的內容進行翻譯成對應的本地化文字。

 

附：

Php代碼   收藏代碼
  1. * Create layout blocks from configuration  
  2.  *  
  3.  * @param Mage_Core_Layout_Element|null $parent  
  4.  */  
  5. public function generateBlocks($parent=null)//Mage_Core_Model_Layout  
  6. {  
  7.     if (emptyempty($parent)) {  
  8.         $parent = $this->getNode();  
  9.     }  
  10.     foreach ($parent as $node) {  
  11.         $attributes = $node->attributes();  
  12.         if ((bool)$attributes->ignore) {  
  13.             continue;  
  14.         }  
  15.         switch ($node->getName()) {  
  16.             case 'block':  
  17.                 $this->_generateBlock($node, $parent);  
  18.                 $this->generateBlocks($node);  
  19.                 break;  
  20.    
  21.             case 'reference':  
  22.                 $this->generateBlocks($node);  
  23.                 break;  
  24.    
  25.             case 'action':  
  26.                 $this->_generateAction($node, $parent);  
  27.                 break;  
  28.         }  
  29.     }  
  30. }  
  31.    
  32. protected function _generateBlock($node, $parent)  
  33. {  
  34.    
  35.     if (!emptyempty($node['class'])) {  
  36.         $className = (string)$node['class'];  
  37.     } else {  
  38.         $className = Mage::getConfig()->getBlockClassName((string)$node['type']);  
  39.     }  
  40.    
  41.     $blockName = (string)$node['name'];  
  42.     $_profilerKey = 'BLOCK: '.$blockName;  
  43.     Varien_Profiler::start($_profilerKey);  
  44.     $block = $this->addBlock($className, $blockName);  
  45.     if (!$block) {  
  46.         return $this;  
  47.     }  
  48.    
  49.     if (!emptyempty($node['parent'])) {  
  50.         $parentBlock = $this->getBlock((string)$node['parent']);  
  51.     } else {  
  52.         $parentName = $parent->getBlockName();  
  53.         if (!emptyempty($parentName)) {  
  54.             $parentBlock = $this->getBlock($parentName);  
  55.         }  
  56.     }  
  57.     if (!emptyempty($parentBlock)) {  
  58.         $alias = isset($node['as']) ? (string)$node['as'] : '';  
  59.         if (isset($node['before'])) {  
  60.             $sibling = (string)$node['before'];  
  61.             if ('-'===$sibling) {  
  62.                 $sibling = '';  
  63.             }  
  64.             $parentBlock->insert($block, $sibling, false, $alias);  
  65.         } elseif (isset($node['after'])) {  
  66.             $sibling = (string)$node['after'];  
  67.             if ('-'===$sibling) {  
  68.                 $sibling = '';  
  69.             }  
  70.             $parentBlock->insert($block, $sibling, true, $alias);  
  71.         } else {  
  72.             $parentBlock->append($block, $alias);  
  73.         }  
  74.     }  
  75.     if (!emptyempty($node['template'])) {  
  76.         $block->setTemplate((string)$node['template']);  
  77.     }  
  78.    
  79.     if (!emptyempty($node['output'])) {  
  80.         $method = (string)$node['output'];  
  81.         $this->addOutputBlock($blockName, $method);  
  82.     }  
  83.     Varien_Profiler::stop($_profilerKey);  
  84.    
  85.     return $this;  
  86. }  
  87.    
  88. protected function _generateAction($node, $parent)  
  89. {  
  90.     if (isset($node['ifconfig']) && ($configPath = (string)$node['ifconfig'])) {  
  91.         if (!Mage::getStoreConfigFlag($configPath)) {  
  92.             return $this;  
  93.         }  
  94.     }  
  95.    
  96.     $method = (string)$node['method'];  
  97.     if (!emptyempty($node['block'])) {  
  98.         $parentName = (string)$node['block'];  
  99.     } else {  
  100.         $parentName = $parent->getBlockName();  
  101.     }  
  102.    
  103.     $_profilerKey = 'BLOCK ACTION: '.$parentName.' -> '.$method;  
  104.     Varien_Profiler::start($_profilerKey);  
  105.    
  106.     if (!emptyempty($parentName)) {  
  107.         $block = $this->getBlock($parentName);  
  108.     }  
  109.     if (!emptyempty($block)) {  
  110.    
  111.         $args = (array)$node->children();  
  112.         unset($args['@attributes']);  
  113.    
  114.         foreach ($args as $key => $arg) {  
  115.             if (($arg instanceof Mage_Core_Model_Layout_Element)) {  
  116.                 if (isset($arg['helper'])) {  
  117.                     $helperName = explode('/', (string)$arg['helper']);  
  118.                     $helperMethod = array_pop($helperName);  
  119.                     $helperName = implode('/', $helperName);  
  120.                     $arg = $arg->asArray();  
  121.                     unset($arg['@']);  
  122.                     $args[$key] = call_user_func_array(array(Mage::helper($helperName), $helperMethod), $arg);  
  123.                 } else {  
  124.                     /** 
  125.                      * if there is no helper we hope that this is assoc array 
  126.                      */  
  127.                     $arr = array();  
  128.                     foreach($arg as $subkey => $value) {  
  129.                         $arr[(string)$subkey] = $value->asArray();  
  130.                     }  
  131.                     if (!emptyempty($arr)) {  
  132.                         $args[$key] = $arr;  
  133.                     }  
  134.                 }  
  135.             }  
  136.         }  
  137.    
  138.         if (isset($node['json'])) {  
  139.             $json = explode(' ', (string)$node['json']);  
  140.             foreach ($json as $arg) {  
  141.                 $args[$arg] = Mage::helper('core')->jsonDecode($args[$arg]);  
  142.             }  
  143.         }  
  144.    
  145.         $this->_translateLayoutNode($node, $args);  
  146.         call_user_func_array(array($block, $method), $args);  
  147.     }  
  148.    
  149.     Varien_Profiler::stop($_profilerKey);  
  150.    
  151.     return $this;  
  152. }  

 

在addJs、addCss的代碼一般在page/html_head類型的block當中，Magento首先會將所有文件存儲在$_data當中，最終通過getCssJsHtml函數解析成對應的html代碼輸出。


Head中支持add類型的方法有addCss、addJs、addCssIe、addJsIe、addLinkRel五種。

Php代碼   收藏代碼
  1. <reference name="head">  
  2.     <action method="addCss"><stylesheet>css/local.css</stylesheet></action>  
  3.     <action method="addJs"><script>scriptaculous/controls.js</script></action>  
  4.     <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>  
  5. </reference>  

 

通用的函數是addItem，需要指定type和name，如果有條件判斷的話就放在if標簽當中

如果需要刪除某個js或者css，可以使用removeItem方法

jslib/ds-sleight.js

 

其他的action函數需要看其type所對應的類中所支持的函數。

Php代碼   收藏代碼
  1. /** 
  2.  * Get HEAD HTML with CSS/JS/RSS definitions 
  3.  * (actually it also renders other elements, TODO: fix it up or rename this method) 
  4.  * 
  5.  * @return string 
  6.  */  
  7. public function getCssJsHtml()//Mage_Page_Block_Html_Head extends Mage_Core_Block_Template  
  8. {  
  9.     // separate items by types  
  10.     $lines  = array();  
  11.     foreach ($this->_data['items'] as $item) {  
  12.         if (!is_null($item['cond']) && !$this->getData($item['cond']) || !isset($item['name'])) {  
  13.             continue;  
  14.         }  
  15.         $if     = !emptyempty($item['if']) ? $item['if'] : '';  
  16.         $params = !emptyempty($item['params']) ? $item['params'] : '';  
  17.         switch ($item['type']) {  
  18.             case 'js':        // js/*.js  
  19.             case 'skin_js':   // skin/*/*.js  
  20.             case 'js_css':    // js/*.css  
  21.             case 'skin_css':  // skin/*/*.css  
  22.                 $lines[$if][$item['type']][$params][$item['name']] = $item['name'];  
  23.                 break;  
  24.             default:  
  25.                 $this->_separateOtherHtmlHeadElements($lines, $if, $item['type'], $params, $item['name'], $item);  
  26.                 break;  
  27.         }  
  28.     }  
  29.    
  30.     // prepare HTML  
  31.     $shouldMergeJs = Mage::getStoreConfigFlag('dev/js/merge_files');  
  32.     $shouldMergeCss = Mage::getStoreConfigFlag('dev/css/merge_css_files');  
  33.     $html   = '';  
  34.     foreach ($lines as $if => $items) {  
  35.         if (emptyempty($items)) {  
  36.             continue;  
  37.         }  
  38.         if (!emptyempty($if)) {  
  39.             $html .= '<!--[if '.$if.']>'."\n";  
  40.         }  
  41.    
  42.         // static and skin css  
  43.         $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s"%s />' . "\n",  
  44.             emptyempty($items['js_css']) ? array() : $items['js_css'],  
  45.             emptyempty($items['skin_css']) ? array() : $items['skin_css'],  
  46.             $shouldMergeCss ? array(Mage::getDesign(), 'getMergedCssUrl') : null  
  47.         );  
  48.    
  49.         // static and skin javascripts  
  50.         $html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript" src="%s"%s></script>' . "\n",  
  51.             emptyempty($items['js']) ? array() : $items['js'],  
  52.             emptyempty($items['skin_js']) ? array() : $items['skin_js'],  
  53.             $shouldMergeJs ? array(Mage::getDesign(), 'getMergedJsUrl') : null  
  54.         );  
  55.    
  56.         // other stuff  
  57.         if (!emptyempty($items['other'])) {  
  58.             $html .= $this->_prepareOtherHtmlHeadElements($items['other']) . "\n";  
  59.         }  
  60.    
  61.         if (!emptyempty($if)) {  
  62.             $html .= '<![endif]-->'."\n";  
  63.         }  
  64.     }  
  65.     return $html;  
  66. }  

 

 

布局原理解析

Magento中的布局（Layout）包含一小部分的標記集合，作為詳細說明關於程序如何建立一個頁面，如何建立它的行為和每個構建的區塊。最佳 的布局途徑是在每個角度正確的划分和使用。為了讓您能夠做到這一點，下面是一些行為特性的布局XML標記。

句柄（Handle）

Handle (圖1)是一個標識符，決定應用程序要如何通過嵌套的更新處理它。

如果句柄的名稱是<default>，然后應用程序知道在加載網店的幾乎所有頁面之前應該加載此特定頁面布局的嵌套更新（我們說'幾乎 所有的'，因為一些特殊的頁面像產品圖片彈出窗口就沒有加載布局中的<default>句柄）。

如果Magento找到<default>以外的句柄，它將按照指定的句柄中的頁面嵌套更新對頁面進行處理。例 如，<catalog_product_view>包含Product View頁面的布局更新，而<catalog_product_compare_index>包含Compare Product 頁面的更新布局。句柄作為設計人員設置在網店中的標識符，他不需要廣泛的理解 Magento編程，也不應該需要修改。

<block>

Magento通過<block>標記決定頁面中的每個區塊的行為和視覺表現。在Magento中我們已經提到了兩種類型的區塊-結 構區塊（structural blocks）和內 容區塊（content blocks）。區分這兩種區塊最好的方式是通過分配給它的標記屬性來區分。結構區塊通常包含屬性'as'，通過這個屬 性值程序可以與指定的區域（由getChildHtml 方法指定）中的模板聯系。你會發現在默認布局許多地方出現這個'as'屬性，因為默認布局的一個性質就是是建立一個實際的布局，在各個不同的頁面 中的具體布局上就可以開始增加。例如，在默認布局中，有像‘left’、‘right’、‘content’和‘footer’這些結構區塊。並不是說這 些區塊不能存在於正常的布局更新中，但我們為什么不首先在默認布局中建立這些結構區塊，然后在后面每個具體的頁面基礎上添加內容呢？讓我們進一步挖 掘<block>的現有屬性。

  • type – 這是模塊類的標識符，它定義了區塊的功能。此屬性不應該被修改。
  • name – 這是名稱，其他的區塊可以通過此名稱引用此區塊（看圖3）。
  • before (and) after – 這兩種方法決定內容區塊在結構區塊中的位置。before="-" 和 after="-"這樣的命令標志此區塊的位置是一個結構區塊的最上方或最下方。
  • template - 這個屬性指定的值決定了此區塊的功能是使用哪個模板。例如，如果這個屬性值指定了'catalog/category/view.phtml '， 程序就會載入‘app/design/frontend/template/catalog/category/view.phtml ’ 模板文件。要了解布局是如何通過模板執行的，閱讀分 步指南建設一個主題。
  • action – <action> 是用來控制前台的功能的，如加載或不加載一個JavaScript。一套完整的action方式將很快推出，但此時的最佳的學習途徑是了解現有的布局更新 上面的不同Action方法。
  • as – 此屬性指 定模板文件中會調用那個區塊。當您在模板中看到getChildHtml(' block_name ')的PHP方法，可以肯定它指的是引用屬性'as'的值為' block_name '的區塊。 (例如：在骨架模板中的方法<?=$this->getChildHtml('header')?>是調用<block as=“header”>)

<reference>

<reference>是用來引用另一個區塊。要引用靈位一個區塊，在內部的更新將應用於與其關聯的<block>（見圖 3）。

要使用引用，可以通過區塊中的‘name’屬性值引用。此屬性的指向標簽中'name'屬性。所以，如果你使用<reference name="right">，響應的區塊名稱將是<block name="right">。

 

圖3：

 

來源：http://www.ahuasheng.com/magento-layout-xml-parse-content.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Android布局文件layout.xml的一些屬性值 Magento 2中的Layout XML 指令及其參數 實例化Layout中的布局文件（xml） Android：XML布局文件詳解 Android中res中的Layout布局文件報空指針問題layout_galazuser_center.xml: java.lang.NullPointerException Android 布局學習之——Layout(布局)詳解一 Android 布局學習之——Layout(布局)詳解二（常見布局和布局參數） ALV中layout布局控制詳解 AndroidStudio中如何創建指定布局的layout文件 Layout布局
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM