Magento 2 Theme Ultimate Guide - 如何創建Magento 2主題終極指南
Magento 2 Theme Ultimate Guide - 如何創建Magento 2主題基礎指南
在Magento 2中管理和設置主題的方式有很多改進.Magento 1.9中引入的theme.xml定義文件和新的回退系統的使用是兩個最重要的改進。Magento 2中的後備系統與Magento 1.x的工作方式類似，但是具有額外的優勢，您可以選擇無限的父主題繼承/後退到
- 全部通過主題中的theme.xml文件。
假設您想基於新的Magento“Blank”主題創建一個全新的主題。首先，您將在 app/design/frontend 中創建一個名為Session / default的新文件夾。然後，您將在此目錄中創建一個theme.xml文件（最好從 app/design/frontend/Magento/blank/theme.xml
一，創建基礎主題 與 基本指南
- 創建Magento主題文件夾
- 聲明你的主題
- Composer package
- registration.php文件
- 創建靜態文件，文件夾
- 朗讀配置目錄產品映像
- 聲明主題標誌
- 基本布局元素
- 布局文件類型和約定。
所以你的theme.xml文件應該是這樣的：
<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../lib/internal/ Magento/Framework/Config/etc/theme.xsd”> <title>Session Default</title> <parent>Magento/blank</parent> </theme>
主題結構
app/design/frontend/mageplaza/ ├── ultimate/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── registration.php │ ├── theme.xml │ ├── composer.json
二，創建Magento主題文件夾
Creating a folder for the theme:
- Go to
app/design/frontend- Creating a vendor folder
app/design/frontend/<vendor>e.g:app/design/frontend/mageplaza- Create a theme folder
app/design/frontend/<vendor>/<theme>e.g:app/design/frontend/mageplaza/ultimateapp/design/frontend/ ├── mageplaza/ │ │ ├──...ultimate/ │ │ │ ├── ... │ │ │ ├── ...
三，聲明你的主題
現在我們有文件夾
app/design/frontend/mageplaza/ultimate，現在創建一個名為 theme.xml 的文件，定義關於主題的基本信息，例如：名稱，父主題（如果你的主題繼承現有主題），預覽圖像
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Mageplaza Ultimate</title> <!-- your theme‘s name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme‘s preview image --> </media> </theme>
四，composer包修改
Composer是PHP中依賴項管理的工具。它允許您聲明項目所依賴的庫，並為您管理（安裝/更新）它們。
如果要將主題作為包分發，請將composer.json文件添加到主題目錄，並在打包服務器上註冊該包。
composer.jsonexample:：
{ "name": "mageplaza/ultimate", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-blank": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } }
五，registration.php
您可以添加以下內容以將主題註冊到Magento 2
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, ‘frontend/mageplaza/ultimate‘, __DIR__ );
六，創建靜態文件
app/design/<area>/mageplaza/ultimate/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/
七，配置目錄產品映像
正如您在上面提到的主題結構中所看到的，有一個名為
etc/view.xml.的文件。這是配置文件。此文件是Magento主題所必需的，但如果存在於父主題中，則它是可選的。轉到 app/design/<area>/mageplaza/ultimate/ 並創建文件夾等文件view.xml您可以復制父主題中的view.xml文件，例如 app/design/frontend/Magento/blank/etc/view.xml.
讓我們更新目錄產品網格頁面的圖像配置。
<image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image>
在view.xml中，圖像屬性在元素範圍內配置：
<images module="Magento_Catalog"> ... <images/><image>元素的id和type屬性定義的每種圖像類型配置圖像屬性 <images module="Magento_Catalog"> <image id="unique_image_id" type="image_type"> <width>100</width> <!-- Image width in px --> <height>100</height> <!-- Image height in px --> </image> <images/>
八，聲明主題標誌 <theme_dir>/Magento_Theme/layout/default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"><body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/custom_logo.png</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page>
在Magento 2默認情況下，它使用
<theme_dir>/web/images/logo.svg, 在您的主題中，您可以更改為不同的文件格式，如png，jpg，但您必須聲明它。
九，基礎布局元素
Magento頁面設計的基本組件是塊和容器。
存在容器的唯一目的是將內容結構分配給頁面。除了包含的元素的內容之外，容器沒有其他內容。容器的示例包括標題，左列，主列和頁腳。
十，布局文件類型和約定
- 模塊和主題布局文件
以下術語用於區分不同應用程序組件提供的布局：
- 基本布局：模塊提供的布局文件。常規：
主題布局：主題提供的布局文件。常規：
- 頁面配置和通用布局文件：
<module_dir>/view/frontend/layout- 頁面布局文件:
<module_dir>/view/frontend/page_layout
- 頁面配置和通用布局文件：
<theme_dir>/<Namespace>_<Module>/layout- 頁面布局文件:
<theme_dir>/<Namespace>_<Module>/page_layout- 創建主題擴展文件
您只需要創建包含所需更改的擴展布局文件，而不是復制大量頁面布局或頁面配置代碼，然後修改要更改的內容。
添加擴展頁面配置或通用布局文件：
<theme_dir> |__/<Namespace>_<Module> |__/layout |--<layout1>.xml |--<layout2>.xml例如，要自定義
<Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml中定義的布局，您需要在自定義主題中添加具有相同名稱的布局文件，如下所示：
<theme_dir>/Magento_Catalog/layout/catalog_product_view.xml<theme_dir> |__/<Namespace>_<Module> |__/page_layout |--<layout1>.xml |--<layout2>.xml
- 覆蓋基本布局
如果 block （塊） 具有取消最初調用的方法的效果的方法，則不必覆蓋，在這種情況下，您可以通過添加調用取消方法的布局文件來自定義布局。
要添加覆蓋的基本布局文件（以覆蓋模塊提供的基本布局）：在以下位置放置具有相同名稱的布局文件：
<theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/base |--<layout1>.xml |--<layout2>.xml這些文件覆蓋以下布局：
<module_dir>/view/frontend/layout/<layout1>.xml<module_dir>/view/frontend/layout/<layout2>.xml- 覆蓋主題布局
要添加重寫主題文件（以覆蓋父主題布局）：
<theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/theme |__/<Parent_Vendor> |__/<parent_theme> |--<layout1>.xml |--<layout2>.xml這些文件覆蓋以下布局：
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
開始更多學習！Ref: Devdocs.magento.com, Stackoverflow.com
Magento 2 Theme Ultimate Guide - 如何創建Magento 2主題終極指南