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源碼下載