magento2 二次开发如何自定义theme

news2024/11/23 16:46:17

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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/748925.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Occupy the Cities - 思维+二分

分析&#xff1a; 分析每一个0的位置&#xff0c;记录每一个0距离两侧的1的最近距离&#xff0c;每一个1要么向左扩展要么向右扩展&#xff0c;可以将扩展过的1标记&#xff0c;如果需要向另一侧扩展&#xff0c;那么必须满足距离另一侧的0的距离加1小于等于时间&#xff0c;比…

网络安全行业的那些岗位

网络安全行业&#xff0c;正在蓬勃发展&#xff0c;想要找网络安全岗位的&#xff0c;可以参考这篇文章 一、网络安全岗位 1、需要网络安全人员的企业 有三种企业招聘网络安全人员&#xff1a;乙方企业、甲方企业、国有企业 乙方企业是专门从事网络安全行业的企业&#xff0c…

用Arthas快速定位线上JVM问题!

Arthas分析FullGC问题定位 对于FullGC那一定不会陌生,一般来说会采用横切FullGC前置拦截(-XX:+HeapDumpBeforeFullGC)和后置拦截(-XX:+HeapDumpAfterFullGC),导出FullGC发生前后的heap dump文件,以便于我们进行FullGC原因的分析和定位。 推测分析问题之FullGC的频率过高…

SpringBoot2+Vue2实战(十八)修改密码

一、修改密码&#xff1a; Header.vue <el-dropdown-item style"font-size: 14px; padding: 5px 0"><router-link to"/password" style"text-decoration: none">修改密码</router-link></el-dropdown-item> router/i…

tensorrt8.5.2安装,并解决CMAKE找不到tensorrt问题

ubuntu20.04、cuda11.1、cudnn8.0.5&#xff08;后续要更新到8.6.0&#xff09; tensorrt下载网址&#xff1a;NVIDIA TensorRT 8.x Download | NVIDIA Developer 选择自己合适的cuda安装 下载的时候可以使用wget wget https://developer.download.nvidia.com/compute/machin…

【springboot】RestTemplate序列化RedisSerializer到底该选哪个

RedisTemplate是Spring Data Redis提供给用户的最高级的抽象客户端&#xff0c;用户可直接通过RedisTemplate对Redis进行多种操作。 在项目中使用需要引入如下依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>…

ScrollRect滚动区域Content列表项数据钳制取值问题

问题 如下图示例&#xff0c;是一个选择日期、时间的日历控件&#xff0c;右侧小时与分钟的部分是两个Scroll Rect滚动区域组件&#xff0c;滚动到中间高亮部分表示选择&#xff0c;那么如何让滚动停止在合适的位置&#xff1f;避免出现如图所示的停在两个数据项中间的情况。 …

Slam十四讲之第一讲和第二讲,实践编程基础

目录 1.镜像寻找①方法1&#xff1a;百度网盘下载②方法2&#xff1a;在开源镜像网站上下载&#xff0c;③方法3&#xff1a;直接在Ubuntu官网下载 2 在VMware中创建虚拟机并安装Ubuntu18.043 安装VMware Tools4 初始系统中&#xff0c;部分软件的安装4.1 gcc 安装4.2 g安装4.3…

Word 插件实现读取excel自动填写

日常工作中碰到需要将EXCEL的对应数据记录填写到word文档对应的位置&#xff0c;人工操作的方式是&#xff1a; 打开exel表—>查找对应报告号的行—>逐列复制excel表列单元格内容到WORD对应的位置&#xff08;如下图标注所示&#xff09; 这种方法耗时且容易出错。实际上…

vcomp140.dll丢失怎样修复?多种方法教你修复

vcomp140.dll丢失算是一个比较常见的异常事件&#xff0c;在使用电脑的时候&#xff0c;有时候弹窗出现由于找不到vcomp140.dll&#xff0c;无法继续执行代码等&#xff0c;这种都是属于vcomp140.dll文件丢失&#xff0c;今天我们主要针对这个情况来给大家说说vcomp140.dll丢失…

自动化测试工具大盘点

本系列文章我们将带大家一起了解一下互联网大厂中通科技的自动化测试平台的搭建历程&#xff0c;从以下四个方面展开介绍&#xff1a;为什么要做这样一个统一的自动化测试平台&#xff1f;是如何做到统一的&#xff1f;平台上线后的收益&#xff0c;最后一部分会给大家分享一下…

CSDN 周赛 62 期

CSDN 周赛 62 期 参赛体验选择题1234编程题1、题目名称:覆盖面积2、题目名称:机器猫参赛体验 这次没有出填空题,好评。 选择题四个,基本上,对数据库比较熟悉的人,应该都可以全部答对的。 编程题两个,嗯。。。。就是上周偷偷摸摸更新出来的四个题目之二。还以为不会出…

levelx norFlash

levelx 文章目录 OverviewQuoteBriefDefinitionTheory 实现原理1.初始化流程2.写操作3.读操作4.回收函数 Overview 实现了flash的均衡摩擦&#xff0c;有针对nor 和 nand的接口 配合azure RTOS 以及xfile比较合适&#xff0c;单独使用不是很友好 Quote https://learn.micro…

C# Sdcb.Paddle2Onnx Paddle模型通过C#转换为ONNX模型

https://github.com/sdcb/PaddleSharp/blob/feature/2.5/docs/paddle2onnx.md 效果 项目 代码 using Sdcb.Paddle2Onnx; using System; using System.Collections; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing…

相对绝对定位父元素不设置宽度,根据子元素撑开(white-space: nowrap;)

要做一个如下的弹窗&#xff0c;很简单。但是当要切换成多语言或者数据是动态的话&#xff08;title可能会很长&#xff09;&#xff0c;那么弹窗固定宽度就不适用了。 有可能会出现下图的情况 也有可能出现下面的情况&#xff0c;文字被换行了&#xff08;有时候这种情况也是…

每日一练 | 华为认证真题练习Day77

1、如下图所示&#xff0c;主机A和主机B使用哪种网络设备可以实现通信&#xff1f; A. 路由器 B. 集线器 C. HUB D. 二层交换机 2、路由器输出信息如下&#xff0c;下列说法错误的是&#xff1f; A. Ethernet0/0/0接口的MTU值为1480 B. Ethernet0/0/0接口物理链路正常 C.…

5分钟体验墨迹天气API设计与调试,来看看你关心的城市天气吧~

1 准备工作 请务必完成华为云账号注册和实名认证&#xff0c;否则无法进行实操实验。 Step 1 >>>点我立即注册华为云账号<<< Step 2 >>>点我完成实名认证<<< 1.1 登录访问API Arts主页 1、点击访问API Arts主页&#xff0c;点击“申请…

项目管理工具大比拼:全方位评估各家优势

在现代企业中&#xff0c;项目管理已经成为了一个不可或缺的部分。而具有高效、易用、多样化功能的项目管理软件能够帮助企业更好地管理项目和任务&#xff0c;并提高团队生产力和效率。因此&#xff0c;在选择适合的项目管理软件时&#xff0c;需要对不同软件进行全方位比较和…

〖码银送书第三期〗《Python机器学习:基于PyTorch和Scikit-Learn》

前言 近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从AlexNet模型在2012年ImageNet大赛被提出以来&#xff0c;机器学习和深度学习迅猛发展&#xf…

1. HTML5的新特性

HTML5的新增特性主要是针对于以前的不足, 增了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是IE9以上版本的浏览器才支持, 如果不考虑兼容性问题,可以大量使用这些新特性。 1.1 HTML5 新增的语义化标签 ●<header> : 头部标签 ●<nav&…