magento2前端开发主题[一]

magento2前端对设备的支持情况:

  • Internet Explorer 11或更高版本,Microsoft Edge最新版
  • Firefox最新版(任何操作系统)
  • Chrome最新版(任何操作系统)
  • Safari最新版(Mac OS)
  • Safari Mobile(iOS 7 或更高的版本)
  • Chrome for Mobile最新版(Android 4或更高的版本)

magento2主题路径

  • 用户主题路径:app/design/frontend/Magento/
  • 系统主题路径:vendor/magento/theme-frontend-

创建一个主题

开发之前有些先决条件

为了兼容性,可升级性和易于维护,不要修改magento自带的主题,需要定义自己的主题
在开发主题时需要将magento应用程序设置为开发者模式(developer),

查看当前magento应用程序在什么模式下,默认是default:
 /bin/magento deploy:mode:show
修改为developer或production模式
 /bin/magento deploy:mode:set developer

创建

  • 在目录下创建自己的主题文件夹
app/design/frontend//
  • 在主题文件夹下创建以下文件及文件夹
    • theme.xml
    • etc/view.xml
    • composer.json
    • registration.php
    • web
      • css
      • javascript
      • images
      • fonts
  • 在theme.xml文件中添加

     New theme 
     Magento/blank 
     
         media/preview.jpg 
     
 
  • 把自己定义的主题作为composer软件包,在composer.json文件添加
{
    "name": "magento/theme-frontend-peter",
    "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"
        ]
    }
}
  • 在magento2中注册自己的主题,需要在registration.php中添加
/',
    __DIR__
);
  • 再将默认主题的view.xml拷贝一份到自己主题的view.xml
/vendor/magento/theme-frontend-luma/etc/view.xml
里面的内容拷贝到自己的view.xml中

那基本的自定义主题就完成了,当前主题继承自blank主题

blank_theme

原文出自:https://pointline.github.io/2017/04/12/magento2%E5%89%8D%E6%AE%B5%E5%BC%80%E5%8F%91-%E4%B8%80/

你可能感兴趣的:(magento2前端开发主题[一])