12.创建主题
2015-12-31 10:24
239 查看
1. 创建一个主题
2.创建一个主题目录
为你的主题创建目录:
文件夹名称通常匹配主题代码的命名:供应商认可的任何字幕数字字符集。该公约仅仅是一个建议,并未阻止以另一种方式命名。
3.声明你的主题
在创建了主题目录以后,你必须创建包含至少主题名和父主题名(如果主题继承自一个主题)的theme.xml。你也可以指定主题预览图的存储位置。
4. 为你的主题写一个Composer包(可选)
Magento默认的主题被创建为Composer包。要把你的主题写成一个包,添加一个composer.json文件到主题目录下并在包服务器上注册这个包。默认的公共包装服务器https://packagist.org/。
提供主题相关信息。下面是一个主题code>composer.json的示例:
5.添加registration.php
要在系统中注册你的主题,你需要用下面的内容在你的主题目录下创建一个registration.php:
这里的是你供应商的名字,theme是你主题的名字。你可以查看Luma主题的registration.php文件。
6.配置图片
产品图片大小和其它店铺前端性能在view.xml里被配置。它需要一个主题,但是否有父主题都可。 如果你主题里的产品图片与父主题不同,或者你的主题没有继承任何主题,用下面的步骤添加一个view.xml
7.创建静态文件目录
你的主题将包含几种静态文件:样式,字体,JavaScript和图片。每种类型的图片都被存储在web目录下的独立子目录中:
当前你主题的目录结构
当前,你的主题目录看起来是这样的:
8.主题logo
在Magento2中,默认的logo名字和格式是logo.svg。当你把一个logo.svg放在常规位置(< theme_dir>/web/images目录)中,它就会被自动识别为主题logo。主题被应用时就会出现在店铺页面的头部。
在你自定义的主题中,你可以使用不同名字和格式的logo,但是你可能需要声明它。
是否需要声明取决于你的主题是否有父主题以及它的logo图片。可能是下面的情况:
9.声明主题图片
要声明一个主题logo,需要添加一个扩展的< theme_dir>/Magento_Theme/layout/default.xml布局。
例如,如果你的logo文件是my_logo.png,尺寸为300x300像素,你可以如下声明它:
声明logo尺寸是可选的。更多关于主题的布局,会在之后的文章中详细讲解
2.创建一个主题目录
为你的主题创建目录:
1.进入/app/design/frontend. 2.根据你供应商的名字创建一个新的目录/app/design/frontend/ 3.在vendor目录下,根据你的主题创建一个目录
文件夹名称通常匹配主题代码的命名:供应商认可的任何字幕数字字符集。该公约仅仅是一个建议,并未阻止以另一种方式命名。
3.声明你的主题
在创建了主题目录以后,你必须创建包含至少主题名和父主题名(如果主题继承自一个主题)的theme.xml。你也可以指定主题预览图的存储位置。
1.添加或者拷贝已有的theme.xml到你的主题目录app/design/frontend//下。 2.用下面的示例来配置theme.xml:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>New theme <!-- your theme's name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image --> </media> </theme>
4. 为你的主题写一个Composer包(可选)
Magento默认的主题被创建为Composer包。要把你的主题写成一个包,添加一个composer.json文件到主题目录下并在包服务器上注册这个包。默认的公共包装服务器https://packagist.org/。
composer.json
提供主题相关信息。下面是一个主题code>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/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } }
5.添加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/<Vendor>/<theme>', __DIR__ );
这里的是你供应商的名字,theme是你主题的名字。你可以查看Luma主题的registration.php文件。
6.配置图片
产品图片大小和其它店铺前端性能在view.xml里被配置。它需要一个主题,但是否有父主题都可。 如果你主题里的产品图片与父主题不同,或者你的主题没有继承任何主题,用下面的步骤添加一个view.xml
1.以可以创建文件夹权限的用户(通常情况下,是Magento的文件系统的所有者)登录到Magento服务器中。 2.在你的主题目录下创建etc文件夹 3.从已有主题中拷贝view.xml文件(例如,从Blank主题)到你主题的etc文件夹中。 4.在view.xml中配置所有店铺前端产品图片尺寸。例如,你可以指定分类网格视图产品图片为250x250像素,相应的配置会是这样:
... <image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image> ...
7.创建静态文件目录
你的主题将包含几种静态文件:样式,字体,JavaScript和图片。每种类型的图片都被存储在web目录下的独立子目录中:
app/design/<area>/<Vendor>/<theme>/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/
当前你主题的目录结构
当前,你的主题目录看起来是这样的:
app/design/frontend/<Vendor>/ ├── / │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── theme.xml │ ├── composer.json
8.主题logo
在Magento2中,默认的logo名字和格式是logo.svg。当你把一个logo.svg放在常规位置(< theme_dir>/web/images目录)中,它就会被自动识别为主题logo。主题被应用时就会出现在店铺页面的头部。
在你自定义的主题中,你可以使用不同名字和格式的logo,但是你可能需要声明它。
是否需要声明取决于你的主题是否有父主题以及它的logo图片。可能是下面的情况:
你的主题没有父主题: 如果你的logo图片名字和格式是默认的,logo.svg,那么就不需要声明它。 如果你的logo图片名字和格式不是默认的就需要声明它。 不的主题有父主题 如果你的主题logo图片名字和格式与父主题的logo一样,那么就不需要声明它。 如果你的logo图片有不同的名字和格式就需要声明它。
9.声明主题图片
要声明一个主题logo,需要添加一个扩展的< theme_dir>/Magento_Theme/layout/default.xml布局。
例如,如果你的logo文件是my_logo.png,尺寸为300x300像素,你可以如下声明它:
<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>
声明logo尺寸是可选的。更多关于主题的布局,会在之后的文章中详细讲解
相关文章推荐
- QPushButton按回车发射信号或者界面的回车按键响应
- 151205ArrayDemo
- 151205FunctionOverloadDemo
- 关于BigDecimal的四舍五入和截断 (2007-08-10 15:06:26)
- Java位运算符
- [转]安卓开发startservice 和bindservice详解
- 用Android UEventObserver监听内核event
- hibernate-validator实现入参校验(包含get与post)
- Sublime Text 3
- Jetty实战之 安装 运行 部署
- 需求分析案例
- loadrunner脚本中参数化和返回值输出log到外部文件
- IOS中通知中心(NSNotificationCenter)的使用总结
- HTML页面弹出窗口调整代码总结
- iOS开发中的测试框架 (转载)
- 表达式求值c语言
- Android布局之TableLayout表格布局
- 运维不再专业救火 不会PHP照样找出代码性能问题
- 毕业一年小结——说好的战斗呢?
- 期末考试程序设计题目,求大神指导