Magento主题概述-Magento零基础到架构师(内容设计)

当前位置:　首页>> 技术小册>> Magento零基础到架构师(内容设计)

主题是确定商店视觉呈现方式的文件集合。 首次安装时 Commerce，则该存储库的设计元素基于 默认 主题。 除了我们的电子邮件所附的初始默认主题之外， Commerce 安装时，我们可以使用多种可用的主题 原样 或根据我们的需求进行修改。

响应式主题调整页面布局以适合设备的视图端口。 示例 Luma 主题具有灵活的响应式布局，可以从桌面、平板电脑或移动设备中查看。

Commerce 主题包括布局文件、模板文件、翻译文件和外观。 外观是支持CSS、图像和JavaScript文件的集合，这些文件共同创建客户访问我们的商店时体验的可视展示和交互。 理解Commerce主题设计且具有服务器访问权限的开发人员或设计专业人员可以修改和自定义主题和外观。

![](/uploads/images/20240706/7efcb7984436c981d0fceaac72ab00d3.png)

**默认主题**

此 Magento Blank 响应式主题呈现不同设备的店面显示，并融合了桌面、表格和移动设备的最佳实践。 某些主题仅设计用于特定设备。 时间 Commerce 检测特定浏览器ID或用户代理，它会使用为特定浏览器配置的主题。 搜索字符串还可以包含与Perl兼容的正则表达式(PCRE)。

![](/uploads/images/20240706/f4277c1b0125e037f2e8e600c40c9158.png)

**筛选主题网格**

在 管理员 侧栏，转到 Content > Design>Themes.

单击 Filters.

输入ID范围、主题名称（或标题）、文件夹路径或父主题。

单击 Apply Filters 更新主题列表。

**查看当前主题设置**

在 管理员 侧栏，转到 Content > Design>Themes.

在已安装的主题列表中，找到要检查的主题，然后单击行以显示设置。

要查看示例页面，请单击 Theme Preview Image.

![](/uploads/images/20240706/40f30645aae04a6e8f07060643318899.png)

**应用默认主题**

在 管理员 侧栏，转到 Content > Design>Configuration.

查找要配置的商店视图，然后单击 Edit 在 Action 列。

下 Default Theme，设置 Applied Theme 到要用于当前视图的。

![](/uploads/images/20240706/c8a8b4c08aec27bfcc2fb0880a81b882.png)

完成后，单击 Save Configuration.

**添加用户代理规则**

在 管理员 侧栏，转到 Content > Design>Configuration.

下 Design Rule，单击 Add New User Agent Rule.

![](/uploads/images/20240706/53ad28e7e90ebb682785405551d4ac84.png)

对象 Search String，输入特定设备的浏览器ID。

搜索字符串按输入顺序进行匹配。 例如，对于Firefox，输入：

```bash
/^mozilla/i
```

要输入其他设备，请重复此过程。

完成后，单击 Save Configuration.