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

?>

　　

----------後臺操做