Magento2.X 前端&综合 简要

时间：2024-08-02 23:04:26

主题是Magento的应用程序，它提供了整个应用的前端部分；

主题旨在覆盖或自定义视图层资源，通过模块和库最初提供。主题由不同的供应商（前端开发人员）实施，并拟分配为类似于其他组件的Magento系统的附加软件包。
现成的Magento应用程序提供了两种设计主题：亮度，作为演示“主题”，“空白”为自定义主题的创建奠定了基础。

Magento2.X 前端&综合 简要

　　　　　　　　　　　　　　2.2.3上图是默认两个主题。

  1. 有关于使用示范主题开店是没有限制的，但如果你想自定义默认的设计，你需要创建一个新的主题。（不要在composer 修改主题，否则将会被线上的覆盖）
  2. 新的主题可以是独立的新的主题，也可以从默认或任何其他现有的继承。在Magento的系统中实现的主题概念的继承可以让你改变只有一定的主题文件，并从父主题继承，其余必要的文件。
  3. 在Magento的系统中添加一个新的主题所需的高级别步骤如下：参考操作 
    1.根据主题创建一个目录

app/design/frontend/<your_vendor_name>/<your_theme_name>

2.添加声明文件 theme.xml 并创建 etc 目录并创建一个名为 view.xml 用的主题目录下的文件。
    
3.添加 composer.json 文件。
    
4.添加 registration.php
    
5.创建 CSS，JavaScript，图片和字体目录。
    
6.在管理面板配置你的主题。

    　　

  4. 主题目录结构
    一般主题目录位于：app/design/frontend/
    可能在其他目录，比如：Magento的内置主题在ccomposer 主题布署 vendor/magento/theme-frontend-<theme_code> 
    <theme_dir>/
    
├── <Vendor>_<Module>/
    
│	├── web/
    
│	│	├── css/
    
│	│	│	├── source/
    
│	├── layout/
    
│	│	├── override/
    
│	├── templates/
    
├── etc/
    
├── i18n/
    
├── media/
    
├── web/
    
│	├── css/
    
│	│	├── source/
    
│	├── fonts/
    
│	├── images/
    
│	├── js/
    
├── composer.json
    
├── registration.php
    
├── theme.xml 

/<Vendor>_<Module> 自选 模块特定的风格，布局和模板。
    
/<Vendor>_<Module>/web/css/source 自选模块特定的样式（.css和/或.LESS文件）。通用样式模块都在module.less文件，样式部件都在widgets.less。
    
/<Vendor>_<Module>/layout 自选布局文件，这些文件扩展默认模块或父主题布局。
    
/<Vendor>_<Module>/layout/override/base 自选 布局覆盖默认模块布局
    
/<Vendor>_<Module>/layout/override/<parent_theme> 自选 布局重写该模块的父主题布局
    
/<Vendor>_<Module>/templates 自选 该目录包含覆盖此模块的默认模块模板或父主题模板主题模板。自定义模板也存储在这个目录中。
    
/etc/view.xml 如果存在于父主题需要一个主题，但可选 此文件包含所有店面产品图片和缩略图图像配置。
    
/i18n 自选 .csv文件的翻译。
    
/media 必需 该目录包含一个主题预览（你的主题截图）。
    
/web 自选 这可以直接从前端装入静态文件
    
/web/css/source 自选 该目录包含了援引从 Magento的UI库全局元素，并theme.less文件，覆盖默认的变量的值混入主题更少的配置文件。
    
/web/css/source/lib 自选 重写存储在UI库文件查看文件 lib/web/css/source/lib
    
/web/fonts 自选 主题字体
    
/web/images 自选 主题图片
    
/web/js 自选 主题js
    
/composer.json 描述了主题的依赖关系和一些元信息。将出现在这里，如果你的主题是一个composer包。
    
/registration.php 必须 需要在系统中注册的主题。
    
/theme.xml 必须 该文件是强制性的，因为它声明了一个主题为系统组件。它包含基本元信息，如主题名称和父主题名称，是主题是从现有的主题继承。该文件由Magento的系统能够识别的主题。

    除了配置文件和主题的元数据文件，所有主题文件分为以下两类：
    1.静态视图文件
    　　

    <theme_dir>/
    
├── media/
    
├── web
    
│	├── css/ (except the "source" sub-directory)
    
│	├── fonts/
    
│	├── images/
    
│	├── js/

    　　

    2.动态视图文件

    .LESS文件，模板布局。动态视图文件位于一个主题目录，如下所示：

<theme_dir>/
    
├── Magento_<module>/
    
│	├── web/
    
│	│	├── css/
    
│	│	│	├── source/
    
│	├── layout/
    
│	│	├── override/
    
│	├── templates/
    
├── web/
    
│	├── css/
    
│	│	├── source/

    　　

  5. 应用主题 
    1.管理员登陆进入后台CONTENT > Design > Themes.请确保你的主题会出现在主题列表中
    2.Stores > Configuration > Design.
    3.在 Scope下拉框中选择存储视图要应用的主题。
    4.在Design Theme选项卡，选择设计主题下拉新创建的主题。
    5.点击保存配置。
    6.如果启用缓存，清除缓存。
    7.要查看应用更改，重新加载店头版。

    添加设计例外
    设计例外，您可以指定，而不是为他们创造一个独立的商店浏览特定用户代理的替代主题。要添加的设计异常：
    1.在管理面板去 CONTENT > Design > Themes并确保您的主题出现在可用主题列表中。
    2.Stores > Configuration > Design.
    3.Scope下拉字段中，选择您的网站。
    4.在旁边的User-Agent例外设计主题选项卡上User-Agent Exceptions 单击添加。
    5.在搜索字符串 Search String中指定或者使用普​​通字符串或常规异常（PCRE）用户代理。在设计主题Design Theme下拉列表中选择要用于匹配代理的主题。
    6.点击保存配置
    7.如果启用缓存，清除缓存。
    8.要查看应用更改，重新加载店头版。

    新增主题无关的标志
    您可能需要设置一个永久性店标识，显示在店面无论应用什么样的主题。要添加一个永恒的主题无关的标志：
    1.Stores > Configuration > Design.
    2.Scope下拉菜单中，选择存储视图。
    3.在常规配置的设计Design 部分，展开标题Header标签。
    4.在LOGO Logo Image图片浏览领域中保存文件系统中的徽标文件。
    5.上传文件。
    6.点击保存配置
    7.如果启用缓存，清除缓存。
    8.要查看应用更改，重新加载店头版。您在此处添加的标志是存储在 /pub/media/logo/default/目录下
    要删除永久性标志，去同一个位置，选择旁边的标志图像的复选框，然后单击删除delete。

    清除缓存
    如果缓存在Magento管理员启用，则必须在应用主题后，清除缓存，加上设计例外，添加徽标，以及执行其他任务。系统消息通知您无效的缓存类型必须被刷新。
    1.点击 System > Cache Management.
    2.Clear the invalid cache types.
    故障排除（如果没有得到应用的变化）
    如果你清空缓存并重新加载页面，删除pub/static/frontend and var/view_preprocessed目录中的所有文件，然后重新加载页面后，不会应用您在管理配置的变化。您可以手动删除文件或grunt clean:<theme_name>：请参阅安装和配置

  6. 主题图片属性配置 ：
    view.xml用为主题的常规位置为：<theme_dir>/etc/view.xml 
    <images module="Magento_Catalog">
    
    <image id="unique_image_id" type="image">
    
        <width>100</width> <!-- Image width in px -->
    
        <height>100</height> <!-- Image height in px -->
    
    </image>
    
</images>

    调整目录图片
    Magento的catalog:images:resize，您可以将图像尺寸调整在您的店面展示;

    Magento的从缓存中提供店面形象，存储在缓存中（/pub/media/catalog/product/cache目录）
     
    更新图片缓存命令：php /bin/magento catalog:images:resize 
    显示Product images resized successfully 执行成功。

  7. fallback中的顺序是静态的资源 （CSS，JavaScript的，字体和图像）等主题文件，布局和模板略有不同。

    设置父主题
    父主题的子主题theme.xml声明文件中指定。
    例如：橙色主题由OrangeCo从Magento的空白主题继承。继承在app/design/frontend/OrangeCo/orange/theme.xml声明如下：

    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    
     <title>Orange</title>
    
     <parent>Magento/blank</parent>
    
     <media>
    
         <preview_image>media/preview.jpg</preview_image>
    
     </media>
    
 </theme>

    父和子主题可以属于不同的供应商。例如，自定义主题可以从Magento的空白主题继承。

    要自定义父主题，模块视图，或库文件中定义的静态视图文件，您可以按照流程进一步描述回退中的相关位置添加具有相同名称的文件覆盖它们。这也指.LESS文件，这在技术上不是静态的资源 。

  8. 定位模板
    找到负责店面或管理的特定部分的模板，你可以使用Magento的内置模板提示。
    要启用模板提示：
    1.Click Stores > Configuration > ADVANCED > Developer.
    2.在Scope 下拉在左上角选择您所需的模板
    3.在调试选项卡，设置模板路径的提示店面Template Path Hints for storefront为Yes是。要启用路径的提示管理员设置模板路径的提示管理员Template Path Hints for Admin为是Yes。
    4.保存更改，请单击右上角保存

    定位布局
    就像模板，布局被保存在每个模块的基础。您可以轻松地确定哪些模块，您有兴趣居住在该元素的模板定位布局文件。要找到模板，你可以在app目录中使用模板的提示或文本搜索，如前面所述。
    你已经确定了模块后，您可以搜索在以下位置的布局

    1<current_theme_dir>/<Namespace>_<Module>/layout/
    
2<parent_theme(s)_dir>/<Namespace>_<Module>/layout/
    
3<module_dir>/frontend/layout/
    
4<module_dir>/view/base/layout/

    　　

    风格定位
    来定位被施加到某些元件的CSS规则，查找包含该元素的页面的模板。或者你可以使用浏览器的调试工具，以找到类名。在找到的类名，请在主题和风格模块目录文本搜索来查找定义类.LESS或.css文件。根据下面的备用方案进行搜索：
    1.主题风格 <current_theme_dir>/web/css/
    2.模块的主题风格<current_theme_dir>/_/web/css/
    3.父主题风格<parent_theme_dir>/web/css/
    4.模块样式的 frontend前端 区域<module_dir>/view/frontend/web/css/
    5.模块样式的base基础区域<module_dir>/view/base/web/css/

    例：
    让我们找到上定义用于在店面，当Magento的空白主题适用于商店视图中显示的迷你购物车的CSS类的文件。
    在迷你购物车的模板 app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml*元素是minicart-wrapper类。
    所以，让我们在根据后备方案搜索“minicart-wrapper”的出现：
    1.在app/design/frontend/Magento/blank/web/css搜索，搜索到任何结果。
    2.在app/design/frontend/Magento/blank/Magento_Checkout/web/css.The“minicart-wrapper”式的搜索app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_minicart.less
    在确定哪些的.css或.LESS文件定义了类，您可以在自定义的.css或.LESS文件覆盖默认的类定义。有关详细信息，请参阅CSS的主题。

实用命令：

命令 详解
magento setup:cache:{enable|disable|clean|flush|status}

管理缓存
magento setup:indexer:{status|show-mode|set-mode|reindex|info}

管理索引
magento cron:run

运行magento 2 定时任务
magento setup:di:compile

编译所有不存在的代理和工厂；并预编译一个商店和网站的类定义、继承信息和插件定义.
magento info:dependencies:{show-modules|show-modules-circular|show-framework}e

显示模块的依赖关系，循环依赖和Magento 2框架依赖.
magento i18n:{collect-phrases|pack}

创建翻译词典或翻译包
magento setup:static-content:deploy

部署静态视图文件
magento dev:source-theme:deploy

创建编译CSS文件
magento dev:tests:run

运行自动测试
magento dev:xml:convert

更新你的XML布局文件来匹配新的可扩展样式表语言转换（XSLT）样式表
magento setup:perf:generate-fixtures

生成用于性能测试的数据。
magento sampledata:install

安装magento 2演示数据

更多关于Magento演示数据的信息,请查看安装Magento2演示数据.

1.Magento 命令行工具

Magento2 带有一个命令行工具，在windows下，用管理员权限打开MS-DOS命令提示符，然后cd到Magento根目录，运行下面命令，就可以看到这个强大的命令行工具的命令清单：
php bin/magento

2.Magento 2.0 如何激活一个新的插件？

新插件文件拷贝到Magento 2.0 目录后，用下面命令激活之：
php bin/magento setup:upgrade

3.Magento前台或者后台js，或者css似乎没有正确的调用，怎么办？
js和css没有正确调用的症状是页面无修饰，图标不显示，鼠标点击打开的下拉菜单无法打开等，这时可以先删除

pub/static 除了.htaccess 的所有文件或文件夹。然后运行：
php bin/magento setup:static-content:deploy

4.如何重新安装Magento 2.0？
在Magento CLI 运行：
php bin/magento setup:uninstall

或者删除 app/etc/env.php, app/etc/config.php, var/cache, var/generation。

5.magento的view里面的default.xml 设置更新所有页面都会更新，如果只想更新helloworld
index 页面的内容 直接在helloworld_index_index.xmlk里面更改即可

6.生产模式更改为开发者模式，删除VAR目录下的内容?
　　　　rm -rf <your Magento install dir>/var/di/* <your Magento install dir>/var/generation/*
　　　　magento deploy:mode:set developer
　　　　　成功显示 Switched to developer mode.

magento安装中文语言包

方法一：
1.下载中文包（点击下载）
2.解压后将app 文件夹 dev文件夹 lib文件夹 放到网站根目录
3.在项目根目录输入命令:

php bin/magento setup:static-content:deploy zh_Hans_CN

4.更新模块

php bin/magento setup:upgrade

方法二(拆分)：
1.下载整个翻译的zh_Hans_CN_E.csv(假如位置在:I:/CODE/zh_CN/zh_Hans_CN_E.csv)

magento i18n:pack -d I:/CODE/zh_CN/zh_Hans_CN_E.csv zh_CN zh_Hans_CN

2.Aadmin 后台登陆>右上角>admin 设置>国家设置中国

3.完成　　

magento2更改商品图片在网站中不同位置的大小

1.一般在获取商品图片时都会出现以下代码

$image = 'index_tejia_list';//这里是在view.xml中配置大小的标识

<?php echo $block->getImage($_item, $image)->toHtml(); ?>

2.在view.xml中配置好高度和宽度

<images module="Magento_Catalog">

          <image id="index_tejia_list" type="image">

              <width>197</width>

              <height>271</height>

          </image>

</images>

创建一个新的block

<?xml version="1.0"?>

<!--

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

-->

<page  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>

        <referenceContainer name="content">

            <block name="blockextend.front.front" class="Njzz\BlockExtend\Block\Cms\Index\Index"

                   template="Njzz_BlockExtend::cms/index/index.phtml"/>

        </referenceContainer>

    </body>

</page>

template="Njzz_BlockExtend::cms/index/index.phtml":模板位置

class="Njzz\BlockExtend\Block\Cms\Index\Index"   block的命名空间+类名

block block/Cms/Index/Index.php

<?php

/**

 * Created by PhpStorm.

 * User: daimingkang

 * Date: 2016/3/12

 * Time: 14:46

 */

namespace Njzz\BlockExtend\Block\Cms\Index;

class Index extends \Magento\Catalog\Block\Product\ListProduct{

    public function index(){

    echo '1111111111';

    }

}

view/frontend/templates/cms/index/index.phtml

<?php

/**

 *

 * @var $block \Njzz\BlockExtend\Block\Cms\Index\Index

 */

echo $block->index();

?>

　　

----------后台操作

相关文章