Magento 2 Theme Ultimate Guide - 如何建立Magento 2主題終極指南

時間 2019-11-21

標籤 magento theme ultimate guide 如何建立主題終極指南简体版

原文原文鏈接

Magento 2 Theme Ultimate Guide - 如何建立Magento 2主題基礎指南javascript

在Magento 2中管理和設置主題的方式有不少改進.Magento 1.9中引入的theme.xml定義文件和新的回退系統的使用是兩個最重要的改進。Magento 2中的後備系統與Magento 1.x的工做方式相似，可是具備額外的優點，您能夠選擇無限的父主題繼承/後退到php

所有經過主題中的theme.xml文件。

假設您想基於新的Magento「Blank」主題建立一個全新的主題。首先，您將在 app/design/frontend 中建立一個名爲Session / default的新文件夾。而後，您將在此目錄中建立一個theme.xml文件（最好從 app/design/frontend/Magento/blank/theme.xml 複製它），命名您的主題，而後選擇任何父級。在這種狀況下，咱們想要Magento 2的Blank主題。css

一，建立基礎主題與基本指南html

建立Magento主題文件夾
聲明你的主題
Composer package
registration.php文件
建立靜態文件，文件夾
朗讀配置目錄產品映像
聲明主題標誌
基本佈局元素
佈局文件類型和約定。

　　因此你的theme.xml文件應該是這樣的：

java

<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>

主題結構web

app/design/frontend/mageplaza/
├── ultimate/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── logo.svg
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

二，建立Magento主題文件夾
json

Creating a folder for the theme:bash

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/ultimate
app/design/frontend/
├── mageplaza/
│   │   ├──...ultimate/
│   │   │   ├── ...
│   │   │   ├── ...

三，聲明你的主題服務器

如今咱們有文件夾 app/design/frontend/mageplaza/ultimate ，如今建立一個名爲 theme.xml 的文件，定義關於主題的基本信息，例如：名稱，父主題（若是你的主題繼承現有主題），預覽圖像app
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Mageplaza Ultimate</title> 
     <parent>Magento/blank</parent> 
     <media>
         <preview_image>media/preview.jpg</preview_image> 
     </media>
 </theme>

四，composer包修改

Composer是PHP中依賴項管理的工具。它容許您聲明項目所依賴的庫，併爲您管理（安裝/更新）它們。

若是要將主題做爲包分發，請將composer.json文件添加到主題目錄，並在打包服務器上註冊該包。

composer.json example:：
{
    "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>  
        <height>100</height> 
	</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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。