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

?>

　　

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