magento2 二次开发如何自定义theme

1.在app\design\frontend下创建自定义Theme文件夹,格式为Vendor/ThemeName,比如TestCompany/test
2.在TestCompany/test目录下创建文件夹和文件如下:
magento2 二次开发如何自定义theme_第1张图片

etc

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



<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>400width>
                <height>400height>
            image>
            <image id="category_page_list" type="small_image">
                <width>400width>
                <height>400height>
            image>
            <image id="product_base_image" type="image">
                <width>1000width>
                <height>1000height>
            image>

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

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

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

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

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

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

media

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

web

内部可定义自己的模版文件,css,js等等
web目录结构如下:
css/source目录下自定义的css都可以放到_extend.less 使用@import ‘global/xxx/xxx’;来导入生效
magento2 二次开发如何自定义theme_第2张图片

registration.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

内容如下


<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Test Companytitle>
    <parent>Magento/lumaparent>
    <media>
        <preview_image>media/preview.jpgpreview_image>
    media>
theme>

Magento Theme:

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

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

magento2 二次开发如何自定义theme_第3张图片
default.xml文件示例


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        
        定义logo,引入内置logo block
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_width" xsi:type="number">800argument>
                <argument name="logo_height" xsi:type="number">75argument>
                <argument name="logo_file" xsi:type="string">images/logo.gifargument>
            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**
        
        <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" />
        
        <referenceContainer name="footer">
            <block class="Magento\Cms\Block\Block" name="footer-block" after="-">
                <arguments>
                    <argument name="block_id" xsi:type="string">footerargument>
                arguments>
            block>
        referenceContainer>

        
        <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>

执行
php bin/magento cache:clean
php bin/magento setup:static-content:deploy -f
使自定义theme生效

你可能感兴趣的:(magento)