Magento创建主题

本主题讨论如何创建,使用主题,如何将徽标添加到主题文件中以及如何调整图像大小。
先决条件
1.对于兼容性,可升级性,维护方便起见,不修改开箱Magento的主题。要自定义您的Magento商店的设计,创建一个新的自定义主题。
2.设置你的Magento应用程序开发模式。应用模式影响的静态文件由Magento的缓存的方式。关于主题的发展,我们在本章中所提供的建议是开发者/默认的模式而异。
创建主题目录
要创建您的主题目录:
1.Go to /app/design/frontend.
2.创建根据您的Vendor的名字命名一个新的目录: /app/design/frontend/.
3.在Vendor目录中,创建一个根据你的主题命名的目录。

app/design/frontend/
├── <Vendor>/
│ │ ├──...<theme>/
│ │ │ ├── ...
│ │ │ ├── ...
(感谢magento技术服务商麦进斗科技提供案例代码)
文件夹名称通常匹配主题的代码命名使用:任何字母数字字符集,作为卖方认为合适,是可以接受的。该公约仅仅是一个建议,所以没有什么能够阻止以另一种方式在这个目录命名。
声明你的主题
您为您的主题创建一个目录后,必须创建theme.xml至少包含主题名称和父主题名称(如果主题从一个继承)。您还可以指定主题预览图像的存储位置。
1.添加或复制theme.xml到您的主题目录
2.使用下面的示例配置:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>New theme</title> <!-- 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>
(感谢magento技术服务商麦进斗科技提供案例代码)

使用你的主题composer包
Magento的默认主题分布在composer包。
要分发你的主题作为一个包,一个composer.json文件添加到主题目录并注册打包服务器上的包。默认的公共打包服务器是https://packagist.org/。
composer.json提供主题的相关性信息。
一个主题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"
]
}}

(感谢magento技术服务商麦进斗科技提供案例代码)

你可以找到关于composer于一体的Magento的系统集composer细节。
添加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);

(感谢magento技术服务商麦进斗科技提供案例代码)
‘frontend//‘是你的Vendor名称,是主题代码。
为了说明,请参阅Magento的亮度主题registration.php的文件。
配置图片
产品图片的大小和对店面的其他属性都在view.xml用配置文件来配置。它需要一个主题,但如果存在于父主题是可选的。
如果你的主题产品的图像尺寸不同于父主题的不同,或者如果你的主题没有任何主题继承,使用以下步骤添加view.xml用:
1.登录到您的Magento服务器作为权限的用户在安装的Magento目录下创建的目录和文件。 (通常情况下,这是Magento的文件系统所有者)。
2.在你的主题文件夹中创建etc目录
3.从现有的主题etc目录复制view.xml到你的主题etc目录中。
4.配置view.xml用所有店面的产品尺寸的影像。例如,您可以通过指定大小为250×250像素让该类别网格视图产品图片广场,这里是相应的配置会是什么样子:
...
<image id="category_page_grid" type="small_image">
<width>250</width>
<height>250</height>
</image>...
(感谢magento技术服务商麦进斗科技提供案例代码)
有关view.xml用图像配置的详细信息,请参阅主题主题配置图片属性。
创建静态文件目录
你的主题可能会包含多种类型的静态文件:样式,字体,JavaScript和图像。每种类型应存储在主题目录的网络的一个独立的子目录中:
app/design/<area>/<Vendor>/<theme>/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
(感谢magento技术服务商麦进斗科技提供案例代码)
在...//web/images您存储相关的静态文件一般的主题。例如,一个主题的标志被存储在...//web/images。很可能你的主题也将包含模块特定的文件,这些文件都存储在相应的子目录,...//<Namespace_Module>/web/css和相似。管理模块特定的主题文件将在本指南的以下部分进行讨论。
当您更改存放在这里的任何文件,你需要清除pub/static and var/preprocessed 目录,然后重新加载页面。否则不会显示
现在主题的目录结构
此时你的主题文件结构如下所示:
app/design/frontend/<Vendor>/
├── <theme>/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── composer.json
(感谢magento技术服务商麦进斗科技提供案例代码)
主题logo
在Magento的应用程序,标志图像的默认格式,名称为logo.svg的。当你在传统的位置,<theme_dir>/web/images目录放logo.svg的形象,它被自动识别为主题的标志。一旦应用主题。它显示在您的商店页面标题。
在自定义主题,你可以使用一个标志文件使用不同的名称和格式,但你可能需要声明它。
声明的必要性取决于你是否主题有一个父主题,其标志形象。以下几种情况:
你的主题没有父主题:
1.如果你的logo图片名称和格式是默认的,logo.svg的,没有必要宣布它;
2.如果你的标志形象的名称或格式不违约,你需要声明它的布局。
你的主题有父主题: 1.如果你的主题标志的图像具有相同的名称和格式父的主题标志,没有必要宣布它;
2.如果您的标志图像有不同的名称或格式,声明它的布局。
声明的主题标志
要声明的主题标志,添加一个扩展<theme_dir>/Magento_Theme/layout/default.xml布局。例如,如果你的标志文件my_logo.png尺寸300x300px,你需要如下声明它:
<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>
(感谢magento技术服务商麦进斗科技提供案例代码)
logo大小是可选的。要了解更多关于主题的布局,请参阅本指南的布局部分。

原文地址:https://blog.51cto.com/14571960/2441624

时间: 2024-10-12 08:44:22

Magento创建主题的相关文章

Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题终极指南

Magento 2 Theme Ultimate Guide - 如何创建Magento 2主题基础指南 在Magento 2中管理和设置主题的方式有很多改进.Magento 1.9中引入的theme.xml定义文件和新的回退系统的使用是两个最重要的改进.Magento 2中的后备系统与Magento 1.x的工作方式类似,但是具有额外的优势,您可以选择无限的父主题继承/后退到 全部通过主题中的theme.xml文件. 假设您想基于新的Magento“Blank”主题创建一个全新的主题.首先,您

Magento创建configurable产品的要点

接着上一篇用API创建可配置的产品Configurable Product说事.Magento的产品类型可分为Simple Product.Group Product.Configurable Product.Virtual Product.Bundle Product.Downloadable Product.其中Simple的产品最简单,属于基础产品.Configurable Product和Bundle Product的产品是建立在这些Simple产品之上的. Configurable P

magento 创建属性

Magento的属性(Attributes)就是产品的可计量或可描述的性质,例如:颜色.制造商.库存号码(SKU number)等等.Magento有两种Attribute:简单属性(Simple Attribute)和系统属性(System Attribute).默认情况下,Magento包含了所有必需的系统属性,这些系统属性不能删除的,而且每件产品都拥有这些系统属性.而且所有的属性集(Attributes Sets)也必须包含这些系统属性(在下一节会详细介绍属性集(Attributes Se

magento megatron主题加入中文

magento的megatron默认不支持中文,全部我们须要在它的本地化目录中加入中文的cvs文件,加入方法例如以下: 1.切换至 app ? design ? frontend ? megatron ? default ? locale 文件夹,在文件夹下新增zh_CN文件夹,将en_US 文件夹下得translate.cvs复制到zh_CN文件夹下,接下来仅仅要用文本编辑软件打开改动就好啦. 提示:推荐使用libreoffice.不会有乱码问题.

magento megatron主题添加中文

magento的megatron默认不支持中文,所有我们需要在它的本地化文件夹中添加中文的cvs文件,添加方法如下: 1.切换至 app ? design ? frontend ? megatron ? default ? locale 目录,在目录下新增zh_CN文件夹,将en_US 文件夹下得translate.cvs拷贝到zh_CN目录下,接下来只要用文本编辑软件打开修改就好啦. 提示:推荐使用libreoffice,不会有乱码问题.

麦进斗:magento如何安装子主题

让我们的孩子创造一个主题,我们所有的自定义主题在Magento 2去这里: 应用程序/设计/开发/ company_name / theme_name 让我们假设,我们公司的名称是公司和我们的主题名称是基本.我们需要创建以下主题目录结构: <app>      <design>           <frontend>               <mycompany>                   <basic>             

magento建立子主题

让我们的孩子创造一个主题,我们所有的自定义主题在Magento 2去这里: 应用程序/设计/开发/ company_name / theme_name 让我们假设,我们公司的名称是公司和我们的主题名称是基本.我们需要创建以下主题目录结构: <app>      <design>           <frontend>               <mycompany>                   <basic>             

使用Java API创建(create),查看(describe),列举(list),删除(delete)Kafka主题(Topic)

使用Kafka的同学都知道,我们每次创建Kafka主题(Topic)的时候可以指定分区数和副本数等信息,如果将这些属性配置到server.properties文件中,以后调用Java API生成的主题将使用默认值,先改变需要使用命令bin/kafka-topics.sh --zookeeper localhost:2181 --alter --topic my-topic --config max.message.bytes=128000显示的修改,我们也希望将此过程在Producer调用之前通

Magento主题结构

设计主题是Magento的应用程序的一个重要组成部分.本主题介绍了Magento的主题文件结构. Magento的主题定位 店面主题是通常位于app/design/frontend//下 虽然在技术上它们可以存在于其他目录.例如Magento的内置主题可以在位于vendor/magento/theme-frontend-<theme_code>当Magento的实例从composer库部署. 每个主题都必须存储在一个单独的目录: app/design/frontend/<Vendor&g