碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2018-07-08 12:27   1124    Magento

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 2的Bl​​ank主題。

 

Magento主題目錄的結構通常如下所示：

<theme_dir>/
├── <Vendor>_<Module>/
│   ├── web/
│   │   ├── css/
│   │   │   ├── source/
│   ├── layout/
│   │   ├── override/
│   ├── templates/
├── etc/
├── i18n/
├── media/
├── web/
│   ├── css/
│   │   ├── source/
│   ├── fonts/
│   ├── images/
│   ├── js/
├── composer.json
├── registration.php
├── theme.xml

讓我們仔細看看每個特定的子目錄。

 

目錄 需要 描述
/<Vendor>_<Module> 可選的 特定於模塊的樣式，布局和模板。
/<Vendor>_<Module>/web/css/ 可選的 特定於模塊的樣式（.css和/或.less文件）。模塊的常規樣式在_module.less文件中，而小部件的樣式在中_widgets.less。
/<Vendor>_<Module>/layout 可選的 擴展默認模塊或父主題布局的布局文件。
/<Vendor>_<Module>/layout/override/base 可選的 覆蓋默認模塊布局的布局。
/<Vendor>_<Module>/layout/override/<parent_theme> 可選的 覆蓋模塊父主題布局的布局。
/<Vendor>_<Module>/templates 可選的 此目錄包含主題模板，這些主題模板將覆蓋此模塊的默認模塊模板或父主題模板。自定義模板也存儲在此目錄中。
/etc/view.xml 一個主題是必需的，但是如果父主題中存在它是可選的 該文件包含所有店面產品圖像和縮略圖的配置。
/i18n 可選的 .csv文件及其翻譯。
/media 可選的 該目錄包含主題預覽（主題的屏幕快照）。
/web 可選的 可以直接從前端加載的靜態文件。
/web/css/source 可選的 該目錄包含主題 less 配置文件，該文件調用Magento UI庫中全局元素的mixins，該 theme.less 文件覆蓋默認變量值。
/web/css/source/lib 可選的 查看覆蓋存儲在其中的UI庫文件的文件 lib/web/css/source/lib
/web/fonts 可選的 主題字體。
/web/images 可選的 此主題中使用的圖像。
/web/js 可選的 主題JavaScript文件。
/composer.json 可選的 描述主題依賴關系和一些元信息。如果您的主題是Composer軟件包，它將在這里。“名稱”字段必須采用格式"<vendor-name>/theme-<area>-<theme-name>"。
/registration.php 需要 在系統中注冊主題所需。
/theme.xml 需要 該文件是強制性的，因為它將主題聲明為系統組件。如果主題是從現有主題繼承的，則它包含基本的元信息，例如主題標題和父主題名稱。Magento系統使用該文件來識別主題。

靜態文件可以位於主題目錄中，如下所示：

<theme_dir>/
├── media/
├── web
│   ├── css/ (except the "source" sub-directory)
│   ├── fonts/
│   ├── images/
│   ├── js/

動態視圖文件位於主題目錄中，如下所示：

<theme_dir>/
├── Magento_<module>/
│   ├── web/
│   │   ├── css/
│   │   │   ├── source/
│   ├── layout/
│   │   ├── override/
│   ├── templates/
├── web/
│   ├── css/
│   │   ├── source/
-------------------------------
-----------------------------------------

一，創建基礎主題 與 基本指南

  • 創建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/ultimate
app/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.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> <!-- 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


免責聲明！

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



猜您在找 Magento 2 Block模板終極指南 Magento開發完整指南 Magento 2開發教程 - 創建新模塊 [整理] magento搬家 magento2安裝步驟 magento導入數據的方法 Magento常用插件集合! Magento獨立站建站 Magento開發常用方法 Magento 如何安裝插件/模塊.
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM