Magento 2 前端开发指南-简介

5.20K 浏览翻译
0 Comments

Magento 2 前端开发指南-简介

翻译：https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/bk-frontend-dev-guide.html


简介

这个文档介绍了定制主题的新建和安装。描述了 Magento 内容渲染的过程，并且解释了系统的视图层，以便高效的扩展和建立一个主题。这个文档也贯穿了前端开发人员的日常任务。

本文没有介绍开发定制模块的视图和定制 Magento 后台样式。
前端开发人员可以使用此文档新建一个自定义的主题，来给特定的客户量身定店铺样式。
可以通过一下几种方式来定制网站，但是它们所需的技术水平有所不同：
  1. 1. 可以给网站做一些相对简单的改变，比如，用 CSS 改变颜色，更改不同视觉效果的组建，替换图片等其它展示上的改变。
  2. 没有结构上的改变，意味着你要接受当前的页面结构。
  3. 因为它技术要求最低，所以是一个不错的切入点。
  4. 2. 比改变 CSS 和图片更进一步，就是改变当前模块生成的 HTML。
  5. 这步需要入门级的 PHP 的基础，以便调整 PHMTL 文件。
  6. 虽然涉及 PHP 代码，但是只需要从已经存在的模板（template）中复制一段 PHP 代码 粘贴到新的文件中，只是改变一下 HTML 的结构。
  7. 如果现有的 HTML 没有很多 CSS class name 或者 HTML 元素，这个方法可以达到你想要的效果。
  8. 3. 更复杂的是结构性的改变，在页面功能的移动，甚至是不同页面之间的移动。
  9. 这个方法是通过移动 Magneto 布局引擎（ layout engine）来实现。虽然改变布局不涉及 PHP 代码，但是布局引擎还是有点复杂的。
  10. 4. 最后一个方法，开发新的模块（module）来给网站添加新的自定义功能，或者扩展 Magneto 已有功能和第三方模块。

本片文章不涉及这三种定制，但是可以参考相应的开发者文档。

除了需要前面提到的技术，还需要 PHP 开发技能。

前端开发前提：
为了实现这个文档所讲的，你需要一个工作的 Magento 安装包和以下版本的浏览器：
店铺前端和后台：
  • Internet Explorer 11 or later, Microsoft Edge, latest–1
  • Firefox latest, latest–1 (any operating system)
  • Chrome latest, latest–1 (any operating system)
  • Safari latest, latest–1 (Mac OS)
  • Safari Mobile for iPad 2, iPad Mini, iPad with Retina Display (iOS 7 or later), for desktop storefront
  • Safari Mobile for iPhone 4 or later; iOS 7 or later, for mobile storefront
  • Chrome for mobile latest–1 (Android 4 or later) for mobile storefront
在这，latest-1 的意思是最新版本的前一个版本。
使用这个文档，你必须熟悉：
  • CSS 和CSS 3
  • HTML 和HTML 5
  • XML
  • Javascript
  • 自适应布局 (RWD)

0