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

专题内容

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

前提准备

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

概览

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

  1. 创建主题目录
  2. 添加theme.xml声明
  3. 添加registration.php
  4. 修改composer.json
  5. 修改主题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:

  1. 创建XML文件:app/design/adminhtml/<Vendor>/<Theme>/Magento_Backend/layout/admin_logo.xml
  2. 添加以下实例代码:

    <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>
  3. 添加自定义的logo到app/design/adminhtml/<Vendor>/<theme>/web/images/目录

主题注册

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

应用后台管理主题

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

 

上一篇:R绘图体系ggplot2 基础篇: 主题选择


下一篇:2021-03-29