手把手教你創建magento2主題

m2相較m1有很多改進,所以m2不兼容m1的主題做法。 m2前端主要的改進有:
  • 對HTML5和CSS3的全面支持;
  • 內置的LESS預處理器;
  • 用RequireJS的異步模塊上傳 (無需手動添加代碼)
  • 使用jQuery/jQuery UI 代替Prototype library;
  • 使用 MagentoUI library (它包括所有必要的組件,用來展現簡單靈活的用戶界面)。
至於新主題的開發,Magento 2爲其腳本和代碼定義了新的模塊結構。目前所有的靜態CSS、js和圖像文件存儲在特定的網站主題文件夾中。skin文件夾已經從Magento的根目錄刪除。視圖文件夾被引入用來存放佈局和文件,這爲了某個特定的模塊提供了MVC訪問。

 

主題目錄的創建
Magento 2主題存儲在目錄 <M2根目錄>/app/design/frontend下面。首先,你應該創建供應商文件夾(在Magento 1是這種叫法),然後爲你自己的主題創建一個新文件夾。
舉個例子: 主題目錄爲<M2 root directory>/app/design/frontend/Zou/simple. 此例中,Zou是供應商,simple是主題代碼。在代碼部分,你可以使用任意字母和數字的組合。
上述目錄創建後, 你需要聲明主題,在後臺激活它。

 

申明和註冊
爲了讓Magento 2 ‘看到’新創建的主題,你需要創建以下文件: <Magento 2 root directory>/app/design/frontend/<vendor>/<theme codename>/theme.xml,代碼包含如下:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>simple</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/simple.jpg</preview_image>
</media>
</theme>
在<title>標籤中包含了主題名稱;父主題在<parent>標籤裏。(所有未找到的,靜態文件和佈局文件將從父主題獲取。) 在本例中,你可以看到<parent>中顯示的是blank,作爲一個基本的主題,它沒有父主題。然而,繼承層次的數量在Magento 2是沒有限制的,這比Magento 1要有用的多。
在<preview_image> 標籤中,你可以選擇並設置主題預覽。它將顯示在管理部分。爲了在系統中註冊主題,你需要在根目錄下創建 registration.php文件,如下所示:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Zou/simple',
    __DIR__
);
創建composer.json文件不是必要的,但是你可以將其作爲composer包用來分享主題。示例如下:
{
    "name": "Zou/simple",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

 

靜態文件的目錄創建
爲了儲存樣式、javascript代碼、圖像以及字體,你應當在主題的根目錄下創建web文件夾。需要如下的結構: app/design/frontend/Zou/simple/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
所有這些文件夾不都是至關重要的。在images文件夾存儲了所有的靜態文件。你還可以將 logo.svg(默認名)加入此文件夾,重新定義主題logo。
基於空白父主題的特性,你可以在css/source文件夾中創建 _theme.less文件重新定義Magento UI的基本變量。然後,在<magento-root>/lib/web/css/source/lib/variables/文件夾裏

 

圖像配置
你創建的主題必須包括view.xml文件(如果沒有在父主題中聲明),它存儲了產品圖像所有有必要信息,如產品圖像,寬度、高度、背景色、透明度等等。你可以使用元素的ID屬性、類型進行賦值。下面將演示是如何做到的:
<images module="Magento_Catalog">
...
<images/>
例如,使用上述過程,你可以很輕鬆的更改您的目錄圖表中的圖像大小(如下所示)。
<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid" type="small_image">
                <width>200</width>
                <height>200</height>
            </image>
</media>
</view>
在這個主題中,Category_page_grid ID是唯一的。Small_image類型對應於管理員這邊的Small Image Role。可以用作圖像類型值的有:image, small_image, swatch_image, swatch_thumb以及thumbnail。

 

 

當產品保存時,所有圖像都緩存起來。當你改變圖像大小時,你可以執行命令 <magento install dir>/bin/magento catalog:images:resize生成圖像。最終我們將得到以下結構:

 

後臺主題激活
當主題已經在文件系統創建好後,你可以在設置中激活它。要這麼做的話,你只需遵循Content > Design > Themes的路徑,檢查主題是否在列表中。
然後,進入CONTENT > Design > Configuration,點擊編輯一個選擇的store或者website。選擇我們的主題(應用主題),然後點擊保存。
爲了防止緩存作用,當主題被應用時請刷新頁面。要刷新緩存,到System > Cache Management,更新所有無效的緩存類型。
最終,我們得到可靠的magento/blank主題,帶有不同的logo以及調整過大小的圖像。

 

 

 

使用LESS編輯主題風格
當你創建主題後,你可以修改下風格以改變網站的頁面視覺。要改變風格,你可以使用Magento 2中兩個LESS預處理類型中的一個:
  • 服務端預編譯LESS;
  • 使用less.js的客戶端預編譯LESS
客戶端編譯經常使用在開發模式中,因爲所有改動和編譯都可以立刻可視化:每次當你在看樣式文件的時候,瀏覽器開始編譯這些文件。與此同時,當服務端在編譯的時候,你需要手動刪除pub/static和 var/view_preprocessed文件夾。然而你可以使用Grunt task runner優化流程,它可以跟蹤有關文件的每一動作,‘清除’所選文件夾,自動編譯較少的文件。 要改變編譯類型,需要進入控制面板: Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow.

 

我們的例子相當簡單,我們將使用服務端編譯 (默認設置的).
在主題web/css下的 _theme.less 文件設置背景顏色和字體:
@page__background-color: #484848;
@text__color: #fff;
@font-family__base: 'Arial', sans-serif;

在你刪除 /pub/static/frontend/Zou/simple/en_US和var/view_preprocessed目錄下的內容後,你會發現你網站的視覺效果已經變化了。

 

 

 

 

 

使用Magento 2 佈局主題
Magento 2使您能夠擴展和重寫這個或那個主題佈局。你不需要從父主題複製頁面相關的或通用的佈局,只需要參考主題文件夾中的選定佈局,如下所示:
Magento 2能讓你對主題進行擴展和覆蓋。
<theme_dir> | /<Namespace>_<Module> | /layout |--<layout1>.xml |--<layout2>.xml
舉個例子,要擴展存儲在 <сatalog_module_dir>/view/frontend/layout/catalog_category_view.xml Catalog模塊的lcatalog_category_view佈局,你需要創建以下route文件:
<theme_dir>/Magento_Catalog/layout/catalog_category_view.xml.
要從佈局中刪除任意部分(比如,類別描述),你可以按下面的代碼進行操作:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"        xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="category.description" remove="true"/>
    </body>
</page>
然而,佈局擴展不能用於任何定製化任務。如果你需要定製很多東西,最好重寫佈局。也就是說創建並使用一個新文件要比使用父主題
  • 請求一個方法,“支配”父佈局的另一個方法;
  • 需更改方法的參數數目;
  • 使用remove屬性取消對block/container操作的delete命令;
  • 爲blocks/containers添加XML屬性;
  • 需刪除參數塊;
  • 用 ‘blank’ layout handle重寫佈局文件來刪除layout handles
  • 需修改layout handles的激活.
在模塊主題文件夾,創建override/base文件夾來覆蓋基本佈局,如下所示:
<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/base
           |--<layout1>.xml
           |--<layout2>.xml
以下這些文件可以覆蓋佈局:
<module_dir>/view/frontend/layout/<layout1>.xml
<module_dir>/view/frontend/layout/<layout2>.xml
此外,你可以通過在模塊的主題文件夾中創建重寫/主題文件夾來覆蓋父主題的佈局:
<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/theme
            |__/<Parent_Vendor>
               |__/<parent_theme>
                  |--<layout1>.xml
                  |--<layout2>.xml
以下路徑的這些文件可以覆蓋佈局:
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml

 

主題模板
Magento 2 主題不僅能讓你覆蓋佈局模塊還包括模板。要覆蓋模塊模板
<module_dir>/view/frontend/templates/<path_to_templates>
在主題模塊文件夾創建新的文件夾模板:
<theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>
讓我們試着爲一個cart文件(Zou/simple/Magento_Checkout/templates/cart/minicart.html)添加文本信息。文本信息需要與cart中產品的數量相關。 本文提供的例子如下所示:
<div data-block="minicart" class="minicart-wrapper">
    <a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"

       data-bind="scope: 'minicart_content'">
        <span class="cart-title hidden-xs"><?php /* @escapeNotVerified */ echo __('Shopping cart'); ?></span>
        <span class="counter total-qty empty"

              data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">
        <?php /* @escapeNotVerified */ echo __('Products count:'); ?>    <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
            <span class="counter-label">
            <!-- ko if: cart().summary_count -->
                <!-- ko text: cart().summary_count --><!-- /ko -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
            </span>
        </span>
    </a>
    <?php if ($block->getIsNeedToDisplaySideBar()): ?>
        <div class="block block-minicart empty"

             data-role="dropdownDialog"

             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart]",                "triggerTarget":".showcart",
                "timeout": "2000",                "closeOnMouseLeave": false,
                "closeOnEscape": true,                "triggerClass":"active",
                "parentClass":"active",        "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
        </div>
    <?php endif ?>
    <script>
        window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
        }
    }
    </script>
</div>

 

主題本土化
主題本土化可以通過一系列的詞彙來完成。在如下目錄搜尋詞彙::
<parent_theme_dir>/i18n/ (查看所有父主題)
<current_theme_dir>/i18n/
I18n文件夾可以存儲在每個模塊或者應用程序的全局文件夾內。在搜索欄中翻譯會優先考慮主題文件夾中的詞彙。
要在主題文件夾中生成帶有翻譯的文件,你可以使用I18N工具。你也可以在Magento 2根目錄下輸入以下命令:
php bin/magento i18n:collect-phrases --output="app/design/frontend/Singree/walkbeyond/i18n/en_US.csv" app/design/frontend/Singree/walkbeyond
這些命令將所有字符串收集到一個詞彙表中。文件如下所示:
app/design/frontend/OrangeCo/orange/i18n/en_US.csv
你可以用任何表格編輯器打開 (比如Excel) ,並在正確的列中爲每個詞語改變翻譯值。在主題已經應用後,你可以看到翻譯好的字符串。

 

刪除主題
如果你的主題是Composer包,你可以用以下命令將主題從root目錄刪除
php bin/magento theme:uninstall [-c|--clear-static-content] {theme path} ... {theme path}
{theme path}是到主題文件夾最近的路徑,本例中{theme path}爲frontend/Zou/simple。
--clear-static-content 刪除不需要自動生成的靜態文件 如css, js, images。 如果你的你主題不是Composer包,你必須執行以下操作刪除主題。
  • 刪除主題文件夾app/design/frontend/<Vendor>/;
  • 刪除 var/view_preprocessed/ 目錄下的內容;
  • 刪除 pub/static/frontend 目錄下的內容/;
  • 開啓Magento 2數據庫,找到theme表,刪除主題名字的字符串;
  • 使用 php bin/magento cache:flush命令刷新並刪除緩存.

 

總結
本文中談論了有關使用Magento 2創建主題的主要部分,描述了怎麼創建目錄和文件(主題、圖像、預覽)結構。此外本文還觸及了怎樣覆蓋給定主題的樣式、模板和佈局的流程;提及了怎麼樣使用在線詞彙翻譯網站。
創建主題的文件夾列表如下所示:
  • /<Vendor>_<Module> (非必須的; 對給定模塊存儲樣式、模板和佈局)
  • /<Vendor>_<Module>/web/css/source (非必須的; 存儲特定模塊: .ccs以及.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/fonts (非必須的; 儲存主題字體)
  • /web/images (非必須的;儲存主題圖像)
  • /web/js (非必須的; 儲存javascript文件)
  • /composer.json (非必須的; 描述主題變量和元數據)
  • /registration.php (必須的; 用來註冊主題)
  • /theme.xml (非必須的; 存儲主題的基本數據和元數據; 使用它以防主題被聲明爲一個系統組件)

 

主題demo源碼下載
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章