如何覆蓋 magento 2 原生的程式 – Layout
為了滿足客製化的需求,除了需要覆蓋原生的程式以外,還需要學會 Layout 的修改,當我們有需要更動到頁面結構時,我們都必須要透過修改 Layout 來達成我們的需求,例如,多一個區塊、少一個區塊、位置對調等等,以下用實際的例子簡單的說明:
首先我們需要找到 Layout 所在的位置,譬如我要找 後台-快取管理 的 Layout,網址 : /[backend name]/admin/cache/,對應到的 Layout 檔名為 adminhtml_cache_index.xml,想要對該頁面結構進行修改,便在任何一個適當的 Module 底下的 view\adminhtml\layout 建立一個同樣叫adminhtml_cache_index.xml 的檔案,接下來便可對此 Layout 做修改。
1.刪除
首先試著將 額外的快取管理 隱藏
只需在 <body> 內 填上
<referenceBlock name="cache.additional" remove="true" display="false" />
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="cache.additional" remove="true" /> </body> </page>
清除快取後 就會發現底下的 額外的快取管理 區塊消失了,其中的 referenceBlock name="cache.additional" 便是指定要覆寫的 Block
remove="true" 將該區塊移除。
2.新增一個 Block
將該 Layout 改寫如下
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Backend\Block\Cache\Additional" name="anotherName" template="Magento_Backend::system/cache/additional.phtml"/> </referenceContainer> </body> </page>
將 block cache.additional 的參數拿來用,所引用的 class 、 template 皆相同,不同的是 name ,任意取一個不重複的名字 ,清除快取後 就會發現多了一個 額外的快取管理 區塊
3.修改
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="[your class]" name="cache.additional" template="[your template]"/> </referenceContainer> </body> </page>
當我想修改頁面結構 就改 template 、欲修改對應的程式流程就改 class,唯一不變的是 name 如此便可將原 block 的參數覆寫過去。
4.變換位置
若是要改變位置 則補上參數 before 並指定要放在 adminhtml.cache.container 之前
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Backend\Block\Cache\Additional" name="cache.additional" template="Magento_Backend::system/cache/additional.phtml" before="adminhtml.cache.container"/> </referenceContainer> </body> </page>
當然也可以寫成
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Backend\Block\Cache" name="adminhtml.cache.container" after="cache.additional" /> </referenceContainer> </body> </page>
指定 adminhtml.cache.container 要放在 cache.additional 的後方,雖然 Layout 可以用的參數還不少,但了解以上設定便已經可滿足大多數的需求,之後若還有機會 再對 Layout 相關的內容作詳細的補充。
更多關於電商營運與架站的知識,歡迎訂閱歐斯瑞電子報,以及追蹤我們的Facebook粉絲專頁!
延伸閱讀:
我要留言