这篇文章提供了有关创建并安装Magento2系统应用自定义模版的帮助,描述了Magento页面内容渲染过程并且有效地在系统视图层角度解释了如何创建一个新的模板主题。这也是Magneto2前端开发技术人员在开发过程中肯定会用到的一篇技术文章。

本文不包含任何自定义模块(插件)的视图主题开发以及Magento2后台的视图主题开发。

前端开发人员可以通过学习本指南创建自定义主题模版,为客户定制Magento2的前端视图界面。
我们将Magento2主题开发按照开发程度分为以下几个层次,不同层次的开发需要掌握不同的开发技术:

  • 通过修改CSS对网站进行相对简单的更改各种组件的颜色和外观,替换图片以及其它各种外观视觉效果的修改。

这个层次的修改不会更改页面的内容结构——也就是说网站依然会加载默认的布局和模版。
这个可以作为Magento2主题开发的起步,因为这个工作不需要太高的技术水平。

  • 在第一步的基础上再进一步——修改网站现有模块生成的HTML代码结构。

这个过程需要用到一些基础的PHP方法来修改网站的模版文件(.phtml)。
虽然涉及到PHP编程,但这个过程中通常是复制现有模板文件中的PHP代码到我们新创建的模版文件中。
这个部分的内容经常会在我们想要改变页面局部内容时用到,如我们要修改页面局部的内容但同时会用到这个区块中原有的一些方法和变量。

  • 下一个层次的开发操作就是更改页面的布局结构,即通过在页面上调用不同的函数方法来实现不同页面的布局构造。

这部分内容是通过Magento2布局机制实现的,不需要操作PHP编码来进行布局更改,但是Magento2的布局机制也是比较复杂的。

  • 最后,你可以自己创建一个新的模块为你的网站添加功能方法来拓展Magento2现有的网站功能或者已安装的第三方插件的功能。

本篇博客没有详细说明以上三个级别的主题定制如何操作,如需查看,请关注看后面发布的博客内容。
有关如何开发新模块(插件)的详细技术文章,请参考Magento2模块开发
除了要了解以上所说的内容之外,还需会使用PHP编程。

现在已经有一些关于视觉设计编辑器(VDE)的状态查询,目前它是Magento开发代码库的一部分。VDE可以分配和取消题材,编辑主题CSS和JS文件,更改页面布局以及WYSIWYG模式在页面上的管理块和位置。我们想澄清一点,为了达到更高优先级的目标,VDE不会是最初的Magento版本的一部分。VDE的未来计划将在以后进行传达。欢迎您继续为VDE提供意见,但请注意,我们将不会在短期内审查或处理这些意见。

Magento2前端开发前的准备工作

要实现本篇博客中讨论的内容,你需要安装并调试好一个可用的Magento2系统,并安装一个以下的浏览器版本:
网站前台、后台:

  • IE 11或更高版本,微软Edge浏览器,“最新-1”
  • 火狐浏览器,“最新-1”(所有操作系统)
  • 谷歌浏览器,“最新-1”(所有操作系统)
  • 苹果(Safari)浏览器,“最新-1”(苹果操作系统
  • iPad 2iPad Mini,iPad Retina(iOS 7及以上版本)的苹果浏览器,网站前台PC端视图
  • iPhone 4及以上版本或者iOS 7及以上版本的苹果手机浏览器,网站前台手机端视图
  • 安卓4及以上版本手机端谷歌浏览器, “最新-1”,网站前台手机端视图

其中“最新-1”表示最新发布的版本或者比最新发布的版本早一个版本的浏览器。
开始学习使用本指南前,必须熟悉以下内容:

  • CSS 和CSS3
  • HTML和HTML5
  • XML
  • JavaScript
  • 响应式设计(RWD)