主题Magento前台开发

magento 时间:2021-03-20 阅读:()

概述

本文将介绍Magento前端主题的创建与安装。

它描述Magento的内容呈现过程并说明在系统展示层扩展系统主题建立一个用户主题的要求。该文件还遍历前端开发人员的日常工作任务。

开发前端视图的部分模块和定制后台界面已经超出了本指南的范围。

前端开发人员可以使用本指南创建符合客户需求的前端界面。你可以把本级别的内容应用到自定义你的网站中这些级别需要开发者拥有不同的开发技能

 你可以让你的网站使用层叠样式表CSS来改变颜色和相对简单的改变各种接口部件的外观和体验更换图像和其他相对表面的东西。

不会更改页面结构你必须接受通过加载到您的网站的模块提供的默认结构。

这对于一个网站来说是一个很好的起点因为它需要最少的努力和知识。

 相对CSS更深层的是修改模块生成的HTML 这就需要基本的PHP知识用来修改PHTML模板文件。

尽管涉及到PHP代码但这通常只是复制粘贴PHP代码段到不同HTML结构的模板文件而已。

这通常针对缺少足够的CSS类名或HTML元素来实现前台效果的情况非常有用。

 更深层次的修改是通过在页面上或不同页面之间移动功能函数实现结构的更改。

这需要使用布局引擎来实现虽然修改布局没有涉及到PHP编码但布局引擎相对复杂一些。

 最后你可以为您的网站开发全新的模块实现自定义的功能或者扩展Magento提供的模块也可以通过第三方提供的扩展来实现。

(Magento有一款视觉设计编辑器-VDE可以实现WYSIWYG编辑器模式下在线指定或取消指定主题、编辑CSS和JS文件修改页面布局、管理块和其在页面中的位置)

前端开发的先决条件

学习本指南前需要安装Magento并在电脑上安装以下版本的浏览器

 Internet Explorer and Microsoft Edge(Windows)

 前台: Internet Explorer 9 or later

 后台: Internet Explorer 1 1 or later,Microsoft Edge, latest–1

其它浏览器(能适用于前台和后台)

 Magento后台: Internet Explorer 1 1 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 Mobi le for iPad 2, iPad Mini , iPad with Retina Display(iOS 7 or later), for desktop storefront Safari Mobi le for iPhone 4 or later; iOS 7 or later, for mobi le storefront

 Chrome for mobi le latest–1 (Android 4 or later) for mobi le storefront

要用好本指南你需要熟悉以下技术

 CSS and CSS 3

 HTMLand HTML5

 XML

 JavaScript

 Responsive Web Design(RWD)

模块和主题的常用标签

Magento应用组件包括模块、主题和语言包技术上可以放在Magento根目录下的任何地方这指的是Magento的默认和自定义组件。

以下相对路径用于模块和主题

<theme_dir>

主题目录针对用户主题和一般主题会经常用到。

对于超出Magento前台的主题使用以下绝对路径

 app/design/frontend/Magento/<theme>

 vendor/magento/theme-f rontend-<theme>

<module_dir>

模块文件夹针对个别Magento模块也会用到下面这个接近的标签

<Magento_Checkout_module_dir>

对于Magento模块通常使用下面的路径

 app/code/Magento/<Module>

 vendor/magento/module-<module>-<name>

主题

在Magento中添加一款主题步骤如下

1 在app/design/f rontend/<your_vendor_name>/<your_theme_name>目录下创建一个文件夹2 添加一个主题申明文件theme.xml 并创建etc文件夹在里面添加一个view.xml文件。

3 创建composer.json文件

4 创建registration.php文件

5 创建放CSS、 JS、 images、 font的文件夹

6 在后台控制面板配置主题

创建前台主题

本节将讨论如何创建一套主题的文件如何给主题添加一个Logo以及如何调整图像。

开发前准备工作

 对于兼容性可升级性维护方便起见不要修改Magento的默认主题为你的定制设计创建一个新的自定义主题。 设置你的Magento应用程序为开发模式。应用模式的静态文件由Magento缓存会影响开发刷新。关于主题的开

发我们在本章中建议默认使用开发者模式。

创建主题目录

1 转到<your Magento install dir>/app/design/frontend 目录

2 根据你的商业名称创建一个包文件夹/app/design/frontend/<Vendor>

3 在包文件夹下创建一个主题名称文件夹app/design/frontend/

├──<Vendor>/

│ │ ├──. . .<theme>/

│ │ │ ├──. . .

文件夹名称通常匹配主题的代码命名使用任何字母数字字符集只要卖方认为合适是可以接受的。该约定仅仅是一个建议所以没有限制这个目录命名。

声明主题

创建好主题目录后你需要创建一个theme.xml文件里面至少注明主题的名称、父主题名称如果此主题从另一个主题继承 你也可以指定主题缩略图的路径不是必需的 。

1 创建或者拷贝一个theme.xml文件到你的主题根目录app/design/frontend/<Vendor>/<theme>2 按以下样式配置文件

<themexmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>New theme</title>

<parent>Magento/blank</parent>

<media>

<preview_image>media/preview.jpg</preview_image>

</media>

</theme>

如果你的主题注册以后修改了theme.xml里面的主题名称或父主题信息需要重新打开或刷新一个后台页面让系统重新更新数据库信息。

为你的主题创建Composer包可选

Magento的默认主题以Composer包发行的。要创建Composer包需要添加composer.json文件到你的主题目录并在包服务器上注册你的包默认公用包服务器是https://packagist.org/.composer.json文件提供主题的依赖信息以下是包配置文件的示例

{

"name": "magento/theme-frontend-luma",

"description" : "N/A",

"require" :{

"php" :"~5.5.0|~5.6.0|~7.0.0",

"magento/theme-frontend-blank" :"100.0.*" ,

"magento/f ramework" : "100.0.*"

"type": "magento2-theme",

"version" : "100.0.1",

"license" : [

"OSL-3.0",

"AFL-3.0"

] ,

"autoload" :{

"files" : [

"registration.php"

]

}

关于Composer集成的详细说明参见Composer integration.

创建registration.php

要在系统中注册你的主题需要在主题目录中创建registration.php文件内容如下

<?php

/**

* See COPYING.txt for license details.

\Magento\Framework\Component\ComponentRegistrar: :register(

\Magento\Framework\Component\ComponentRegistrar: :THEME,

'f rontend/<Vendor>/<theme>' ,

_DIR_

_ _

) ;

<Vendor>是开发者公司名 <theme>是主题代码

参见Magento Luma主题的registration.php文件

配置图像

网店用到的产品图片尺寸及其它属性在view.xml文件中定义这个文件是必须的但若存在于父主题的话这个文件是可选的。

如果你的主题里面使用的图片尺寸和父主题不一样或者你的主题不是从父主题继承来的请按以下步骤添加view.xml配置文件

1 使用有创建文件夹和文件权限的用户登录你的网站服务器通常是Magento文件系统所有者

2 在主题文件夹里面创建etc文件夹

3 从现有主题如空白主题的etc文件夹中拷贝view.xml文件到你主题的etc文件夹里面

4 在view.xml中配置所有前台用到的图像尺寸例如你可以配置前台缩略图列表中的图片尺寸为250x250像素配置文件的内容可能就是这样

. . .

<imageid="category_page_grid"type="small_image">

</image>

. . .view.xml配置文件的详细信息参见Configure images properties for a theme

为静态文件创建文件夹

你的主题可能会包含几种静态文件样式表、字体、 Javascript和图片每种类型的文件应该分别放在主题web里各自的文件夹下面app/design/<area>/<Vendor>/<theme>/

├──web/

│ ├──css/

│ │ ├──source/

│ ├──fonts/

│ ├──images/

│ ├──js/

在. . ./<theme>/web/images中存放网店常用的静态文件。例如主题的Logo放在. . .<theme>/web/images。你的主题很可能还包含特殊的模块文件存储在类似的子文件夹里面

如. . ./<theme>/<Namespace_Module>/web/css。怎么管理模块文件将在本教程后续章节中讨论。

注意开发过程中你改变放在这里的任何文件时需要删除pub/static和var/view_preprocessed文件夹然后重新载入页面否则前台将显示旧文件。

目前为止你的主题文件夹结构app/design/frontend/<Vendor>/

├──<theme>/

│ ├──etc/

│ │ ├──view.xml

│ ├──web/

│ │ ├──images

│ │ │ ├──logo.svg

│ ├──registration.php

│ ├──theme.xml

│ ├──composer.json

主题Logo

在Magento应用中默认的Logo文件名和文件格式是logo.svg。当你把一个logo.svg文件放在合适的文件夹下面 <theme_dir>/web/images  它将被自动识别为主题Logo 它将会在主题被应用时显示在网站顶部。

在自定义主题中你可以使用不同的文件名和文件格式但必须申明它。

申明的必要性取决于你是否拥有带Logo的父主题以下情况可能会出现

 你的主题没有父主题

 如果你的Logo名称和格式是默认的logo.svg你不需要申明

 如果你的Logo名称或格式不是默认的你需要在布局中申明见下节内容

 你的主题有父主题

 如果你的Logo名称和格式和父主题一样则不需要申明

 如果你的Logo名称或格式和父主题不一样则需要在布局中申明。

申明主题Logo

要申明主题Logo添加一个扩展布局文件<theme_dir>/Magento_Theme/layout/default.xml。

举例说明假如你的Logo文件是my_logo.png尺寸是300x300像素你需要申明如下

<pagexmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:f ramework:View/Layout/etc/page_configuration.xsd">

<body>

<referenceBlockname="logo">

<a rgumentname="logo_file"xsi:type="string">images/my_logo.png</a rgument>

<argumentname="logo_img_width"xsi:type="number">300</argument>

<argumentname="logo_img_height"xsi:type="number">300</argument>

</arguments>

</referenceBlock>

</body>

</page>

申明Logo尺寸是可选的

Magento主题结构

主题的存放位置