Magento2.X 前端&综合 简要

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

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

　　　　　　　　　　　　　　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();

?>

　　

----------后台操做