手把手教你创建magento2主题

10.52K 浏览教程资料
0 Comments

手把手教你创建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主题存储在目录 /app/design/frontend下面。首先，你应该创建供应商文件夹（在Magento 1是这种叫法），然后为你自己的主题创建一个新文件夹。
举个例子: 主题目录为/app/design/frontend/Zou/simple. 此例中，Zou是供应商，simple是主题代码。在代码部分，你可以使用任意字母和数字的组合。
上述目录创建后, 你需要声明主题，在后台激活它。

申明和注册

为了让Magento 2 ‘看到’新创建的主题,你需要创建以下文件: /app/design/frontend///theme.xml，代码包含如下:

simple
Magento/blank

media/simple.jpg
在标签中包含了主题名称；父主题在<parent>标签里。(所有未找到的，静态文件和布局文件将从父主题获取。) 在本例中，你可以看到<parent>中显示的是blank，作为一个基本的主题，它没有父主题。然而，继承层次的数量在Magento 2是没有限制的，这比Magento 1要有用的多。</span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="38uia-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="38uia-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>在<preview_image> 标签中，你可以选择并设置主题预览。它将显示在管理部分。为了在系统中注册主题，你需要在根目录下创建 registration.php文件，如下所示：</span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><?php MagentoFrameworkComponentComponentRegistrar::register(     MagentoFrameworkComponentComponentRegistrar::THEME,     'frontend/Zou/simple',     __DIR__ );</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="cl1n8-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="cl1n8-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>创建composer.json文件不是必要的，但是你可以将其作为composer包用来分享主题。示例如下:</span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic">{     "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"         ]     } }</pre> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="17u4v-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="17u4v-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>静态文件的目录创建</span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="8h0nd-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="8h0nd-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>为了储存样式、javascript代码、图像以及字体，你应当在主题的根目录下创建web文件夹。需要如下的结构：<br /> app/design/frontend/Zou/simple/</span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic">├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="4be53-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="4be53-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>所有这些文件夹不都是至关重要的。在images文件夹存储了所有的静态文件。你还可以将 logo.svg（默认名）加入此文件夹，重新定义主题logo。</span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="e88ap-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="e88ap-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>基于空白父主题的特性，你可以在css/source文件夹中创建 _theme.less文件重新定义Magento UI的基本变量。然后，在<magento-root>/lib/web/css/source/lib/variables/文件夹里</span></div> </div> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="e24oo-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="e24oo-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>图像配置</span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="96tev-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="96tev-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>你创建的主题必须包括view.xml文件（如果没有在父主题中声明），它存储了产品图像所有有必要信息，如产品图像，宽度、高度、背景色、透明度等等。你可以使用元素的ID属性、类型进行赋值。下面将演示是如何做到的：</span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><images module="Magento_Catalog"> ... <images/></pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="4gc54-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="4gc54-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>例如，使用上述过程，你可以很轻松的更改您的目录图表中的图像大小（如下所示）。</span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><?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></pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="cfaes-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="cfaes-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span>在这个主题中，Category_page_grid ID是唯一的。Small_image类型对应于管理员这边的Small Image Role。可以用作图像类型值的有：image, small_image, swatch_image, swatch_thumb以及thumbnail。</span></div> </div> <figure class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="a320r-0-0" style="margin-top: 1.4em;margin-bottom: 1.4em;, sans-serif"> <div class="Image-resizerContainer" data-size="normal"> <div> <div class="Image-captionContainer" data-size="normal"> <div><img decoding="async" class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-0c9d6907c65b0d0e27abfa0f871ce22d_b.jpg" /></div> </div> </div> </div> </figure> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="e5ch8-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="e5ch8-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>当产品保存时，所有图像都缓存起来。当你改变图像大小时，你可以执行命令 <magento install dir>/bin/magento catalog:images:resize生成图像。最终我们将得到以下结构：</span></span></div> </div> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="c4cnu-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="c4cnu-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>后台主题激活</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="5q6bg-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="5q6bg-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>当主题已经在文件系统创建好后，你可以在设置中激活它。要这么做的话，你只需遵循Content > Design > Themes的路径，检查主题是否在列表中。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="fmft-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="fmft-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>然后，进入CONTENT > Design > Configuration，点击编辑一个选择的store或者website。选择我们的主题（应用主题），然后点击保存。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="9q4hv-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="9q4hv-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>为了防止缓存作用，当主题被应用时请刷新页面。要刷新缓存，到System > Cache Management，更新所有无效的缓存类型。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="9uuok-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="9uuok-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>最终，我们得到可靠的magento/blank主题，带有不同的logo以及调整过大小的图像。</span></span></div> </div> <figure class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="14lqg-0-0" style="margin-top: 1.4em;margin-bottom: 1.4em;, sans-serif"> <div class="Image-resizerContainer" data-size="normal"> <div> <div class="Image-captionContainer" data-size="normal"> <div><img decoding="async" class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-bfba669cee7cf28e7c87dda043a61e75_b.jpg" /></div> </div> </div> </div> </figure> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="3m73c-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="3m73c-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>使用LESS编辑主题风格</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="iv40-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="iv40-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>当你创建主题后，你可以修改下风格以改变网站的页面视觉。要改变风格，你可以使用Magento 2中两个LESS预处理类型中的一个：</span></span></div> </div> <ul class="public-DraftStyleDefault-ul" data-offset-key="4qaf0-0-0" style="padding: 0px;margin: 1.4em 0px;, sans-serif"> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="4qaf0-0-0" style="margin: 0px"> <div data-offset-key="4qaf0-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>服务端预编译LESS;</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="cgnbf-0-0" style="margin: 0px"> <div data-offset-key="cgnbf-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>使用less.js的客户端预编译LESS</span></span></div> </li> </ul> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="6di4l-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="6di4l-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>客户端编译经常使用在开发模式中，因为所有改动和编译都可以立刻可视化：每次当你在看样式文件的时候，浏览器开始编译这些文件。与此同时，当服务端在编译的时候，你需要手动删除pub/static和 var/view_preprocessed文件夹。然而你可以使用Grunt task runner优化流程，它可以跟踪有关文件的每一动作，‘清除’所选文件夹，自动编译较少的文件。<br /> 要改变编译类型，需要进入控制面板: Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow.</span></span></div> </div> <p><img decoding="async" src="https://bbs-cdn.mallol.cn/upload/attach/201908/207_M2SRGH5BHSVA54D.png" /></p> <p></p> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="bp4be-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="bp4be-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>我们的例子相当简单，我们将使用服务端编译 (默认设置的).</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="5ngka-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="5ngka-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>在主题web/css下的 _theme.less 文件设置背景颜色和字体:</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic">@page__background-color: #484848; @text__color: #fff; @font-family__base: 'Arial', sans-serif;</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="a1heu-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <p style="max-width: 100%"><span><span>在你删除 /pub/static/frontend/Zou/simple/en_US和var/view_preprocessed目录下的内容后，你会发现你网站的视觉效果已经变化了。</span></span></p> <p style="max-width: 100%"><span><span><br /></span></span></p> <p style="max-width: 100%"><span><span></span></span></p> <p style="max-width: 100%"><img decoding="async" src="https://bbs-cdn.mallol.cn/upload/attach/201908/207_P3B3XWG7K48TVW4.png" /><span><span></span></span></p> </div> <figure class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="dkjjf-0-0" style="margin-top: 1.4em;margin-bottom: 1.4em;, sans-serif"></figure> </p> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="cbg2o-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="cbg2o-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>使用Magento 2 布局主题</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="f7h8k-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="f7h8k-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>Magento 2使您能够扩展和重写这个或那个主题布局。你不需要从父主题复制页面相关的或通用的布局，只需要参考主题文件夹中的选定布局，如下所示：</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="5drmq-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="5drmq-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>Magento 2能让你对主题进行扩展和覆盖。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="3uirl-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="3uirl-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span><theme_dir><br /> |</span></span><span style="font-weight: bold"><span>/<Namespace>_<Module></span></span><span><span></span></span><span style="font-weight: bold"><span>|</span></span><span><span>/layout<br /> |--<layout1>.xml<br /> |--<layout2>.xml</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="a64qr-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="a64qr-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>举个例子，要扩展存储在 <сatalog_module_dir>/view/frontend/layout/catalog_category_view.xml Catalog模块的lcatalog_category_view布局，你需要创建以下route文件：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><theme_dir>/Magento_Catalog/layout/catalog_category_view.xml.</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="9ui46-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="9ui46-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>要从布局中删除任意部分（比如，类别描述)，你可以按下面的代码进行操作：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><?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></pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="am7cm-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="am7cm-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>然而，布局扩展不能用于任何定制化任务。如果你需要定制很多东西，最好重写布局。也就是说创建并使用一个新文件要比使用父主题</span></span></div> </div> <ul class="public-DraftStyleDefault-ul" data-offset-key="371n-0-0" style="padding: 0px;margin: 1.4em 0px;, sans-serif"> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="371n-0-0" style="margin: 0px"> <div data-offset-key="371n-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>请求一个方法，“支配”父布局的另一个方法;</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="9osa6-0-0" style="margin: 0px"> <div data-offset-key="9osa6-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>需更改方法的参数数目;</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="a1i1k-0-0" style="margin: 0px"> <div data-offset-key="a1i1k-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>使用remove属性取消对block/container操作的delete命令;</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="fmm2b-0-0" style="margin: 0px"> <div data-offset-key="fmm2b-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>为blocks/containers添加XML属性;</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="ac6bn-0-0" style="margin: 0px"> <div data-offset-key="ac6bn-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>需删除参数块;</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="erfq1-0-0" style="margin: 0px"> <div data-offset-key="erfq1-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>用 ‘blank’ layout handle重写布局文件来删除layout handles</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="8fjih-0-0" style="margin: 0px"> <div data-offset-key="8fjih-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>需修改layout handles的激活.</span></span></div> </li> </ul> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="32js6-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="32js6-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>在模块主题文件夹，创建override/base文件夹来覆盖基本布局，如下所示：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><theme_dir>   |__/<Namespace_Module>     |__/layout       |__/override          |__/base            |--<layout1>.xml            |--<layout2>.xml</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="7mf8g-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="7mf8g-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>以下这些文件可以覆盖布局:</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><module_dir>/view/frontend/layout/<layout1>.xml <module_dir>/view/frontend/layout/<layout2>.xml</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="eosai-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="eosai-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>此外，你可以通过在模块的主题文件夹中创建重写/主题文件夹来覆盖父主题的布局：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><theme_dir>   |__/<Namespace_Module>     |__/layout       |__/override          |__/theme             |__/<Parent_Vendor>                |__/<parent_theme>                   |--<layout1>.xml                   |--<layout2>.xml</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="4jjjb-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="4jjjb-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>以下路径的这些文件可以覆盖布局：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml <parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml</pre> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="7ogsi-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="7ogsi-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>主题模板</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="6t110-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="6t110-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>Magento 2 主题不仅能让你覆盖布局模块还包括模板。要覆盖模块模板</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><module_dir>/view/frontend/templates/<path_to_templates></pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="djbo2-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="djbo2-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>在主题模块文件夹创建新的文件夹模板：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><theme_dir>/<Namespace>_<Module>/templates/<path_to_templates></pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="8794r-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="8794r-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>让我们试着为一个cart文件(Zou/simple/Magento_Checkout/templates/cart/minicart.html)添加文本信息。文本信息需要与cart中产品的数量相关。 本文提供的例子如下所示：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><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  echo Zend_Json::encode($block->getConfig()); ?>;    </script>     <script type="text/x-magento-init">    {        "[data-block='minicart']": {            "Magento_Ui/js/core/app": <?php  echo $block->getJsLayout();?>        },        "*": {            "Magento_Ui/js/block-loader": "<?php  echo $block->getViewFileUrl('images/loader-1.gif'); ?>"        }     }     </script> </div></pre> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="568ph-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="568ph-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>主题本土化</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="d2vdv-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="d2vdv-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>主题本土化可以通过一系列的词汇来完成。在如下目录搜寻词汇：:</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic"><parent_theme_dir>/i18n/ (查看所有父主题) <current_theme_dir>/i18n/</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="ecsj2-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="ecsj2-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>I18n文件夹可以存储在每个模块或者应用程序的全局文件夹内。在搜索栏中翻译会优先考虑主题文件夹中的词汇。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="93v78-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="93v78-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>要在主题文件夹中生成带有翻译的文件，你可以使用I18N工具。你也可以在Magento 2根目录下输入以下命令：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic">php bin/magento i18n:collect-phrases --output="app/design/frontend/Singree/walkbeyond/i18n/en_US.csv" app/design/frontend/Singree/walkbeyond</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="96rr0-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="96rr0-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>这些命令将所有字符串收集到一个词汇表中。文件如下所示：</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic">app/design/frontend/OrangeCo/orange/i18n/en_US.csv</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="3eia8-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="3eia8-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>你可以用任何表格编辑器打开 (比如Excel) ，并在正确的列中为每个词语改变翻译值。在主题已经应用后，你可以看到翻译好的字符串。</span></span></div> </div> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="aijae-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="aijae-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>删除主题</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="2u5qb-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="2u5qb-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>如果你的主题是Composer包，你可以用以下命令将主题从root目录删除</span></span></div> </div> <pre class="EnlighterJSRAW" data-enlighter-language="generic">php bin/magento theme:uninstall [-c|--clear-static-content] {theme path} ... {theme path}</pre> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="7h9hp-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="7h9hp-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>{theme path}是到主题文件夹最近的路径，本例中{theme path}为frontend/Zou/simple。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="egttq-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="egttq-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>--clear-static-content 删除不需要自动生成的静态文件 如css, js, images。<br /> 如果你的你主题不是Composer包，你必须执行以下操作删除主题。</span></span></div> </div> <ul class="public-DraftStyleDefault-ul" data-offset-key="6kkih-0-0" style="padding: 0px;margin: 1.4em 0px;, sans-serif"> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="6kkih-0-0" style="margin: 0px"> <div data-offset-key="6kkih-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>删除主题文件夹app/design/frontend/<Vendor>/；</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="9p3bk-0-0" style="margin: 0px"> <div data-offset-key="9p3bk-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>删除 var/view_preprocessed/ 目录下的内容；</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="eigok-0-0" style="margin: 0px"> <div data-offset-key="eigok-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>删除 pub/static/frontend 目录下的内容/；</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="fefor-0-0" style="margin: 0px"> <div data-offset-key="fefor-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>开启Magento 2数据库，找到theme表，删除主题名字的字符串；</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="256r6-0-0" style="margin: 0px"> <div data-offset-key="256r6-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>使用 php bin/magento cache:flush命令刷新并删除缓存.</span></span></div> </li> </ul> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="7ohjl-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="7ohjl-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>总结</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="omv0-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="omv0-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>本文中谈论了有关使用Magento 2创建主题的主要部分，描述了怎么创建目录和文件（主题、图像、预览）结构。此外本文还触及了怎样覆盖给定主题的样式、模板和布局的流程；提及了怎么样使用在线词汇翻译网站。</span></span></div> </div> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="e600h-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="e600h-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>创建主题的文件夹列表如下所示：</span></span></div> </div> <ul class="public-DraftStyleDefault-ul" data-offset-key="22hh1-0-0" style="padding: 0px;margin: 1.4em 0px;, sans-serif"> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="22hh1-0-0" style="margin: 0px"> <div data-offset-key="22hh1-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/<Vendor>_<Module> (非必须的; 对给定模块存储样式、模板和布局)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="9f2fa-0-0" style="margin: 0px"> <div data-offset-key="9f2fa-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/<Vendor>_<Module>/web/css/source (非必须的; 存储特定模块: .ccs以及.less文件)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="cu2hc-0-0" style="margin: 0px"> <div data-offset-key="cu2hc-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/<Vendor>_<Module>/layout (非必须的; 存储主要扩展包或父主题布局)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="1ha92-0-0" style="margin: 0px"> <div data-offset-key="1ha92-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/<Vendor>_<Module>/layout/override/base (非必须的;存储主主题的覆盖布局)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="b6sms-0-0" style="margin: 0px"> <div data-offset-key="b6sms-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/<Vendor>_<Module>/layout/override/<parent_theme> (非必须的; 为父主题存储覆盖布局)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="5u1f3-0-0" style="margin: 0px"> <div data-offset-key="5u1f3-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/<Vendor>_<Module>/templates (非必须的; 存储模板可以覆盖主模块模板或父模板)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="5rg87-0-0" style="margin: 0px"> <div data-offset-key="5rg87-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/etc/view.xml (如果主题没有声明是必须的; 存储图像配置信息)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="7cpvs-0-0" style="margin: 0px"> <div data-offset-key="7cpvs-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/i18n (非必须的; 存储翻译词汇.csv的文件)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="e67un-0-0" style="margin: 0px"> <div data-offset-key="e67un-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/media (非必须的; 存储预览)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="entm4-0-0" style="margin: 0px"> <div data-offset-key="entm4-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/web (非必须的; 可以从前端上传的静态文件)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="fu8qr-0-0" style="margin: 0px"> <div data-offset-key="fu8qr-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/web/css/source (非必须的; 存储Magento UI库的全局元素以及覆盖默认变量值 _theme.less文件)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="1td06-0-0" style="margin: 0px"> <div data-offset-key="1td06-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/web/fonts (非必须的; 储存主题字体)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="3j2pv-0-0" style="margin: 0px"> <div data-offset-key="3j2pv-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/web/images (非必须的;储存主题图像)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="8qbi1-0-0" style="margin: 0px"> <div data-offset-key="8qbi1-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/web/js (非必须的; 储存javascript文件)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="a0nlg-0-0" style="margin: 0px"> <div data-offset-key="a0nlg-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/composer.json (非必须的; 描述主题变量和元数据)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="833nl-0-0" style="margin: 0px"> <div data-offset-key="833nl-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/registration.php (必须的; 用来注册主题)</span></span></div> </li> <li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="efnno" data-offset-key="a87v3-0-0" style="margin: 0px"> <div data-offset-key="a87v3-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>/theme.xml (非必须的; 存储主题的基本数据和元数据; 使用它以防主题被声明为一个系统组件)</span></span></div> </li> </ul> <h2 class="Editable-styled" data-block="true" data-editor="efnno" data-offset-key="37jng-0-0" style="margin: 2.33333em 0px 1.16667em;font-weight: 600;font-size: 1.2em;line-height: 1.5;, sans-serif;clear: left"> <div data-offset-key="37jng-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><span><span>主题demo源码下载</span></span></div> </h2> <div class="Editable-unstyled" data-block="true" data-editor="efnno" data-offset-key="8q31k-0-0" style="margin: 0px 0px 1.4em;, sans-serif"> <div data-offset-key="8q31k-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%"><a target="_blank" href="https://github.com/zouhongzhao/magento2-theme-demo.git" class="Link ztext-link"><span><span>https://github.com/zouhongzhao/magento2-theme-demo.git</span></span></a><span><span> </span></span></div> </div> <postmessage></postmessage> </div> <div class="scisco-sq-comments"> <apcomments id="comments-449" class="have-comments"></apcomments> </div> </div> <div class="scisco-sq-vote"><div id="vote_449" class="ap-vote net-vote" ap-vote='{"post_id":449,"active":"","net":0,"__nonce":"1de7724744"}'><a class="apicon-thumb-up ap-tip vote-up" href="#" title="投票支持这个帖子" ap="vote_up"></a><span class="net-vote-count" data-view="ap-net-vote" itemprop="upvoteCount" ap="votes_net">0</span><a data-tipposition="bottom center" class="apicon-thumb-down ap-tip vote-down" href="#" title="对此文章投反对票" ap="vote_down"></a></div></div> </div> </div> </div> <!-- Either there are no banners, they are disabled or none qualified for this location! --> <apanswersw style="display:none"> <div id="ap-answers-c"> <div class="ap-sorting-tab clearfix"> <h3 class="ap-answers-label ap-pull-left" ap="answers_count_t"> <span itemprop="answerCount">0</span> 回答 </h3> <ul id="answers-order" class="ap-answers-tab ap-ul-inline clearfix"><li class="active"><a href="https://bbs.mallol.cn/question/how-to-create-magento2-theme/?order_by=active#answers-order">热门</a></li><li><a href="https://bbs.mallol.cn/question/how-to-create-magento2-theme/?order_by=voted#answers-order">已投票</a></li><li><a href="https://bbs.mallol.cn/question/how-to-create-magento2-theme/?order_by=newest#answers-order">最新</a></li><li><a href="https://bbs.mallol.cn/question/how-to-create-magento2-theme/?order_by=oldest#answers-order">最老的</a></li></ul> </div> <div id="answers"> <apanswers> </apanswers> </div> </div> </apanswersw> <div class="scisco-login-form"> <form name="loginform" id="loginform" action="https://bbs.mallol.cn/wp-login.php" method="post"><p class="login-username"> <label for="user_login">用户名或邮箱地址</label> <input type="text" name="log" id="user_login" autocomplete="username" class="input" value="" size="20" /> </p><p class="login-password"> <label for="user_pass">密码</label> <input type="password" name="pwd" id="user_pass" autocomplete="current-password" spellcheck="false" class="input" value="" size="20" /> </p><p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="登录" /> <input type="hidden" name="redirect_to" value="https://bbs.mallol.cn/question/how-to-create-magento2-theme/" /> </p></form> <ul class="scisco-login-form-links"> <li> <a href="https://bbs.mallol.cn/register/">註冊</a> </li> <li> <a href="https://bbs.mallol.cn/findpassword/">忘记密码</a> </li> </ul> </div> </div> </div> </div> </div> <div class="clearfix"></div> <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <!-- bbs.mallol.cn-728x90 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2649345950577498" data-ad-slot="7303006184" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </main> <div class="clearfix"></div> <footer id="scisco-footer"> <div id="footer-widgets"> <div class="container-fluid"> <div class="row"> <div class="col-12 col-lg-6 col-xl-3 mb-5 mb-xl-0"> <div id="text-8" class="widget_text scisco-widget"> <div class="textwidget"><p>我们是高品质的 Magento2 开发者社区，致力于为 Magento 开发者提供一个分享创造、结识伙伴、协同互助的平台。<br /> QQ 群: 326270402<br /> <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=wi5QPl8p3E7vH9HPPFFAVo1jEcfe_Koa&jump_from=webapi&authKey=Bltq4f4L7Vtu5IQsOvJ/jEgQTK0FuiFurlKSRI8RRggCfVd9nQhX7jXJ3eJpTqzD"><img decoding="async" border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Magento2开发&运营进阶群" title="Magento2开发&运营进阶群"></a></p> <p><a style="margin-top: 5px;" href="https://bbs.mallol.cn/contact/" target="_blank" rel="noopener">联系我们</a></p> </div> </div><div id="text-4" class="widget_text scisco-widget"><h6 class="highlighted-title">关注交流</h6> <div class="textwidget"><div class="row"> <div class="col-md-12 col-sm-4 col-xs-4"><img decoding="async" class="lazyloaded" src="https://bbs.mallol.cn/wp-content/uploads/2025/12/1766918891-小程序.jpg" alt="打开微信小程序" width="159" height="159" data-ll-status="loaded" /><noscript><img decoding="async" src="https://bbs.mallol.cn/wp-content/uploads/2025/12/1766918891-小程序.jpg" alt="打开微信小程序" /></noscript></p> <p class="qr-tips">微信小程序<br /> Magento2中文社区</p> </div> <div class="col-md-12 col-sm-4 col-xs-4"><img decoding="async" class="lazyloaded" src="https://bbs.mallol.cn/wp-content/uploads/2025/12/1766918893-qq群-167x300.jpg" alt="QQ扫描加群" width="166" height="166" data-ll-status="loaded" /><noscript><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><img decoding="async" src="https://bbs.mallol.cn/wp-content/uploads/2025/12/1766918893-qq群-167x300.jpg" alt="QQ扫描加群" /><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_end"></span></noscript></p> <p class="qr-tips">QQ扫描加群<br /> 326270402</p> </div> </div> </div> </div></div> <div class="col-12 col-lg-6 col-xl-3 mb-5 mb-xl-0"> <div id="recent-posts-2" class="widget_recent_entries scisco-widget"> <h6 class="highlighted-title">近期文章</h6> <ul> <li> <a href="https://bbs.mallol.cn/h-s-b-s-z-d-g-n-j-d-d-x-m-y-y-r-g-s-g-n-f-z-d-s-f-c-j-d-d-x-m-j-h-y-h-d-b/">Hyvä是不是只对功能简单的项目有用。如果是功能复杂 第三方插件多的项目 就会有很多bug</a> <span class="post-date">2026年1月8日</span> </li> <li> <a href="https://bbs.mallol.cn/h-d-y-l-s-s-m-c-x-l-n-x-n-r-w-s-m-h-r-q-t-x-n-q-f/">Hyvä的原理是什么？ 重写了哪些内容？ 为什么会让前台性能起飞？</a> <span class="post-date">2026年1月8日</span> </li> <li> <a href="https://bbs.mallol.cn/h-s-s-m-g-p-y-s-m-q-b-h-x-x-z-b-j-l-x-m-h/">Hyvä 是什么？跟pwa有什么区别？ 好像现在比较流行magento hyva</a> <span class="post-date">2026年1月8日</span> </li> <li> <a href="https://bbs.mallol.cn/n-z-z-l-m-w-s-m-q-t-f-x-l-h-r-r-y-h-m-y-c-d-m-z-x-c/">你中招了嘛？为什么嵌套反序列化仍然有害 — Magento 远程代码执行（CVE-2025-54236）</a> <span class="post-date">2025年11月12日</span> </li> <li> <a href="https://bbs.mallol.cn/m-s-y-g-c-j-z-y-h-i-d-w-g-n/">Magento 使用 geoip2 插件做用户IP定位功能</a> <span class="post-date">2024年7月7日</span> </li> </ul> </div></div> <div class="col-12 col-lg-6 col-xl-3 mb-5 mb-xl-0"> <div id="ap_questions_widget-3" class="widget_ap_questions_widget scisco-widget"><h6 class="highlighted-title">近期问题</h6><div class="ap-widget-inner"><div class="widget_recent_entries clearfix"> <ul> <li> <a class="ap-question-title" href="https://bbs.mallol.cn/question/x-z-y-y-a-c-k-f-y-w-h-z-j-g-z-s-d-x-d/">寻找拥有Adobe Commerce开发运维或者架构证书的兄弟</a> <span class="post-date">0 Answers - 0 Votes</span> </li> <li> <a class="ap-question-title" href="https://bbs.mallol.cn/question/m-d-b-s-b/">MagePack 打包失败</a> <span class="post-date">0 Answers - 0 Votes</span> </li> <li> <a class="ap-question-title" href="https://bbs.mallol.cn/question/m-c-q-d-d-s-r-w-x-x-d-l-b-q-d-y-b-s-x-s-d-q-d-h-k-j-z-d-t-c/">Magento2.4.8CE 启动定时任务,消息队列不启动也不生效，手动启动，很快就自动退出</a> <span class="post-date">1 Answers - 0 Votes</span> </li> <li> <a class="ap-question-title" href="https://bbs.mallol.cn/question/w-z-z-h-z-y-y-s-m-t-d-y-h-d-l-j-z-c-y-h-z-z-y-s-h-b-f-j-j/">网站做好在运营时 每天都有很多垃圾注册用户 这种有啥好办法拒绝</a> <span class="post-date">2 Answers - 0 Votes</span> </li> <li> <a class="ap-question-title" href="https://bbs.mallol.cn/question/m-k-f-c-j-d-c-k-x-g-w-t/">magento2开发插件的仓库相关问题</a> <span class="post-date">1 Answers - 0 Votes</span> </li> <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <!-- bbs.mallol.cn-728x90 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2649345950577498" data-ad-slot="7303006184" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </ul> </div> </div></div></div> <div class="col-12 col-lg-6 col-xl-3"> <div id="text-3" class="widget_text scisco-widget"><h6 class="highlighted-title">服务器推荐</h6> <div class="textwidget"><ul id="menu-links" class="menu"> <li><a href="https://bbs.mallol.cn/go/cloudways" target="_blank" rel="noopener">cloudways (速度提升300%)</a></li> <li id="menu-item-2659" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2659"><a title="阿里云服务器" href="/go/aliyun" target="_blank" rel="noopener noreferrer">阿里云</a></li> <li id="menu-item-97184" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97184"><a title="腾讯云云服务器" href="/go/tencent" target="_blank" rel="noopener noreferrer">腾讯云</a></li> <li><a title="AWS(外贸)" href="/go/aws" target="_blank" rel="noopener noreferrer">AWS(业界大佬,比较贵)</a></li> <li><a href="/go/googlecloud" target="_blank" rel="noopener">谷歌云(赠送$300)</a></li> <li><a href="https://bbs.mallol.cn/go/vultr" target="_blank" rel="noopener noreferrer">Vultr(赠送$100,性价比高)</a></li> </ul> </div> </div><div id="tag_cloud-2" class="widget_tag_cloud scisco-widget"><h6 class="highlighted-title">热门话题</h6><div class="tagcloud"><a href="https://bbs.mallol.cn/questions/categories/m2-questions/" class="tag-cloud-link tag-link-103 tag-link-position-1" style="font-size: 0.85rem;" aria-label="M2交流区 371 项">M2交流区<span class="tag-link-count"> 371</span></a> <a href="https://bbs.mallol.cn/questions/categories/development-notes/" class="tag-cloud-link tag-link-120 tag-link-position-2" style="font-size: 0.85rem;" aria-label="开发笔记 121 项">开发笔记<span class="tag-link-count"> 121</span></a> <a href="https://bbs.mallol.cn/questions/categories/m2-installation-settings/" class="tag-cloud-link tag-link-106 tag-link-position-3" style="font-size: 0.85rem;" aria-label="M2安装设置 83 项">M2安装设置<span class="tag-link-count"> 83</span></a> <a href="https://bbs.mallol.cn/questions/categories/tutorial-materials/" class="tag-cloud-link tag-link-126 tag-link-position-4" style="font-size: 0.85rem;" aria-label="教程资料 82 项">教程资料<span class="tag-link-count"> 82</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e7%a6%8f%e5%88%a9%e5%8c%ba/" class="tag-cloud-link tag-link-147 tag-link-position-5" style="font-size: 0.85rem;" aria-label="福利区 64 项">福利区<span class="tag-link-count"> 64</span></a> <a href="https://bbs.mallol.cn/questions/categories/m2-share-plugin-theme/" class="tag-cloud-link tag-link-107 tag-link-position-6" style="font-size: 0.85rem;" aria-label="M2插件和模版分享区 59 项">M2插件和模版分享区<span class="tag-link-count"> 59</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e6%8b%9b%e8%81%98%e5%90%88%e4%bd%9c/" class="tag-cloud-link tag-link-142 tag-link-position-7" style="font-size: 0.85rem;" aria-label="招聘合作 40 项">招聘合作<span class="tag-link-count"> 40</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e5%8a%a9%e7%90%86%e5%bc%80%e5%8f%91%e4%ba%ba%e5%91%98%e8%80%83%e8%af%95%e6%b5%8b%e8%af%95%e9%a2%98%e5%ba%93/" class="tag-cloud-link tag-link-155 tag-link-position-8" style="font-size: 0.85rem;" aria-label="助理开发人员考试测试题库 31 项">助理开发人员考试测试题库<span class="tag-link-count"> 31</span></a> <a href="https://bbs.mallol.cn/questions/categories/troubleshooting/" class="tag-cloud-link tag-link-294 tag-link-position-9" style="font-size: 0.85rem;" aria-label="故障排除 16 项">故障排除<span class="tag-link-count"> 16</span></a> <a href="https://bbs.mallol.cn/questions/categories/magento2-%e8%af%ad%e8%a8%80%e5%8c%85%e4%b8%8b%e8%bd%bd/" class="tag-cloud-link tag-link-141 tag-link-position-10" style="font-size: 0.85rem;" aria-label="Magento2 语言包下载 16 项">Magento2 语言包下载<span class="tag-link-count"> 16</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e6%9c%8d%e5%8a%a1%e5%99%a8%e8%bf%90%e7%bb%b4/" class="tag-cloud-link tag-link-143 tag-link-position-11" style="font-size: 0.85rem;" aria-label="服务器运维 16 项">服务器运维<span class="tag-link-count"> 16</span></a> <a href="https://bbs.mallol.cn/questions/categories/m1-questions/" class="tag-cloud-link tag-link-148 tag-link-position-12" style="font-size: 0.85rem;" aria-label="M1交流区 15 项">M1交流区<span class="tag-link-count"> 15</span></a> <a href="https://bbs.mallol.cn/questions/categories/magento-2-professional-developer-plus/" class="tag-cloud-link tag-link-156 tag-link-position-13" style="font-size: 0.85rem;" aria-label="高级开发Plus人员考试测试题库 15 项">高级开发Plus人员考试测试题库<span class="tag-link-count"> 15</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e7%81%8c%e6%b0%b4%e5%8c%ba/" class="tag-cloud-link tag-link-145 tag-link-position-14" style="font-size: 0.85rem;" aria-label="灌水区 13 项">灌水区<span class="tag-link-count"> 13</span></a> <a href="https://bbs.mallol.cn/questions/categories/translations/" class="tag-cloud-link tag-link-130 tag-link-position-15" style="font-size: 0.85rem;" aria-label="翻译 13 项">翻译<span class="tag-link-count"> 13</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e7%94%b5%e5%95%86%e8%90%a5%e9%94%80/" class="tag-cloud-link tag-link-144 tag-link-position-16" style="font-size: 0.85rem;" aria-label="电商营销 5 项">电商营销<span class="tag-link-count"> 5</span></a> <a href="https://bbs.mallol.cn/questions/categories/%e6%84%8f%e8%a7%81%e5%8f%8d%e9%a6%88/" class="tag-cloud-link tag-link-146 tag-link-position-17" style="font-size: 0.85rem;" aria-label="意见反馈 5 项">意见反馈<span class="tag-link-count"> 5</span></a> <a href="https://bbs.mallol.cn/questions/categories/web-design/" class="tag-cloud-link tag-link-123 tag-link-position-18" style="font-size: 0.85rem;" aria-label="前端架构 5 项">前端架构<span class="tag-link-count"> 5</span></a> <a href="https://bbs.mallol.cn/questions/categories/examples/" class="tag-cloud-link tag-link-127 tag-link-position-19" style="font-size: 0.85rem;" aria-label="成功案例 4 项">成功案例<span class="tag-link-count"> 4</span></a> <a href="https://bbs.mallol.cn/questions/categories/magento2-%e5%a4%96%e8%b4%b8%e7%89%88%e5%8f%91%e5%b8%83-%e4%b8%8b%e8%bd%bd/" class="tag-cloud-link tag-link-140 tag-link-position-20" style="font-size: 0.85rem;" aria-label="Magento2 外贸版发布/下载 3 项">Magento2 外贸版发布/下载<span class="tag-link-count"> 3</span></a> <a href="https://bbs.mallol.cn/questions/categories/magento2-exam/" class="tag-cloud-link tag-link-154 tag-link-position-21" style="font-size: 0.85rem;" aria-label="Magento2考试题库 0 项">Magento2考试题库<span class="tag-link-count"> 0</span></a></div> </div><div id="text-11" class="widget_text scisco-widget"> <div class="textwidget"><div style="position: fixed; right: 1rem; bottom: 5rem; z-index: 999;"> <ul> <li style="margin-bottom: 20px; text-align: center; list-style: none;"><a href="http://wpa.qq.com/msgrd?v=3&uin=529894459&site=qq&menu=yes" target="_blank" rel="noopener"><img decoding="async" title="点击这里给我发消息" src="https://pub.idqqimg.com/qconn/wpa/button/button_old_111.gif" alt="点击这里给我发消息" border="0" /></a></li> <li style="list-style: none;"><a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=FZVnvJBrJSTj9556DuFQxy8AF3PzF1YB&jump_from=webapi&authKey=zQ1BRv95XJIhbwsh4QUCOt3zO4nl/x1xb/99TojvHJ03axIaWItX1anaDjmj67iN"><img decoding="async" border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Magento2开发&运营进阶群" title="Magento2开发&运营进阶群"></a></li> </ul> </div> </div> </div></div> </div> </div> </div> <div id="scisco-footer-bottom"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-12 col-md-6"> <p class="credits">© 2025 MALLOL. All Rights Reserved<br />With Love by <a href="https://bbs.mallol.cn/" target="_blank" rel="noopener">Magento2专业中文社区</a>.<a href="https://beian.miit.gov.cn/#/Integrated/index" target="__blank" rel="nofollow">鄂ICP备13000850号-2</a></p> </div> <div class="col-12 col-md-6 mt-3 mt-md-0"> </div> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <div id="scisco-gototop" data-toggle="tooltip" data-placement="top" title="返回顶部"> <i class="fas fa-arrow-up"></i> </div> <script data-optimized="1" id='kirki-viewport-lists'>var kirkiViewports={"md":{"value":1200,"scale":1,"minWidth":1200,"maxWidth":1200,"title":"Desktop","icon":"desktop","activeIcon":"desktop-hover","id":"md","type":"max"},"tablet":{"value":991,"scale":1,"minWidth":991,"maxWidth":991,"title":"Tablet","icon":"tablet-default","activeIcon":"tablet-hover","type":"max","id":"tablet"},"mobileLandscape":{"value":767,"scale":1,"minWidth":767,"maxWidth":767,"title":"Landscape","icon":"phone-hr-default","activeIcon":"phone-hr-hover","type":"max","id":"mobileLandscape"},"mobile":{"value":575,"scale":1,"minWidth":575,"maxWidth":575,"title":"Mobile","icon":"phone-vr-default","activeIcon":"phone-vr-hover","type":"max","id":"mobile"}}</script><script data-optimized="1" id='kirki-variable-lists'>var kirkiCSSVariable={"data":[{"title":"Colors","key":"color","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Numbers","key":"size","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Text Styles","key":"text-style","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Font Family","key":"font-family","modes":[{"title":"Default","key":"default"}],"variables":[]}]}</script><script data-optimized="1" id="kirki-api-and-nonce">window.wp_kirki={ajaxUrl:"https://bbs.mallol.cn/wp-admin/admin-ajax.php",restUrl:"https://bbs.mallol.cn/wp-json/",siteUrl:"https://bbs.mallol.cn",apiVersion:"v1",postId:"449",nonce:"d0b6ec2a4f",call_from:"",templateId:"",context:{"id":449,"type":"post"}}</script> <script>function copy_to_clipBoard(btn){var copyText=btn.previousSibling;copyText.select();document.execCommand("copy")}</script> <script>const lazyloadRunObserver=()=>{const lazyloadBackgrounds=document.querySelectorAll(`.e-con.e-parent:not(.e-lazyloaded)`);const lazyloadBackgroundObserver=new IntersectionObserver((entries)=>{entries.forEach((entry)=>{if(entry.isIntersecting){let lazyloadBackground=entry.target;if(lazyloadBackground){lazyloadBackground.classList.add('e-lazyloaded')} lazyloadBackgroundObserver.unobserve(entry.target)}})},{rootMargin:'200px 0px 200px 0px'});lazyloadBackgrounds.forEach((lazyloadBackground)=>{lazyloadBackgroundObserver.observe(lazyloadBackground)})};const events=['DOMContentLoaded','elementor/lazyload/observe',];events.forEach((event)=>{document.addEventListener(event,lazyloadRunObserver)})</script> <script data-optimized="1" type="text/javascript">!function(e,n){var r={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":!0,"linehover":!0,"rawcodeDbclick":!1,"textOverflow":"break","linenumbers":!0,"theme":"enlighter","language":"generic","retainCssClasses":!1,"collapse":!1,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""},"resources":["https:\/\/bbs.mallol.cn\/wp-content\/plugins\/enlighter\/cache\/enlighterjs.min.css?f3IxdwtRhav8Ixi","https:\/\/bbs.mallol.cn\/wp-content\/plugins\/enlighter\/resources\/enlighterjs\/enlighterjs.min.js"]},o=document.getElementsByTagName("head")[0],t=n&&(n.error||n.log)||function(){};e.EnlighterJSINIT=function(){!function(e,n){var r=0,l=null;function c(o){l=o,++r==e.length&&(!0,n(l))}e.forEach(function(e){switch(e.match(/\.([a-z]+)(?:[#?].*)?$/)[1]){case"js":var n=document.createElement("script");n.onload=function(){c(null)},n.onerror=c,n.src=e,n.async=!0,o.appendChild(n);break;case"css":var r=document.createElement("link");r.onload=function(){c(null)},r.onerror=c,r.rel="stylesheet",r.type="text/css",r.href=e,r.media="all",o.appendChild(r);break;default:t("Error: invalid file extension",e)}})}(r.resources,function(e){e?t("Error: failed to dynamically load EnlighterJS resources!",e):"undefined"!=typeof EnlighterJS?EnlighterJS.init(r.selectors.block,r.selectors.inline,r.options):t("Error: EnlighterJS resources not loaded yet!")})},(document.querySelector(r.selectors.block)||document.querySelector(r.selectors.inline))&&e.EnlighterJSINIT()}(window,console)</script> <script data-optimized="1" type='text/javascript'>(function(){var c=document.body.className;c=c.replace(/woocommerce-no-js/,'woocommerce-js');document.body.className=c})()</script> <script data-optimized="1" type="text/javascript" id="anspress-tags-js-extra">var apTagsTranslation={"deleteTag":"\u5220\u9664\u6807\u7b7e","addTag":"\u6dfb\u52a0\u6807\u7b7e","tagAdded":"\u5df2\u6dfb\u52a0\u81f3\u6807\u7b7e\u5217\u8868","tagRemoved":"\u4ece\u6807\u7b7e\u5217\u8868\u4e2d\u5220\u9664\u3002","suggestionsAvailable":"\u63d0\u4f9b\u5efa\u8bae\u3002 \u4f7f\u7528\u4e0a\u4e0b\u7bad\u5934\u952e\u8fdb\u884c\u9605\u8bfb\u3002"}</script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/21652c28893e25368afbf963f9332e5d.js?ver=e03a0" id="anspress-tags-js"></script> <script data-optimized="1" type="text/javascript" id="adrotate-groups-js-extra">var impression_object={"ajax_url":"https:\/\/bbs.mallol.cn\/wp-admin\/admin-ajax.php"}</script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/ce06ffbdfb1967dd39e0ff847ed7e93f.js?ver=7e93f" id="adrotate-groups-js"></script> <script data-optimized="1" type="text/javascript" id="adrotate-clicker-js-extra">var click_object={"ajax_url":"https:\/\/bbs.mallol.cn\/wp-admin\/admin-ajax.php"}</script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/43cf5173deb24bbb016498e2fc234f4d.js?ver=34f4d" id="adrotate-clicker-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/c60430d834b742c61cc8b51b0772bb8f.js?ver=f17e3" id="swv-js"></script> <script data-optimized="1" type="text/javascript" id="contact-form-7-js-translations">(function(domain,translations){var localeData=translations.locale_data[domain]||translations.locale_data.messages;localeData[""].domain=domain;wp.i18n.setLocaleData(localeData,domain)})("contact-form-7",{"translation-revision-date":"2024-12-09 02:48:04+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"zh_CN"},"Error:":["\u62a5\u9519\uff1a"]}},"comment":{"reference":"includes\/js\/index.js"}})</script> <script data-optimized="1" type="text/javascript" id="contact-form-7-js-before">var wpcf7={"api":{"root":"https:\/\/bbs.mallol.cn\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":1}</script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/1003ad6e1c7542b412db0b7f29994394.js?ver=ad864" id="contact-form-7-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/845a7f02092efe527b0d04d0b89ac58c.js?ver=8029f" id="scisco-child-custom-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/4b5cb9150e4747e0a0442b824451752d.js?ver=d59b5" id="popper-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/b5d6db2ac87ebf1b681da3bf4f1617a4.js?ver=c6f20" id="bootstrap-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/79b362047ddf794585297f41e7e622b8.js?ver=5c39e" id="smart-menu-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/c30176ab4d56bd397e54b73501d66eaa.js?ver=f8de5" id="egemenerd-grid-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/8edfaabba571194522e255432e38a1af.js?ver=3ce32" id="featherlight-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/8ac92bfb481ecd35c6c42e6e36afac1b.js?ver=d0671" id="scisco-custom-js"></script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/3f51ccde0798fdd7a5b7a3e675d97758.js?ver=3e952" id="sourcebuster-js-js"></script> <script data-optimized="1" type="text/javascript" id="wc-order-attribution-js-extra">var wc_order_attribution={"params":{"lifetime":1.0e-5,"session":30,"base64":!1,"ajaxurl":"https:\/\/bbs.mallol.cn\/wp-admin\/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":!0},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}}</script> <script data-optimized="1" type="text/javascript" src="https://bbs.mallol.cn/wp-content/litespeed/js/fd6f6802cda7a71940f7b9f643a02980.js?ver=92f9f" id="wc-order-attribution-js"></script> <!-- AdRotate JS --> <script data-optimized="1" type="text/javascript">jQuery(document).ready(function(){if(jQuery.fn.gslider){jQuery('.g-1').gslider({groupid:1,speed:10000});jQuery('.g-2').gslider({groupid:2,speed:6000})}})</script> <!-- /AdRotate JS --> <div id="wsocial-dialog-login" style="display:none;position: fixed;z-index: 999;"> <div class="xh-cover"></div> <div class="xh-regbox xh-window"> <div class="xh-title">登录</div> <form class="xh-form"> <div class="commonlogin43a0848615f7ca7360b208595ec921440 fields-error"></div> <div class="xh-form-group"> <label class="required">用户名/邮箱/手机</label> <input type="text" id="login43a0848615f7ca7360b208595ec921440_login_name" name="login_name" value="" placeholder="请输入用户名，邮箱或手机" class="form-control " style="" /> </div> <script data-optimized="1" type="text/javascript">(function($){$(document).bind('on_form_login43a0848615f7ca7360b208595ec921440_submit',function(e,m){m.login_name=$('#login43a0848615f7ca7360b208595ec921440_login_name').val()})})(jQuery)</script> <div class="xh-form-group"> <label class="required">密码</label> <input type="password" id="login43a0848615f7ca7360b208595ec921440_login_password" name="login_password" value="" placeholder="" class="form-control " style="" /> </div> <script data-optimized="1" type="text/javascript">(function($){$(document).bind('on_form_login43a0848615f7ca7360b208595ec921440_submit',function(e,m){m.login_password=$('#login43a0848615f7ca7360b208595ec921440_login_password').val()})})(jQuery)</script> <div class="xh-input-group" style="width:100%;"> <input name="captcha" type="text" id="login43a0848615f7ca7360b208595ec921440_captcha" maxlength="6" class="form-control" placeholder="图形验证码"> <span class="xh-input-group-btn" style="width:96px;"><img style="width:96px;height:35px;border:1px solid #ddd;background:url('https://bbs.mallol.cn/wp-content/plugins/wechat-social-login/assets/image/loading.gif') no-repeat center;" id="img-captcha-login43a0848615f7ca7360b208595ec921440_captcha"/></span> </div> <script data-optimized="1" type="text/javascript">(function($){if(!$){return} window.captcha_login43a0848615f7ca7360b208595ec921440_captcha_load=function(){$('#img-captcha-login43a0848615f7ca7360b208595ec921440_captcha').attr('src','https://bbs.mallol.cn/wp-content/plugins/wechat-social-login/assets/image/empty.png');$.ajax({url:'https://bbs.mallol.cn/wp-admin/admin-ajax.php?action=xh_social_captcha&social_key=social_captcha&xh_social_captcha=a4617dbd6e¬ice_str=5219877735&hash=0c6ffcda3ba0de1a672d75f4099eb4bf',type:'post',timeout:60*1000,async:!0,cache:!1,data:{},dataType:'json',success:function(m){if(m.errcode==0){$('#img-captcha-login43a0848615f7ca7360b208595ec921440_captcha').attr('src',m.data)}}})};$('#img-captcha-login43a0848615f7ca7360b208595ec921440_captcha').click(function(){window.captcha_login43a0848615f7ca7360b208595ec921440_captcha_load()});window.captcha_login43a0848615f7ca7360b208595ec921440_captcha_load()})(jQuery)</script> <script data-optimized="1" type="text/javascript">(function($){$(document).bind('on_form_login43a0848615f7ca7360b208595ec921440_submit',function(e,m){m.captcha=$('#login43a0848615f7ca7360b208595ec921440_captcha').val()})})(jQuery)</script> <div class="xh-form-group mt10"> <button type="button" id="btn-login" onclick="window.xh_social_view.login();" class="xh-btn xh-btn-primary xh-btn-block xh-btn-lg">登录</button> </div> <div class="xh-form-group xh-mT20"> <label>快速登录</label> <div class="xh-social"> <a title="Github" href="https://bbs.mallol.cn/wp-admin/admin-ajax.php?channel_id=social_github&action=xh_social_channel&tab=login_redirect_to_authorization_uri&xh_social_channel=186e5e05f8¬ice_str=3571578927&hash=637b95e362a59ec2455ae04bdcfde35c&redirect_to=https%3A%2F%2Fbbs.mallol.cn%2Fquestion%2Fhow-to-create-magento2-theme%2F" class="xh-social-item xh-github"></a><a title="QQ" href="https://bbs.mallol.cn/wp-admin/admin-ajax.php?channel_id=social_qq&action=xh_social_channel&tab=login_redirect_to_authorization_uri&xh_social_channel=186e5e05f8¬ice_str=7255791837&hash=c04083c544d3ab6cf6a20b6c966187be&redirect_to=https%3A%2F%2Fbbs.mallol.cn%2Fquestion%2Fhow-to-create-magento2-theme%2F" class="xh-social-item xh-qq"></a> </div> </div> </form> <script data-optimized="1" type="text/javascript">(function($){if(!window.xh_social_view){window.xh_social_view={}} window.xh_social_view.reset=function(){$('.xh-alert').empty().css('display','none')};window.xh_social_view.error=function(msg,parent){var s=parent?(parent+'.fields-error'):'.fields-error';$(s).html('<div class="xh-alert xh-alert-danger" role="alert">'+msg+'</div>').css('display','block')};window.xh_social_view.warning=function(msg,parent){var s=parent?(parent+'.fields-error'):'.fields-error';$(s).html('<div class="xh-alert xh-alert-warning" role="alert">'+msg+'</div>').css('display','block')};window.xh_social_view.success=function(msg,parent){var s=parent?(parent+'.fields-error'):'.fields-error';$(s).html('<div class="xh-alert xh-alert-success" role="alert">'+msg+'</div>').css('display','block')}})(jQuery)</script><script data-optimized="1" type="text/javascript">(function($){$(document).keypress(function(e){if(window.__wsocial_enable_entrl_submit){if(e.which==13){　　window.xh_social_view.login()}}});window.xh_social_view.login=function(){window.xh_social_view.reset();var data={};$(document).trigger('on_form_login43a0848615f7ca7360b208595ec921440_submit',data);var validate={data:data,success:!0,message:null};$(document).trigger('wsocial_pre_login',validate);if(!validate.success){window.xh_social_view.warning(validate.message,'.commonlogin43a0848615f7ca7360b208595ec921440');return!1} var callback={type:'login',done:!1,data:data};$(document).trigger('wsocial_action_before',callback);if(callback.done){return} if(window.xh_social_view.loading){return} window.xh_social_view.loading=!0;$('#btn-login').attr('disabled','disabled').text('加载中...');jQuery.ajax({url:'https://bbs.mallol.cn/wp-admin/admin-ajax.php?action=xh_social_add_ons_login&tab=login&xh_social_add_ons_login=763a14c957¬ice_str=5315978277&hash=236329f980d4799f3ec0ccdfc584a54d',type:'post',timeout:60*1000,async:!0,cache:!1,data:data,dataType:'json',complete:function(){window.xh_social_view.loading=!1;$('#btn-login').removeAttr('disabled').text('登录')},success:function(m){var callback={type:'login',done:!1,retry:window.xh_social_view.login,data:m};$(document).trigger('wsocial_action_after',callback);if(callback.done){return} if(m.errcode==405||m.errcode==0){window.xh_social_view.success('登录成功！','.commonlogin43a0848615f7ca7360b208595ec921440');if(window.top&&window.top!=window.self){var $wp_dialog=jQuery('#wp-auth-check-wrap',window.top.document);if($wp_dialog.length>0){$wp_dialog.hide();return}} location.href='https://bbs.mallol.cn/question/how-to-create-magento2-theme/';return} window.xh_social_view.error(m.errmsg,'.commonlogin43a0848615f7ca7360b208595ec921440')},error:function(e){window.xh_social_view.error('系统内部错误！','.commonlogin43a0848615f7ca7360b208595ec921440');console.error(e.responseText)}})}})(jQuery)</script> <div class="xh-user-register xh-w"> <a href="https://bbs.mallol.cn/register/">注册</a>|<a href="https://bbs.mallol.cn/findpassword/">忘记密码？</a> </div> <a class="xh-close" href="javascript:void(0);"></a> </div> </div> <script data-optimized="1" type="text/javascript">(function($){$('#wsocial-dialog-login .xh-close,#wsocial-dialog-login .xh-cover').click(function(){window.__wsocial_enable_entrl_submit=!1;$('#wsocial-dialog-login').hide()});window.wsocial_dialog_login_show=function(){$('#wsocial-dialog-login').css('display','block');window.__wsocial_enable_entrl_submit=!0;window.__modal_wsocial_login_resize();return!1};$(function(){$('.btn-wsocial-login').click(function(event){event.stopPropagation();window.wsocial_dialog_login_show();return!1})});window.__modal_wsocial_login_resize=function(){var $ul=$('#wsocial-dialog-login');var width=window.innerWidth,height=window.innerHeight;if(typeof width!='number'){if(document.compatMode=='CSS1Compat'){width=document.documentElement.clientWidth;height=document.documentElement.clientHeight}else{width=document.body.clientWidth;height=document.body.clientHeight}} $ul.css({top:((height-$ul.height())/2)+"px",left:((width-$ul.width())/2)+"px"})};$(window).resize(function(){window.__modal_wsocial_login_resize()})})(jQuery)</script></body> </html> <!-- Page cached by LiteSpeed Cache 7.6.2 on 2026-05-24 07:19:12 -->