美文网首页
magento2前端开发主题[一]

magento2前端开发主题[一]

作者: pointline | 来源:发表于2017-04-12 17:53 被阅读0次

    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/<theme>
    • 系统主题路径:vendor/magento/theme-frontend-<theme>

    创建一个主题

    开发之前有些先决条件

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

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

    创建

    • 在目录下创建自己的主题文件夹
    app/design/frontend/<your_vendor_name>/<your_theme_name>
    
    • 在主题文件夹下创建以下文件及文件夹
      • theme.xml
      • etc/view.xml
      • composer.json
      • registration.php
      • web
        • css
        • javascript
        • images
        • fonts
    • 在theme.xml文件中添加
    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
         <title>New theme</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.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中添加
    <?php
    /**
     * Copyright © 2015 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::THEME,
        'frontend/<Vendor>/<theme>',
        __DIR__
    );
    
    • 再将默认主题的view.xml拷贝一份到自己主题的view.xml
    <magento install dir>/vendor/magento/theme-frontend-luma/etc/view.xml
    里面的内容拷贝到自己的view.xml中
    

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

    blank_themeblank_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前端开发主题[一]

          本文链接:https://www.haomeiwen.com/subject/nunmattx.html