-
对HTML5和CSS3的全面支持;
-
内置的LESS预处理器;
-
用RequireJS的异步模块上传 (无需手动添加代码)
-
使用jQuery/jQuery UI 代替Prototype library;
-
使用 MagentoUI library (它包括所有必要的组件,用来展现简单灵活的用户界面)。
<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>
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Zou/simple', __DIR__ );
{ "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" ] } }
├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/
<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>
-
服务端预编译LESS;
-
使用less.js的客户端预编译LESS
@page__background-color: #484848; @text__color: #fff; @font-family__base: 'Arial', sans-serif;
在你删除 /pub/static/frontend/Zou/simple/en_US和var/view_preprocessed目录下的内容后,你会发现你网站的视觉效果已经变化了。
<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的激活.
<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
<module_dir>/view/frontend/templates/<path_to_templates>
<theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>
<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/
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
php bin/magento theme:uninstall [-c|--clear-static-content] {theme path} ... {theme path}
-
删除主题文件夹app/design/frontend/<Vendor>/;
-
删除 var/view_preprocessed/ 目录下的内容;
-
删除 pub/static/frontend 目录下的内容/;
-
开启Magento 2数据库,找到theme表,删除主题名字的字符串;
-
使用 php bin/magento cache:flush命令刷新并删除缓存.
-
/<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 (非必须的; 存储主题的基本数据和元数据; 使用它以防主题被声明为一个系统组件)