如何创建 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 过来改一下:

<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 (可选)

{
    "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

<?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/目录下。

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 目录并重新载入页面。否则可能看不到改变。

主题的文件夹结构

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,那就像这样:

<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 进行修改。

发表评论

电子邮件地址不会被公开。 必填项已用*标注