<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </div> <hr><p>在 Magento 2 中,电子邮件模板布局是指为电子邮件创建的 HTML 布局和样式。电子邮件模板布局由多个子组件组成,例如标题、正文、页脚等。以下是 Magento 2 中电子邮件模板布局的一些要点:</p><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><p>Magento 2 使用 LESS 和 CSS 来定义电子邮件模板布局的样式。</p></li><li><p>您可以在 Magento 2 主题中创建自定义的电子邮件模板布局。这些布局通常位于 app/design/frontend/{Vendor}/{theme}/Magento_Email/email 目录下。</p></li><li><p>Magento 2 中电子邮件模板布局可以使用类似于 Magento 2 主题的层次结构。例如,您可以在 app/design/frontend/{Vendor}/{theme}/Magento_Email/email/header.html 中定义电子邮件头部,然后在 app/design/frontend/{Vendor}/{theme}/Magento_Email/email/header.phtml 中定义电子邮件头部的内容。</p></li><li><p>在电子邮件模板布局中,您可以使用模板变量来添加动态内容,例如订单信息或客户信息。这些模板变量可以通过电子邮件模板或代码动态设置。</p></li><li><p>Magento 2 还提供了许多默认的电子邮件模板布局,例如账户创建确认电子邮件、密码重置电子邮件等。您可以在 vendor/magento/module-email/view/frontend/email 目录下找到这些默认的电子邮件模板布局。</p></li></ol><p>在 Magento 2 中,电子邮件模板布局是为电子邮件创建的 HTML 布局和样式。您可以在 Magento 2 主题中创建自定义的电子邮件模板布局,并使用模板变量添加动态内容。Magento 2 还提供了许多默认的电子邮件模板布局,您可以根据需要使用这些布局。</p><p><br/></p>
文章列表
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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 中,可以使用电子邮件模板来定义发送给客户的电子邮件的格式和内容。电子邮件模板通常包含 HTML 和文本版本,以便适应不同的电子邮件客户端和用户偏好。下面是一个简单的 Magento 2 电子邮件模板的代码示例:</p><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;"><br/></p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/code/Custom/Module/view/frontend/email/template.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Custom Email</title> </head> <body> <p>Dear {{var customer.name}},</p> <p>Thank you for your recent purchase. Your order number is {{var order.increment_id}}.</p> <p>Here are the details of your order:</p> <table> <thead> <tr> <th>Product</th> <th>Price</th> <th>Qty</th> <th>Subtotal</th> </tr> </thead> <tbody> {{layout handle="sales_email_order_items" order=$order}} </tbody> <tfoot> <tr> <td colspan="3">Subtotal</td> <td>{{var order.subtotal|formatPrice}}</td> </tr> <tr> <td colspan="3">Shipping & Handling</td> <td>{{var order.shipping_amount|formatPrice}}</td> </tr> <tr> <td colspan="3">Tax</td> <td>{{var order.tax_amount|formatPrice}}</td> </tr> <tr> <td colspan="3">Grand Total</td> <td>{{var order.grand_total|formatPrice}}</td> </tr> </tfoot> </table> <p>Thank you for your business!</p> </body> </html></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;">在上述代码中,使用双括号 {{...}} 的方式插入变量,例如 {{var customer.name}} 和 {{var order.increment_id}},这些变量将在发送电子邮件时自动替换为实际的值。同时,使用 {{layout ...}} 标签可以引用布局文件中定义的块,例如 sales_email_order_items 块用于显示订单中的商品列表。</p><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;"><br/></p><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";">需要注意的是,在</span> 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";">中,电子邮件模板位于主题文件夹的</span> Magento_Email <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";">模块中,可以在自定义模块中创建自己的电子邮件模板,例如上述代码示例中的</span> Custom/Module/view/frontend/email/template.html <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";">文件。可以在</span> 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";">的代码中使用</span> Magento\Framework\Mail\Template\TransportBuilder <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";">类来构建电子邮件并发送。</span></p><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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 中,模板是用于渲染页面内容的文件。模板通常包含 HTML、CSS 和 JavaScript 代码,以及一些用于呈现数据的变量和标记。Magento 2 使用了一种基于块(block)和布局(layout)的模板系统,通过在布局文件中定义块的位置和模板文件的使用来组织页面结构和内容。下面是一些 Magento 2 模板的基本概念和代码示例:</p><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;"><br/></p><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;">模板文件(Template file)</p><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;">模板文件是包含呈现页面内容的 HTML、CSS 和 JavaScript 代码的文件。在 Magento 2 中,模板文件通常存储在主题文件夹的 Magento_Theme 模块中,例如 app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/mytemplate.phtml。下面是一个简单的 Magento 2 模板文件的代码示例:</p><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;"><br/></p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/mytemplate.phtml --> <div class="myclass"> <h1>Welcome to My Store</h1> <p>Thank you for visiting our website.</p> <ul> <?php foreach ($products as $product): ?> <li><?= $product->getName() ?></li> <?php endforeach; ?> </ul> </div></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;">在上述代码中,使用 PHP 的 foreach 循环来遍历 $products 数组中的每个产品,并使用 $product->getName() 方法输出产品的名称。</p><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;"><br/></p><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;">块(Block)</p><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><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;"><br/></p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/code/MyVendor/MyModule/view/frontend/layout/default.xml --> <referenceContainer name="content"> <block class="MyVendor\MyModule\Block\MyBlock" name="myblock" template="MyVendor_MyModule::mytemplate.phtml"> <arguments> <argument name="products" xsi:type="array"> <item name="1" xsi:type="object">Magento\Catalog\Model\Product</item> <item name="2" xsi:type="object">Magento\Catalog\Model\Product</item> <item name="3" xsi:type="object">Magento\Catalog\Model\Product</item> </argument> </arguments> </block> </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;"><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";">在上述代码中,使用布局文件的</span> <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";">标记来引用页面的</span> content <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";">容器,然后使用</span> <block> <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";">标记来定义名为</span> myblock <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";">的块,并将其与</span> MyVendor\MyModule\Block\MyBlock <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";">类和</span> MyVendor_MyModule::mytemplate.phtml <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";">模板文件相关联。通过</span> <arguments> <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";">标记可以向模板传递数据,例如将</span> $products <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";">数组传递给模板以便在页面中显示。</span></p><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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 中,可以使用布局覆盖(layout override)来修改已有的布局文件,以实现自定义布局或页面结构。布局覆盖可以在主题或模块的布局文件中进行定义,并通过添加一个新的布局文件来覆盖现有的布局。下面是一些 Magento 2 布局覆盖的基本概念和代码示例:</p><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;"><br/></p><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;">布局覆盖(Layout override)</p><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/MyVendor/mytheme/Magento_Theme 主题或 app/code/MyVendor/MyModule/view/frontend/layout 模块的布局文件夹中。下面是一个简单的 Magento 2 布局覆盖的代码示例:</p><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;"><br/></p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/catalog_category_view.xml --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="category.products.list"> <arguments> <argument name="template" xsi:type="string">MyVendor_MyModule::product/list.phtml</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;">在上述代码中,使用布局文件的 <page> 和 <body> 标记来定义布局覆盖的页面和主体部分,然后使用 <referenceBlock> 标记来引用页面中的 category.products.list 块,并将其与自定义模板文件 MyVendor_MyModule::product/list.phtml 相关联。</p><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;"><br/></p><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;">布局合并(Layout merging)</p><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 处理一个页面请求时,它会自动合并所有与请求相关的布局文件,并使用最终的布局文件来生成页面内容。布局合并可以在主题、模块和 Magento 2 系统文件中进行定义,以实现不同层级的布局结构和重用性。下面是一个简单的 Magento 2 布局合并的代码示例:</p><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;"><br/></p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/code/MyVendor/MyModule/view/frontend/layout/default.xml --> <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"> <block class="MyVendor\MyModule\Block\MyBlock" name="myblock" template="MyVendor_MyModule::mytemplate.phtml" /> </referenceContainer> </body> </page></pre><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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 中,可以使用扩展布局来修改主题或模块的现有布局文件,以添加、删除或修改页面上的块或容器。扩展布局可以在主题或模块的布局文件中进行定义,并通过添加或修改现有的 XML 元素来实现。下面是一些 Magento 2 扩展布局的基本概念和代码示例:</p><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;"><br/></p><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;">块扩展(Block extension)</p><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 元素来实现的。块是 Magento 2 中的一个重要概念,它代表了页面上的一个具体元素,例如导航栏、产品列表或购物车。块的 XML 元素通常使用 <block> 标记来定义,并可以使用不同的属性来指定块的类、名称、模板和其他选项。下面是一个简单的 Magento 2 块扩展的代码示例:</p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/catalog_category_view.xml --> <referenceBlock name="category.products.list"> <action method="setTemplate"> <argument name="template" xsi:type="string">MyVendor_MyModule::product/list.phtml</argument> </action> </referenceBlock></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> 标记来引用页面中的 category.products.list 块,并使用 <action> 标记和 method="setTemplate" 属性来修改块的模板文件为 MyVendor_MyModule::product/list.phtml。</p><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;"><br/></p><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;">容器扩展(Container extension)</p><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 元素来实现的。容器是 Magento 2 中的另一个重要概念,它代表了页面上的一个逻辑区域,例如页面头部、内容区域或页脚。容器的 XML 元素通常使用 <container> 标记来定义,并可以使用不同的属性来指定容器的名称、标识符和其他选项。下面是一个简单的 Magento 2 容器扩展的代码示例:</p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/catalog_category_view.xml --> <referenceContainer name="content"> <container name="my.container" as="myContainer" label="My Container" htmlTag="div" htmlClass="my-container" before="-"> <block class="MyVendor\MyModule\Block\MyBlock" name="myblock" template="MyVendor_MyModule::mytemplate.phtml" /> </container> </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;"><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";">在上述代码中,使用</span> <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";">标记来引用页面中的</span> content <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";">容器,并使用</span> <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";">标记来定义一个新的容器</span> my.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";">,其中包含自定义块</span> MyVendor\MyModule\Block\MyBlock <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";">和模板文件</span> MyVendor_MyModule::mytemplate.phtml<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";">。容器的</span> as <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";">属性指定了容器的别名</span></p><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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 中,可以通过创建新布局文件来自定义页面的布局和结构。新布局文件可以在主题或模块中进行定义,并使用 XML 元素来指定页面上的块、容器和其他元素。下面是一些 Magento 2 创建新布局的基本概念和代码示例:</p><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;"><br/></p><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><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/MyVendor/mytheme/Magento_Catalog/layout/ 目录下,并使用 .xml 文件扩展名。布局文件的名称通常基于其作用,例如 default.xml 用于定义页面的默认布局。</p><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;"><br/></p><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><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;">在布局文件中,可以使用 <page> 标记来指定页面的布局和结构。<page> 标记可以使用多种属性来指定页面的标识符、标题、处理程序和其他选项。下面是一个简单的 Magento 2 页面布局的代码示例:</p><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;"><br/></p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/default.xml --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>My Page Title</title> </head> <body> <referenceContainer name="content"> <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" template="Magento_Catalog::product/list.phtml"> <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers"> <block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderer.default" as="default"/> </block> </block> </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;"><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";">在上述代码中,使用</span> <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";">标记来指定页面的布局和结构。在页面的</span> <head> <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";">元素中,指定页面的标题为</span> My Page 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";">。在页面的</span> <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";">元素中,使用</span> <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";">标记引用页面中的</span> content <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";">容器,并使用</span> <block> <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";">标记和其他</span> XML <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";">元素来定义块和容器。在此示例中,定义了一个名为</span> category.products.list <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";">的产品列表块,并包含了一个名为</span> category.product.type.details.renderer.default <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";">的渲染器块。</span></p><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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><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;"><br/></p><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><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/MyVendor/mytheme/Magento_Catalog/layout/ 目录下,并使用 .xml 文件扩展名。布局文件的名称通常基于其作用,例如 catalog_product_view.xml 用于定义产品页面的布局。</p><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;"><br/></p><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><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> 标记来指定页面上的块和其他元素。<referenceBlock> 标记可以使用多种属性来指定块的名称、模板、类和其他选项。下面是一个简单的 Magento 2 产品页面布局的代码示例:</p><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;"><br/></p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/catalog_product_view.xml --> <referenceBlock name="product.info.price"> <arguments> <argument name="template" xsi:type="string">Magento_Catalog::product/price.phtml</argument> </arguments> </referenceBlock> <referenceBlock name="product.info.media.image"> <arguments> <argument name="template" xsi:type="string">Magento_Catalog::product/view/gallery.phtml</argument> </arguments> </referenceBlock> <referenceContainer name="product.info.main"> <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info"> <arguments> <argument name="at_call" xsi:type="string">getDescription</argument> <argument name="at_code" xsi:type="string">description</argument> <argument name="css_class" xsi:type="string">description</argument> <argument name="at_label" xsi:type="string">none</argument> <argument name="title" translate="true" xsi:type="string">Description</argument> </arguments> </block> </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;">在上述代码中,使用 <referenceBlock> 标记来指定产品页面上的块。在第一个 <referenceBlock> 元素中,将 product.info.price 块的模板更改为 Magento_Catalog::product/price.phtml。在第二个 <referenceBlock> 元素中,将 product.info.media.image 块的模板更改为 Magento_Catalog::product/view/gallery.phtml。在 <referenceContainer> 元素中,定义了一个名为 product.info.description 的产品描述块。</p><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;"><br/></p><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><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";"> <update> </span>标记来引用其他布局文件,并将它们的内容合并到当前布局文件中。</p><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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><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;"><br/></p><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><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 文件的代码示例:</p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml --> <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";">在上述代码中,使用</span> <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";">标记定义页面的基本结构和属性。在</span> <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";">标记中,使用</span> <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";">和</span> <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";">标记来指定页面上的块和容器。例如,在第一个</span> <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";">元素中,定义了一个名为</span> 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";">的块,并将其添加到</span> 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";">块中。在第一个</span> <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";">元素中,定义了三个块:</span>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";">、</span>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";">和</span> 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";">。</span></p><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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><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;"><br/></p><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><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><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;"><br/></p><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><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;"><br/></p><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><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><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><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><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><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><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><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><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><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><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 产品布局文件的代码示例,其中包含一个视频块:</p><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/layout/catalog_product_view.xml --> <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><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><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><pre class="brush:as3;toolbar:false"><!-- File: app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/view/video.phtml --> <?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><p><br/></p>
<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"> <p> <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> </p> </div> <div class="text-container" style="font-size:14px; color:#888"> <p>本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p> </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><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;"><br/></p><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><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><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><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><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;"><br/></p><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><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><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;"><br/></p><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><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><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><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><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;"><br/></p><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><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><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><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><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;"><br/></p><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><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 的标记,用于定义主题的布局。您可以使用类似于以下代码的代码来更改布局:</p><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><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;"><br/></p><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><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><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;"><br/></p><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><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><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><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><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;"><br/></p><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><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 </span>像素。</p><p><br/></p>