第005篇主题 - 04 创建后台管理主题

2024-02-11 23:15:40

专题内容

本专题讨论如何为Magent后台管理自定义主题。详情可以参考自定义前端主题流程。

前提准备

设置Magento为developer模式。这种应用模式会影响Magento静态文件缓存。

概览

参考以下步骤创建后台管理主题：

创建主题目录
添加theme.xml声明
添加registration.php
修改composer.json
修改主题logo

创建主题目录

在app/design/adminhtml目录创建<Vendor>/<admin_theme>目录

添加theme.xml声明

在主题目录添加theme.xml声明。theme.xml至少包含主题名称和父主题名称(如果主题来自于继承)。我们推荐继承自Magento默认后台主题：Magento/backend。

创建或复制一个已存在的theme.xml到app/design/adminhtml/<Vendor>/<admin_theme>中。

基于下面的配置模板配置(将占位符替换为主题信息)

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>%Theme title%</title> <!-- your theme's name -->
     <parent>%vendor_dir%/%parent_theme_dir%</parent> <!-- the parent theme. Example: Magento/backend -->
</theme>

如果修改已注册主题的theme.xml中的主题名称或父主题信息，需要通过刷新任意后台管理页面，将改动保存到数据库中。

添加`registration.php`

在主题目录添加registration.php，添加如下代码，并调换其中的占位符

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/%vendor_dir/your_theme_dir%', __DIR__); // Example: 'adminhtml/Magento/backend'

配置composer.json

详情参考基于composer创建主题

后台管理Logo(可选)

Magento/backend主题的默认logo为lib/web/images/magento-log.svg>。你可以在自己的主题目录创建二级目录web/images并添加magento-logo.svg文件。如果想使用其他名字或者格式的Logo，需要主题logo定义文件中添加声明。

参考以下步骤创建后台管理Logo：

创建XML文件：app/design/adminhtml/<Vendor>/<Theme>/Magento_Backend/layout/admin_logo.xml

添加以下实例代码：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-login" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_image_src" xsi:type="string">images/custom-logo.svg</argument>
                <argument name="logo_width" xsi:type="number">150</argument> <!-- Add custom logo width -->
                <argument name="logo_height" xsi:type="number">80</argument> <!-- Add custom logo height -->
            </arguments>
        </referenceBlock>
    </body>
 </page>

添加自定义的logo到app/design/adminhtml/<Vendor>/<theme>/web/images/目录

主题注册

只要打开或刷新添加了主题文件的Magento后台管理页面，主题就会自动注册并添加到数据库中。

应用后台管理主题

详情查看应用自定义后台管理专题

码农公寓