Magento 2的主题定制

2024/1/6 上午11:41

发布者: 360Magento

Magento 2是一款强大的电子商务平台，提供了丰富的主题定制功能，使您能够创建独特而引人注目的在线商店外观。本文将介绍Magento 2主题定制的基本概念和步骤，以及如何利用它来实现个性化的品牌形象。

Magento2 XML中的属性说明

2024/1/7 下午3:49

发布者: 360Magento

带模板的自定义块

<block class="Magento\Framework\View\Element\Template" name="my_block" template="Vendor_Module::my-template.phtml" /> ( after="-" or before="-" )
<block class="Magento\Framework\View\Element\Template" name="footer_logo_brands" template="Magento_Theme::html/brand-logos.phtml" after="footer_links"/>

具有配置条件的块

<block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe" as="subscribe" before="-" template="Magento_Newsletter::subscribe.phtml" ifconfig="newsletter/general/active"/>

容器内的块

<container name="some.block.wrapper" htmlTag="div" htmlClass="container">
      // block here
</container>

从 XML 调用静态块

<referenceContainer name="footer-container">
            <block class="Magento\Cms\Block\Block" name="promo" before="-">
                <arguments>
                    <argument name="block_id" xsi:type="string">promo</argument>
                </arguments>
            </block>
</referenceContainer>

在xml中设置模板的两种方法

<referenceBlock name="page.main.title" template="Vendor_Module::path/to/template.phtml"/>`

<referenceBlock name="page.main.title">
	<arguments>
		<argument name="template" xsi:type="string">Vendor_Module::path/to/template.phtml</argument>
	</arguments>
</referenceBlock>

在xml中设置模板布局（例如catalog_category_view.xml中的“2columns-left”）

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        ...
    </body>
</page>

将自定义链接添加到top.links（客户下拉列表）

<referenceBlock name="top.links">
    <block class="Magento\Framework\View\Element\Html\Link" name="acount-create-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Create an Account</argument>
            <argument name="path" xsi:type="string">customer/account/create</argument>
            <argument name="sortOrder" xsi:type="number">100</argument>
        </arguments>
    </block>
</referenceBlock>

包括静态资源（JavaScript、CSS、字体）

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <!-- Add local styles resources -->
    <css src="css/my-styles.css" />
    <css src="<Namespace>_<Module>::css/custom-styles.css" />

    <!-- The following two ways to add local JavaScript files are equal -->
    <script src="Magento_Catalog::js/sample1.js" />
    <script src="Magento_Catalog/js/sample1.js" />

    <!-- Magento support async or defer attribute in script tag -->
    <script async="" src="Magento_Catalog::js/sample1.js" />
    <script defer="" src="Magento_Catalog::js/sample1.js" />

    <link src="js/sample.js" />
    <link src="sample.js" />

    <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
    <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
  </head>
</page>

删除静态资源（JavaScript、CSS、字体）

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
    <!-- Remove local styles resources -->
    <remove src="css/styles-m.css" />
    <remove src="<Namespace>_<ModuleName>::css/styles.css" />

    <!-- Remove js resources -->
    <remove src="my-js.js" />
    <remove src="Magento_Catalog::js/sample1.js" />

    <!-- Remove external resources -->
    <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
    <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" />
    <remove src="http://fonts.googleapis.com/css?family=Montserrat" />
   </head>
</page>

将元标记添加到头块

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
    <!-- This will create a tag like '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">' -->
    <meta name="x_ua_compatible" content="IE=edge,chrome=1"/>
    <!-- This will create a tag like '<meta property="og:type" content="article"/>'' -->
    <meta name="og:type" content="article"/>
    <!-- This will create a tag like '<meta charset="UTF-8">' -->
    <meta name="charset" content="UTF-8"/>
    <!-- This will create a tag like '<meta http-equiv="Content-Type" content="content-type-value"/>' -->
    <meta name="content_type" content="content-type-value"/>
    <!-- This tag will not render (see \Magento\Framework\View\Page\Config\Renderer for details) -->
    <meta name="media_type" content="any-value"/>
    <!-- This will create a tag like '<meta name="my_custom_type" content="my_custom_value"/>' -->
    <meta name="my_custom_type" content="my_custom_value"/>
   </head>
</page>

设置身体属性

<body>
     <attribute name="class" value="my-new-body-class"/>
</body>

设置自定义页面标题

<referenceBlock name="page.main.title">
     <action method="setPageTitle">
          <argument translate="true" name="title" xsi:type="string">My title</argument>
     </action>
</referenceBlock>