{ Hello Magento 2 }

解决 Magento 2 应用问题,更注重深度挖掘。(ง •̀_•́)ง

0%

如何创建 Magneto 2 前端主题

本篇文章主要参考官方开发文档。原文:create a storefront theme有能力的尽量阅读原文。本文只是博主自我整理的一个概要。

准备

  1. 不要修改 Magneto 自带的主题文件。Magento 2 自带两个主题,luma 和 blank。luma 依赖于blank,相当于一个官方演示主题,未来可能变化,所以新建主题最好是以 blank 为基础。
  2. 切换成 developer 模式。模式影响 Magento 如何缓存静态文件。

创建 theme 文件夹

  1. 进入该目录 <your Magento install dir>/app/design/frontend
  2. 根据你个人或公司的名称起一个vendor name,比如ThankIT,所以我创建的文件夹是/app/design/frontend/ThankIT
  3. 在这个ThankIT文件夹下创建一个主题的名字,比如Pisces

声明主题

app/design/frontend/ThankIT/Pisces文件夹下创建theme.xml,这个文件至少要包含要声明的主题的名字,继承自哪个父主题(如果有父主题的话)。声明主题的预览图片是可选的,可以不声明。
可以从luma 主题拷贝一个theme.xml 过来改一下:

1
2
3
4
5
6
7
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>ThankIT Pisces</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

注意:<parent>是和registration.php中的声明一致,注意大小写。<preview_image>如果声明请确保app/design/frontend/ThankIT/Pisces/media/preview.jpg存在,不然会报错。

composer.json (可选)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "thankit/theme-frontend-pisces",
"description": "N/A",
"require": {
"php": "~5.5.0~5.6.0~7.0.0",
"magento/theme-frontend-blank": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}

创建 registration.php

1
2
3
4
5
6
7
8
9
10
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/ThankIT/Pisces',
__DIR__
);

配置图片

产品图片及其他属性在view.xml 文件中配置。如果你有父主题,并且不想改什么,也可以不要用他。
app/design/frontend/ThankIT/Pisces/目录下创建etc/view.xml(拷贝一个过去改改。怎么改参考:Configure images properties for a theme)

创建 web 存放静态文件

静态文件包括styles,fonts,javaScript,images,这些都放在app/design/frontend/ThankIT/Pisces/web/目录下。

1
2
3
4
5
6
7
app/design/<area>/<Vendor>/<theme>/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/

.../<theme>/web/images放和主题相关的图片,比如主题的logo。主题文件里很有可能包含模块相关的文件,模块相关的文件路径是这样的.../<theme>/<Namespace_Module>/web/css

在主题开发过程中,如果你修改了web文件夹中的文件,请清空pub/static 和var/view_preprocessed 目录并重新载入页面。否则可能看不到改变。

主题的文件夹结构

1
2
3
4
5
6
7
8
9
10
app/design/frontend/<Vendor>/
├── <theme>/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── registration.php
│ ├── theme.xml
│ ├── composer.json

主题的logo 默认的名字和格式是logo.svg,只要把logo.svg 图片放在<theme_dir>/web/images 路径下,系统就会识别他为主题的logo,当主题被应用时,页面头部就会显示这个logo。

如果你不想用默认的名字和格式,就要声明它。

创建<theme_dir>/Magento_Theme/layout/default.xml并声明,假设你的logo 文件是my_logo.png大小是300*300px,那就像这样:

1
2
3
4
5
6
7
8
9
10
11
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/my_logo.png</argument>
<argument name="logo_img_width" xsi:type="number">300</argument>
<argument name="logo_img_height" xsi:type="number">300</argument>
</arguments>
</referenceBlock>
</body>
</page>

关于layout 更多参考:Layout overview

应用主题

在后台,进入 CONTENT > Design > Configuration 进行修改。