magento2 二次开发如何自定义theme

news2024/12/24 8:16:24

1.在app\design\frontend下创建自定义Theme文件夹，格式为Vendor/ThemeName，比如TestCompany/test
2.在TestCompany/test目录下创建文件夹和文件如下：
在这里插入图片描述

etc

非必须创建
在此目录下添加view.xml，内容如下：
view.xml可定义一些图片大小

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>
            <image id="category_page_list" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>
            <image id="product_base_image" type="image">
                <width>1000</width>
                <height>1000</height>
            </image>

            <image id="product_page_image_medium" type="image">
                <width>1000</width>
                <height>1000</height>
            </image>

            <image id="new_products_content_widget_grid" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>

            <image id="related_products_list" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>

            <image id="upsell_products_list" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>

            <image id="cart_cross_sell_products" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>

            <image id="wishlist_sidebar_block" type="thumbnail">
                <width>150</width>
                <height>150</height>
            </image>
            <image id="wishlist_small_image" type="small_image">
                <width>150</width>
                <height>150</height>
            </image>
            <image id="wishlist_thumbnail" type="small_image">
                <width>400</width>
                <height>400</height>
            </image>
        </images>
    </media>
</view>

media

可以放比如theme预览图片，非必须

web

内部可定义自己的模版文件，css，js等等
web目录结构如下：
css/source目录下自定义的css都可以放到_extend.less 使用@import ‘global/xxx/xxx’;来导入生效
在这里插入图片描述

registration.php

内容如下：

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/TestCompany/test', __DIR__);

theme.xml

内容如下

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Test Company</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Magento Theme：

default.xml
定义页面container布局，可引入templates/html目录下自定义模版文件
内容如下
自定义模版文件可以访问web/images中图片，路径访问地址可以定义为

<img src="<?php echo $block->getViewFileUrl('images/xxx.gif'); ?>" />

在这里插入图片描述
default.xml文件示例

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Header -->
        定义logo，引入内置logo block
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_width" xsi:type="number">800</argument>
                <argument name="logo_height" xsi:type="number">75</argument>
                <argument name="logo_file" xsi:type="string">images/logo.gif</argument>
            </arguments>
        </referenceBlock>
		**引入Magento_Theme文件夹下的自定义模版文件**
        <referenceContainer name="content">
            <container name="custom-content" label="Content" htmlTag="div" htmlClass="row">
                <container name="right.column" label="Column" htmlTag="div">
                    <block class="Magento\Framework\View\Element\Template" name="custom_block_right" template="Magento_Theme::html/custom_test.phtml" />
                </container>
            </container>
        </referenceContainer>
		**删除一些不需要的内置block**
        <!-- Header - Remove Blocks -->
        <referenceBlock name="header.panel.wrapper" remove="true"/>
        <referenceBlock name="wish-list-link" remove="true" />
        <referenceBlock name="catalog.compare.link" remove="true"/>
        <referenceBlock name="minicart" remove="true"/>
        <referenceBlock name="top.search" remove="true"/>
        <referenceBlock name="cms_page" remove="true" />
        <referenceBlock name="navigation.sections" remove="true" />
        <!--  Footer  -->
        <referenceContainer name="footer">
            <block class="Magento\Cms\Block\Block" name="footer-block" after="-">
                <arguments>
                    <argument name="block_id" xsi:type="string">footer</argument>
                </arguments>
            </block>
        </referenceContainer>

        <!-- Footer - Remove Blocks -->
        <referenceBlock name="report.bugs" remove="true"/>
        <referenceBlock name="footer_links" remove="true"/>
        <referenceBlock name="store_switcher" remove="true"/>
        <referenceBlock name="copyright" remove="true"/>
        <referenceBlock name="form.subscribe" remove="true"/>
        <referenceBlock name="store.links" remove="true"/>
    </body>
</page>