样式快速入门指南.docx

样式快速入门指南.docx

《样式快速入门指南.docx》由会员分享，可在线阅读，更多相关《样式快速入门指南.docx（11页珍藏版）》请在冰豆网上搜索。

样式快速入门指南

使用新主题的样式的快速入门指南

1.创建主题和更改样式的高级步骤

1.将您的Magento应用程序设置为developer模式。

2.在文件系统中，添加从MagentoBlank或Luma继承的新主题。

3.套用主题

4.决定使用哪种CSS编译模式。

编译模式描述如下：

∙详细说明：

样式调试

∙实例说明：

客户端LESS编译与服务器端的简单样式更改

5.自定义样式。

2.为什么需要创建自定义主题？

Magento提供了两个主题：

Blank和Luma。

如果Magento与示例数据一起安装，则安装后应用的主题是Luma。

如果未安装任何示例数据，则默认情况下会安装空白主题。

Luma继承自Blank，其中包含主题所需的所有基本功能和样式。

如果您实际上不需要更改其设计，则可以将Luma或Blank用于您的商店视图。

但是，如果您需要改进，则唯一推荐的方法是创建一个新主题。

它可以从Blank或Luma继承，因此您可以保留所有需要的内容，并更改或添加所需的内容。

开箱即用的主题中进行更改是一个坏主意，因为这可能会导致您的更改在升级过程中被覆盖。

3.自定义主题样式的简单方法

3.1.扩展父样式的最简单方法

要在主题中扩展父主题的样式，请执行以下操作：

1.在主题目录中，创建一个web/css/source子目录。

2.在此处创建文件_extend.less。

路径如下：

/

│├──web/

││├──css/

│││├──source/

│││├──_extend.less

...

3.在此文件中添加您的Less代码。

当您对父主题具有的所有功能都满意，但又想添加更多样式时，使用_extend.less主题扩展是最简单的选择。

_extend.less中声明的规则和变量始终优先于_theme.less中声明的规则和变量。

3.2.覆盖父样式的最简单方法

要覆盖父样式（即，覆盖默认的MagentoUI 库变量）：

1.在主题目录中，创建一个web/css/source子目录。

2.在此处创建文件_theme.less。

然后，它的路径如下所示：

/

│├──web/

││├──css/

│││├──source/

│││├──_theme.less

...

重要的是要记住，_theme.less覆盖父级_theme.less。

3.从父级_theme.less复制您需要的所有变量，包括那些不会更改的变量。

例如，如果您的主题是从“Blank”继承而来的，则您应该从/web/css/source/_theme.less中复制_theme.less。

4.进行必要的更改。

这种方法的缺点是，每当父类的_theme.less更新时，都需要监视并手动更新文件。

3.3.添加结构化更改

为了使您的更改更易于阅读和支持，请通过.less为更改的每个MagentoUI库组件添加单独的覆盖或扩展文件来结构化它们。

让我们以_button.less中button实现的组件为例。

3.3.1.扩展组件的样式

1.在主题目录中，创建一个web/css/source子目录。

2.添加_buttons_extend.less和_extend.less。

文件的路径如下所示：

│├──web/

││├──css/

│││├──source/

│││├──_buttons_extend.less

│││├──_extend.less

...

3.在_buttons_extend.less添加按钮组件的样式。

4.在_extend.less注册_buttons_extend.less中加入以下的代码：

@import'_buttons_extend.less';

3.3.2.覆盖组件的样式

要覆盖主题中按钮的父主题样式：

1.在主题目录中，创建一个web/css/source子目录。

2.在此处创建文件_buttons.less。

路径如下：

/

│├──web/

││├──css/

│││├──source/

│││├──_buttons.less

...

此文件将覆盖_buttons.less的父主题。

3.为按钮组件添加样式。

如果该文件留为空白，则该组件不应用任何样式。

3.3.3.扩展模块样式

要在主题中扩展模块的样式，请执行以下操作：

1.在主题目录中，创建一个Module_Name/web/css/source目录。

2.在主题目录中创建一个文件_extend.less。

例如：

/

├──/

│├──web/

││├──css/

│││├──source/

├──_extend.less

...

3.在_extend.less文件中添加其他样式。

例如，要扩展Magento_Review模块的样式，目录路径应为/Magento_Review/web/css/source/_extend.less。

3.3.4.覆盖模块样式

要在主题中覆盖模块样式：

1.在主题目录中，创建一个Module_Name/web/css/source目录。

2.在主题目录中创建一个文件_module.less。

例如：

/

├──/

│├──web/

││├──css/

│││├──source/

|||├──_module.less

...

该文件将覆盖_module.less特定模块的文件。

3.在_module.less文件中添加样式。

例如，要覆盖Magento_Review模块的样式，目录路径应为/Magento_Review/web/css/source/_module.less

4.客户端LESS编译与服务器端的简单样式更改

您之后创建的主题，你需要决定改变风格前要使用的LESS编译模式。

您可以选择以下两种模式：

∙服务器端编译模式（默认）：

使用PHP更少的库来编译更少的文件。

在开发人员模式下，如果尚无PHP文件，PHP将即时生成CSS文件。

运行静态内容部署将编译样式表。

∙客户端编译模式（建议用于主题开发）：

每次页面加载时，客户端编译的文件较少，这会导致响应时间变慢并出现“未样式化文本闪烁”（FOUT）问题。

本主题中的示例使用简单的方法来自定义主题样式。

您对_extend.less文件进行更改。

在我们的示例中，我们将更改主按钮的颜色和字体。

客户登录页面上的“ CreateanAccount”按钮视图可以说明主要按钮的默认视图：

4.1.在你开始之前

1.创建一个主题。

在theme.xml文件中，将MagentoLuma或MagentoBlank指定为父主题。

2.在MagentoAdmin中应用您的主题。

4.2.使用服务器端编译模式

下面是在服务器端LESS编译模式下进行简单更改的过程的说明：

1.导航到您的主题目录并添加web/css/source/_extend.less文件。

2.通过在_extend.less文件中添加以下代码来更改按钮的颜色：

.action{

&.primary{

background-color:

palevioletred;

border-color:

palevioletred;

}

}

3.清理静态文件缓存。

4.刷新页面并确认您的更改。

5.通过在_extend.less文件中添加以下代码来更改按钮字体大小：

.action{

&.primary{

background-color:

palevioletred;

border-color:

palevioletred;

font-size:

1.5em;

}

}

6.删除以下目录中的所有文件：

opub/static/frontend//

ovar/view_preprocessed/pub/static/frontend//

7.刷新页面并确认您的更改。

如果使用服务器端编译模式，则必须清除生成的静态视图文件。

继续下一节，学习如何使用Grunt自动化该过程。

4.3.在Grunt上使用服务器端编译模式

1.导航到您的主题目录并创建一个web/css/source/_extend.less文件。

2.按照安装和配置Grunt中所述安装Grunt并注册您的主题。

3.在您的Magento安装目录中，运行以下命令：

ogruntexec:

ogruntless:

ogruntwatch

4.通过在_extend.less文件中添加以下代码来更改按钮的颜色：

.action{

&.primary{

background-color:

palevioletred;

border-color:

palevioletred;

}

}

5.刷新页面并确认您的更改。

6.通过在_extend.less文件中添加以下代码来更改按钮字体大小：

.action{

&.primary{

background-color:

palevioletred;

border-color:

palevioletred;

font-size:

1.5em;

}

}

7.刷新页面并确认您的更改。

4.4.使用客户端编译模式

1.导航到您的主题目录并创建一个web/css/source/_extend.less文件。

2.登录到MagentoAdmin。

3.单击STORES > Settings > Configuration > ADVANCED > Developer > Frontenddevelopmentworkflow > Workflowtype。

4.将LESS编译模式更改为client-side。

5.清理静态视图文件。

6.通过在_extend.less文件中添加以下代码来更改按钮的颜色：

.action{

&.primary{

background-color:

palevioletred;

border-color:

palevioletred;

}

}

7.刷新页面并确认您的更改。

8.通过在_extend.less文件中添加以下代码来更改按钮字体大小：

.action{

&.primary{

background-color:

palevioletred;

border-color:

palevioletred;

font-size:

1.5em;

}

}

9.刷新页面并确认您的更改。

当您的Magento实例处于客户端Less编译模式时，在保存或刷新页面后将应用简单的更改。

要进行更复杂的更改，您可能需要手动清理目录中的主题子目录pub/static/frontend并生成新的部署。

请参阅样式调试。