开发技术文章列表

magento2中的布局文件类型以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10837 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento 2 中，布局文件用于指定页面的布局和结构。布局文件通常保存在 app/design/frontend/MyVendor/mytheme/Magento_Module/layout/ 目录下，并使用 .xml 文件扩展名。Magento 2 支持多种类型的布局文件，下面是一些常见的布局文件类型和示例代码：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">default.xml<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">default.xml 是 Magento 2 中默认使用的布局文件，用于指定页面的基本结构和组件。该文件通常保存在主题的 Magento_Theme/layout/ 目录中。下面是一个简单的 Magento 2 default.xml 文件的代码示例：<pre class="brush:as3;toolbar:false"> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">   <body>     <referenceBlock name="header.container">       <block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">         <arguments>           <argument name="show_part" xsi:type="string">welcome</argument>         </arguments>       </block>     </referenceBlock>     <referenceContainer name="content">       <block class="Magento\Framework\View\Element\Template" name="page.main.title" template="Magento_Theme::html/title.phtml"/>       <block class="Magento\Framework\View\Element\Template" name="page.messages" template="Magento_Theme::html/messages.phtml"/>       <block class="Magento\Framework\View\Element\Template" name="page.main" template="Magento_Theme::html/container.phtml"/>     </referenceContainer>     <referenceBlock name="footer">       <arguments>         <argument name="show_part" xsi:type="string">powered</argument>       </arguments>     </referenceBlock>   </body> </page></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;"><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">在上述代码中，使用 <page> <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">标记定义页面的基本结构和属性。在 <body> <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">标记中，使用 <referenceBlock> <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">和 <referenceContainer> <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">标记来指定页面上的块和容器。例如，在第一个 <referenceBlock> <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">元素中，定义了一个名为 header <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">的块，并将其添加到 header.container <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">块中。在第一个 <referenceContainer> <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">元素中，定义了三个块：page.main.title<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">、page.messages <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">和 page.main<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">。

magento2中的配置产品视频以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10854 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Magento 2 提供了一种名为“产品视频”的功能，使您可以将产品视频添加到产品页面。要配置产品视频，您需要执行以下步骤：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建一个视频<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">首先，您需要为产品创建一个视频。您可以将视频文件上传到 Magento 2 平台，也可以将视频文件托管在第三方网站上（例如 YouTube 或 Vimeo）。在本例中，我们将使用 Vimeo 来托管视频。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Vimeo 上上传视频后，您需要获取视频的 ID。您可以在 Vimeo 视频页面的 URL 中找到视频 ID，例如：https://vimeo.com/123456789。在这个示例中，视频 ID 是 123456789。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建一个产品<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento 2 中创建一个产品，可以在产品编辑页面中添加视频。您可以按照以下步骤操作：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">进入 Magento 2 后台，转到“产品”>“目录”。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">单击“添加产品”按钮，创建一个新产品或编辑现有产品。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">转到“产品视频”选项卡，并输入以下信息：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">标题：视频标题。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">视频 URL：Vimeo 视频页面的 URL（例如 https://vimeo.com/123456789）。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">播放按钮文本：播放按钮上的文本。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">单击“保存并继续编辑”按钮，保存产品并返回编辑页面。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">添加视频块到产品布局<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在产品页面上添加视频块以显示视频。您可以使用产品布局文件中的 referenceBlock 元素来添加视频块。以下是一个简单的 Magento 2 产品布局文件的代码示例，其中包含一个视频块：<pre class="brush:as3;toolbar:false"> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">   <body>     <referenceContainer name="content">       <referenceBlock name="product.info.details">         <block class="Magento\Framework\View\Element\Template" name="product.video" template="Magento_Catalog::product/view/video.phtml"/>       </referenceBlock>     </referenceContainer>   </body> </page></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上述代码中，使用 referenceBlock 元素将名为 product.video 的块添加到产品详情页上的 product.info.details 块中。该块的模板文件位于 Magento_Catalog/templates/product/view/video.phtml。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建视频模板<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">最后，您需要创建一个视频模板文件，以在产品页面上显示视频。以下是一个简单的 Magento 2 视频模板文件的代码示例：<pre class="brush:as3;toolbar:false"> <?php /** @var $block \Magento\Framework\View\Element\Template */ /** @var $product \Magento\Catalog\Model\Product */ ?> <?php if ($product->getVideoUrl()): ?>   <div class="product-video">     <iframe src="<?= $block->escapeUrl($product->getVideoUrl()) ?>" frameborder="0" allowfullscreen></iframe>   </div> <?php endif; ?></pre>

magento2中的配置主题属性以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10886 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento 2 中，您可以通过配置主题属性来更改主题的外观和功能。以下是一些常见的主题属性配置，以及如何配置它们：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">配置主题颜色<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">要更改主题的颜色，您可以编辑主题的 _theme.less 文件。该文件包含一个名为 @color-primary 的变量，用于定义主题的主要颜色。您可以使用类似于以下代码的代码来更改主要颜色：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@color-primary: #007bff;<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上述代码中，我们将主要颜色更改为蓝色。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">配置字体<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">要更改主题的字体，您可以编辑主题的 _typography.less 文件。该文件包含一些变量，用于定义主题的字体大小和样式。以下是一些常见的字体变量：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@font-family__base：主题的基础字体族。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@font-size__base：主题的基础字体大小。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@line-height__base：主题的基础行高。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">您可以使用类似于以下代码的代码来更改字体：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@font-family__base: 'Open Sans', sans-serif;<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@font-size__base: 16px;<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@line-height__base: 1.5;<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上述代码中，我们将基础字体更改为 Open Sans，字体大小更改为 16 像素，行高更改为 1.5。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">配置布局<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">要更改主题的布局，您可以编辑主题的 default.xml 布局文件。该文件包含一个名为 page.layout 的标记，用于定义主题的布局。您可以使用类似于以下代码的代码来更改布局：<pre class="brush:as3;toolbar:false"> <referenceContainer name="content">   <block class="Magento\Framework\View\Element\Template" name="my-custom-block" template="MyVendor_MyTheme::my-custom-template.phtml" /> </referenceContainer></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上述代码中，我们向 content 容器添加了一个名为 my-custom-block 的自定义块。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">配置图像<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">要更改主题的图像，您可以编辑主题的 _variables.less 文件。该文件包含一些变量，用于定义主题的图像大小和样式。以下是一些常见的图像变量：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@icon-font-path：图标字体的路径。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@image-placeholder：占位符图像的路径。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@logo-width：标志图像的宽度。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">您可以使用类似于以下代码的代码来更改图像：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">@logo-width: 300px;<p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">在上述代码中，我们将标志图像的宽度更改为<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "Helvetica Neue";"> 300 像素。

magento2中的添加自定义图标以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10824 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Magento 2中添加自定义图标需要以下步骤：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建自定义图标字体文件<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 首先，使用一个图标字体生成器，例如IcoMoon或Fontello，在SVG或其他格式中创建自定义图标。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">b. 将这些图标导入字体生成器，并生成自定义字体文件（包括.ttf、.woff和.eot）。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">将自定义图标字体文件添加到Magento 2中<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 将自定义字体文件上传到Magento 2的主题目录下的web/fonts目录中。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">b. 在Magento 2的主题目录中创建一个 _theme.less 文件并在其中添加以下代码：<pre class="brush:as3;toolbar:false">// Define custom font face @font-face {     font-family: 'custom-icons';     src: url('@{baseDir}fonts/custom-icons.eot');     src: url('@{baseDir}fonts/custom-icons.eot?#iefix') format('embedded-opentype'),          url('@{baseDir}fonts/custom-icons.woff') format('woff'),          url('@{baseDir}fonts/custom-icons.ttf') format('truetype'),          url('@{baseDir}fonts/custom-icons.svg#custom-icons') format('svg');     font-weight: normal;     font-style: normal; }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">该代码定义了一个名为"custom-icons"的字体，其中包括所有自定义图标的字体文件。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在样式表中使用自定义图标<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 在需要使用自定义图标的样式表中，添加以下代码：<pre class="brush:as3;toolbar:false">.icon:before {     font-family: 'custom-icons';     content: '\e001'; // Replace with the code for your custom icon }</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这将为类名为 "icon" 的元素添加一个自定义图标，该图标的代码为 \e001。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">

magento2中的主题继承以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10837 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Magento 2中，可以通过主题继承来创建自定义主题，而不必直接编辑Magento 2的原始主题。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是在Magento 2中使用主题继承创建自定义主题的步骤：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建自定义主题<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 在Magento 2的主题目录中创建一个新目录，该目录将成为自定义主题的根目录。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">b. 在新目录中创建一个theme.xml文件，定义自定义主题的基本信息，例如名称、父级主题等。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">示例代码：<pre class="brush:as3;toolbar:false"><?xml version="1.0"?> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">     <title>Your Theme Title</title>     <parent>Magento/blank</parent> </theme></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">复制和编辑原始主题文件<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 在自定义主题的根目录中创建一个 Magento_Theme 文件夹。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">b. 复制 Magento 2 的原始主题文件到Magento_Theme文件夹中，以便您可以修改它们。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">c. 对这些文件进行编辑，以符合您的需求。例如，更改颜色、字体、布局等。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">清除缓存和重新编译静态资产<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 在Magento 2的根目录中，运行以下命令清除缓存：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">php bin/magento cache:clean<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">b. 然后，重新编译静态资产：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">php bin/magento setup:static-content:deploy<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这将使您的更改生效。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">将自定义主题设置为默认主题<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">a. 在Magento 2的后台中，转到 Stores > Configuration > Design。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">b. 在 "Design Theme" 下拉菜单中，选择您的自定义主题。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">c. 点击 "Save Config" 保存更改。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">现在，您的<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "Helvetica Neue";">Magento 2网站应该使用您的自定义主题。

magento2中的主题结构以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10848 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>Magento 2 的主题结构是基于模块化的结构组成的。每个主题都有一个主题目录，其中包含多个子目录和文件，这些文件定义了主题的样式、布局和模板等。 下面是 Magento 2 主题的一般结构： <pre class="brush:as3;toolbar:false">app/ └── design/     ├── frontend/     │   └── Vendor/     │       └── theme/     │           ├── etc/     │           ├── media/     │           ├── web/     │           └── registration.php     ├── adminhtml/     └── _fallback/</pre>其中： app/design/frontend/Vendor/theme 目录包含了前端主题的所有文件，例如样式、布局、模板和 JS 等文件。app/design/adminhtml/Vendor/theme 目录包含了后台主题的所有文件，例如样式、布局、模板和 JS 等文件。app/design/_fallback/Vendor/theme 目录包含了默认的主题文件，如果在前两个目录中找不到特定的文件，Magento 2 将会从 _fallback 目录中查找文件。下面是主题文件的详细解释： etc 目录etc 目录包含了主题的配置文件，例如 theme.xml、registration.php、composer.json 等。 theme.xml 文件定义了主题的名称、父主题、样式和布局等。registration.php 文件用于注册主题，并可以在其中定义主题的依赖项。composer.json 文件定义了主题的 Composer 依赖项。media 目录media 目录包含了主题的媒体文件，例如图片、视频和音频等文件。 web 目录web 目录包含了主题的所有前端文件，例如 CSS、JS 和模板文件等。 css 目录包含了主题的所有样式文件。js 目录包含了主题的所有 JavaScript 文件。images 目录包含了主题的所有图片文件。fonts 目录包含了主题的所有字体文件。Magento_Theme 目录包含了主题的布局和模板文件。

magento2中的找到模板、布局和样式以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10926 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento 2 中，模板、布局和样式是通过主题来组织和管理的。以下是在 Magento 2 中找到模板、布局和样式的方法以及相应的代码示例：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">找到模板文件：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento 2 中，模板文件通常位于 app/design/frontend/{Vendor}/{Theme}/Magento_{Module}/templates 目录下，其中 {Vendor} 是主题开发者的名称，{Theme} 是主题名称，{Module} 是需要修改的 Magento 模块名称。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">示例代码：假设我们想修改产品详情页面的模板，我们需要在以下目录中查找 view.phtml 文件：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">app/design/frontend/{Vendor}/{Theme}/Magento_Catalog/templates/product/view.phtml<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">找到布局文件：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento 2 中，布局文件通常位于 app/design/frontend/{Vendor}/{Theme}/Magento_{Module}/layout 目录下，其中 {Vendor} 是主题开发者的名称，{Theme} 是主题名称，{Module} 是需要修改的 Magento 模块名称。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">示例代码：假设我们想修改产品列表页面的布局，我们需要在以下目录中查找 catalog_product_index.xml 文件：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">app/design/frontend/{Vendor}/{Theme}/Magento_Catalog/layout/catalog_product_index.xml<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">找到样式文件：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;"><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">在 Magento 2 <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">中，样式文件通常位于 app/design/frontend/{Vendor}/{Theme}/web/css <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">目录下，其中 {Vendor} <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">是主题开发者的名称，{Theme} <span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "PingFang SC";">是主题名称。

magento2中的应用和配置店面主题以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10904 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr>在 Magento 2 中，您可以通过以下步骤应用和配置商店主题：创建一个主题首先，您需要在 Magento 2 的主题目录中创建一个新的主题。主题目录位于 app/design/frontend 目录下。例如，如果您想创建一个名为 mytheme 的主题，您需要在 app/design/frontend 目录下创建一个名为 mytheme 的文件夹。在这个文件夹中，您可以创建一个名为 theme.xml 的文件，用于定义主题的名称、父级和其他属性。配置主题接下来，您需要在 Magento 2 的后台配置文件中将您的新主题设置为商店的默认主题。您可以通过以下步骤完成此操作：<ul style="border: 0px solid rgb(217, 217, 227); box-sizing: border-box; --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,0.5); --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 transparent; --tw-shadow:0 0 transparent; --tw-shadow-colored:0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; list-style-position: initial; list-style-image: initial; margin-top: 1.25em; margin-bottom: 1.25em; padding: 0px 0px 0px 1rem; display: flex; flex-direction: column; color: rgb(55, 65, 81); font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; white-space: pre-wrap; background-color: rgb(247, 247, 248);" class=" list-paddingleft-2"><li>登录 Magento 2 的后台。</li><li>转到“Stores” > “Configuration”。</li><li>在左侧菜单中，选择“General” > “Design”。</li><li>在“Design Theme”下拉菜单中选择您的新主题。</li><li>单击“Save Config”按钮保存更改。</li></ul>应用主题最后，您需要将您的新主题应用于商店。您可以通过以下步骤完成此操作：<ul style="border: 0px solid rgb(217, 217, 227); box-sizing: border-box; --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,0.5); --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 transparent; --tw-shadow:0 0 transparent; --tw-shadow-colored:0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; list-style-position: initial; list-style-image: initial; margin-top: 1.25em; margin-bottom: 1.25em; padding: 0px 0px 0px 1rem; display: flex; flex-direction: column; color: rgb(55, 65, 81); font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; white-space: pre-wrap; background-color: rgb(247, 247, 248);" class=" list-paddingleft-2"><li>转到“Content” > “Design” > “Configuration”。</li><li>选择您的商店。</li><li>在“Applied Theme”下拉菜单中选择您的新主题。</li><li>单击“Save Configuration”按钮保存更改。</li></ul>这样，您就已经成功应用和配置了您的商店主题。以下是一个简单的示例，展示了如何创建一个名为 mytheme 的 Magento 2 主题，并定义其父级为 Magento/blank：<ol style="border: 0px solid rgb(217, 217, 227); box-sizing: border-box; --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness:proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,0.5); --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 transparent; --tw-shadow:0 0 transparent; --tw-shadow-colored:0 0 transparent; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; list-style-position: initial; list-style-image: initial; margin-top: 1.25em; margin-bottom: 1.25em; padding: 0px 0px 0px 1rem; counter-reset: item 0; display: flex; flex-direction: column; color: rgb(55, 65, 81); font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; white-space: pre-wrap; background-color: rgb(247, 247, 248);" class=" list-paddingleft-2"><li>在 app/design/frontend 目录下创建一个名为 mytheme 的文件夹。</li><li>在 mytheme 文件夹中创建一个名为 theme.xml 的文件，并将以下内容添加到文件中：</li></ol><pre><?xml version="1.0"?> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">     <title>My Theme</title>     <parent>Magento/blank</parent> </theme></pre>在上面的示例中，parent 元素定义了 Magento/blank 主题作为 mytheme 主题的父级。配置主题在 Magento 2 的后台中，转到“Stores” > “Configuration” > “General” > “Design”，并在“Design Theme”下拉菜单中选择您的新主题 mytheme。应用主题在 Magento 2 的后台中，转到“Content” > “Design” > “Configuration”，选择您的商店，然后在“Applied Theme”下拉菜单中选择您的新主题 mytheme。

magento2中的创建店面主题以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
26212 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento2 中，可以通过以下步骤来创建店面主题以及代码示例：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/etc/modules 目录下创建一个名为 theme 的文件夹，并在其中创建一个名为 default 的文件夹，用于存放默认的店面主题。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/code/core 目录下创建一个名为 Mage 的文件夹，并在其中创建一个名为 default 的文件夹，用于存放默认的店面主题。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/code/core/Mage 文件夹中创建一个名为 default 的文件夹，并在其中创建一个名为 theme.xml 的文件，用于存放店面主题的配置文件。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/code/core/Mage 文件夹中创建一个名为 catalog_product_view.xml 的文件，用于存放店面主题的代码示例。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是一个示例的 theme.xml 文件：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">xml<pre class="brush:as3;toolbar:false"><?xml version="1.0"?>   <config>       <modules>           <Mage_Catalog_Model_Product>               <version>2.1.0</version>           </Mage_Catalog_Model_Product>       </modules>       <global>           <blocks>               <catalog_product_view>                   <rewrite>                       <product_view>{{block('catalog/product_view')}}</product_view>                   </rewrite>               </catalog_product_view>           </blocks>       </global>   </config></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的示例中，我们创建了一个名为 catalog_product_view 的 Block，并将其重写为 {{block('catalog/product_view')}}，以便在 catalog_product_view 模板中使用。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是一个示例的 catalog_product_view.xml 文件：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">xml<pre class="brush:as3;toolbar:false"><?xml version="1.0"?>   <page>       <columns>           <product_name>{{block('catalog/product_view')}}</product_name>           <product_price>{{block('catalog/product_view')}}</product_price>           <product_description>{{block('catalog/product_view')}}</product_description>       </columns>   </page></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的示例中，我们创建了一个名为 product_name 的 Column，并将其重写为 {{block('catalog/product_view')}}，以便在 catalog_product_view 模板中使用。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">以上就是在<span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; line-height: normal; font-family: "Helvetica Neue";"> Magento2 中创建店面主题以及代码示例的基本步骤。

magento2中的应用管理主题以及代码示例

Magento
magento, magento教程, magento二次开发, magento中文教程, php
10836 阅读

<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发》</a></h5> <div class="image-container"> <a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank"> <img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发"> </a> </div> <div class="text-container" style="font-size:14px; color:#888"> 本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。 </div> <hr><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 Magento2 中，可以通过以下步骤来创建应用管理主题以及代码示例：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/etc/modules 目录下创建一个名为 app_admin 的文件夹，并在其中创建一个名为 default 的文件夹，用于存放默认的应用管理主题。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/code/core 目录下创建一个名为 Mage 的文件夹，并在其中创建一个名为 default 的文件夹，用于存放默认的应用管理主题。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/code/core/Mage 文件夹中创建一个名为 adminhtml 的文件夹，并在其中创建一个名为 app_admin.xml 的文件，用于存放应用管理主题的配置文件。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在 app/code/core/Mage 文件夹中创建一个名为 catalog_product_view.xml 的文件，用于存放应用管理主题的代码示例。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以下是一个示例的 app_admin.xml 文件：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">xml<pre class="brush:as3;toolbar:false"><?xml version="1.0"?>   <config>       <modules>           <app_admin>               <version>2.1.0</version>           </app_admin>       </modules>       <global>           <blocks>               <app_admin>                   <rewrite>                       <adminhtml_index>{{block('adminhtml/index')}}</adminhtml_index>                       <adminhtml_store>{{block('adminhtml/store')}}</adminhtml_store>                       <adminhtml_catalog>{{block('adminhtml/catalog')}}</adminhtml_catalog>                       <adminhtml_customer>{{block('adminhtml/customer')}}</adminhtml_customer>                       <adminhtml_order>{{block('adminhtml/order')}}</adminhtml_order>                       <adminhtml_quote>{{block('adminhtml/quote')}}</adminhtml_quote>                       <adminhtml_payment>{{block('adminhtml/payment')}}</adminhtml_payment>                       <adminhtml_shipping>{{block('adminhtml/shipping')}}</adminhtml_shipping>                       <adminhtml_quote_address>{{block('adminhtml/quote_address')}}</adminhtml_quote_address>                       <adminhtml_quote_payment>{{block('adminhtml/quote_payment')}}</adminhtml_quote_payment>                       <adminhtml/customer_payment')}}</adminhtml_customer_payment>                     <adminhtml_customer_address_shipping>{{block('adminhtml/customer_address_shipping')}}</adminhtml_customer_address_shipping>                     </app_admin>                     <app_admin>                     --layout=default                     </app_admin></pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">以上是一个简单的应用管理主题的配置文件示例，你可以根据需要进行修改和扩展。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">