創建主題 · magento 2.0開發手冊

**本主題討論如何創建，使用主題，如何將徽標添加到主題文件中以及如何調整圖像大小。** **先決條件** 1.對于兼容性，可升級性，維護方便起見，不修改開箱Magento的主題。要自定義您的Magento商店的設計，創建一個新的自定義主題。 2.設置你的Magento應用程序開發模式。應用模式影響的靜態文件由Magento的緩存的方式。關于主題的發展，我們在本章中所提供的建議是開發者/默認的模式而異。 **創建主題目錄** 要創建您的主題目錄： 1.Go to <your Magento install dir>/app/design/frontend. 2.創建根據您的Vendor的名字命名一個新的目錄： /app/design/frontend/<Vendor>. 3.在Vendor目錄中，創建一個根據你的主題命名的目錄。 ~~~ app/design/frontend/ ├── <Vendor>/ │ │ ├──...<theme>/ │ │ │ ├── ... │ │ │ ├── ... ~~~ 文件夾名稱通常匹配主題的代碼命名使用：任何字母數字字符集，作為賣方認為合適，是可以接受的。該公約僅僅是一個建議，所以沒有什么能夠阻止以另一種方式在這個目錄命名。 **聲明你的主題** 您為您的主題創建一個目錄后，必須創建theme.xml至少包含主題名稱和父主題名稱（如果主題從一個繼承）。您還可以指定主題預覽圖像的存儲位置。 1.添加或復制theme.xml到您的主題目錄 2.使用下面的示例配置： ~~~ <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>New theme</title>  <parent>Magento/blank</parent>  <media> <preview_image>media/preview.jpg</preview_image>  </media> </theme> ~~~ **使用你的主題composer包** Magento的默認主題分布在composer包。要分發你的主題作為一個包，一個composer.json文件添加到主題目錄并注冊打包服務器上的包。默認的公共打包服務器是https://packagist.org/。 composer.json提供主題的相關性信息。一個主題composer.json的實施例： ~~~ { "name": "magento/theme-frontend-luma", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-blank": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } ~~~ 你可以找到關于composer于一體的Magento的系統集composer細節。添加registration.php文件要在系統中注冊你的主題，你的主題目錄中添加一個文件和registration.php包含以下內容： ~~~ <?php /** * Copyright ? 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/<Vendor>/<theme>', __DIR__ ); ~~~ 'frontend/<Vendor>/<theme>'是你的Vendor名稱，是主題代碼。為了說明，請參閱Magento的亮度主題registration.php的文件。 **配置圖片** 產品圖片的大小和對店面的其他屬性都在view.xml用配置文件來配置。它需要一個主題，但如果存在于父主題是可選的。如果你的主題產品的圖像尺寸不同于父主題的不同，或者如果你的主題沒有任何主題繼承，使用以下步驟添加view.xml用： 1.登錄到您的Magento服務器作為權限的用戶在安裝的Magento目錄下創建的目錄和文件。（通常情況下，這是Magento的文件系統所有者）。 2.在你的主題文件夾中創建etc目錄 3.從現有的主題etc目錄復制view.xml到你的主題etc目錄中。 4.配置view.xml用所有店面的產品尺寸的影像。例如，您可以通過指定大小為250×250像素讓該類別網格視圖產品圖片廣場，這里是相應的配置會是什么樣子： ~~~ ... <image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image> ... ~~~ 有關view.xml用圖像配置的詳細信息，請參閱主題主題配置圖片屬性。 **創建靜態文件目錄** 你的主題可能會包含多種類型的靜態文件：樣式，字體，JavaScript和圖像。每種類型應存儲在主題目錄的網絡的一個獨立的子目錄中： ~~~ app/design/<area>/<Vendor>/<theme>/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/ ~~~ 在.../<theme>/web/images您存儲相關的靜態文件一般的主題。例如，一個主題的標志被存儲在.../<theme>/web/images。很可能你的主題也將包含模塊特定的文件，這些文件都存儲在相應的子目錄，.../<theme>/<Namespace_Module>/web/css和相似。管理模塊特定的主題文件將在本指南的以下部分進行討論。當您更改存放在這里的任何文件，你需要清除`pub/static` and `var/preprocessed` 目錄，然后重新加載頁面。否則不會顯示 **現在主題的目錄結構** 此時你的主題文件結構如下所示： ~~~ app/design/frontend/<Vendor>/ ├── <theme>/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── theme.xml │ ├── composer.json ~~~ **主題logo** 在Magento的應用程序，標志圖像的默認格式，名稱為logo.svg的。當你在傳統的位置，<theme_dir>/web/images目錄放logo.svg的形象，它被自動識別為主題的標志。一旦應用主題。它顯示在您的商店頁面標題。在自定義主題，你可以使用一個標志文件使用不同的名稱和格式，但你可能需要聲明它。聲明的必要性取決于你是否主題有一個父主題，其標志形象。以下幾種情況：你的主題沒有父主題： 1.如果你的logo圖片名稱和格式是默認的，logo.svg的，沒有必要宣布它; 2.如果你的標志形象的名稱或格式不違約，你需要聲明它的布局。你的主題有父主題： 1.如果你的主題標志的圖像具有相同的名稱和格式父的主題標志，沒有必要宣布它; 2.如果您的標志圖像有不同的名稱或格式，聲明它的布局。 **聲明的主題標志** 要聲明的主題標志，添加一個擴展<theme_dir>/Magento_Theme/layout/default.xml布局。例如，如果你的標志文件my_logo.png尺寸300x300px，你需要如下聲明它： ~~~ <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/my_logo.png</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page> ~~~ logo大小是可選的。要了解更多關于主題的布局，請參閱本指南的布局部分。