Magento2 自定义后台菜单

今天分享Magento 2开发中一个简单的后台菜单实现过程

后台菜单创建的主要步骤

步骤1：创建menu.xml文件
步骤2：编写菜单定义
步骤3：更新Magento缓存

步骤1：创建menu.xml文件

创建一个名为admin菜单文件：menu.xml文件的文件

app/code/Mageplaza/HelloWorld/etc/adminhtml/menu.xml

添加简单节点：

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
    </menu>
</config>

第2步：添加菜单项

我们添加一个HelloWorld模块此过程省略，因为前面有大神写过很多了
然后我们在menu.xml添加我们的内容

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
       <add id="Mageplaza_HelloWorld::helloworld" title="Hello World" module="Mageplaza_HelloWorld" sortOrder="51" resource="Mageplaza_HelloWorld::helloworld"/>
       <add id="Mageplaza_HelloWorld::post" title="Posts" module="Mageplaza_HelloWorld" sortOrder="10" action="mageplaza_helloworld/post" resource="Mageplaza_HelloWorld::post" parent="Mageplaza_HelloWorld::helloworld"/>
       <add id="Mageplaza_HelloWorld::hello_configuration" title="Configuration" module="Mageplaza_HelloWorld" sortOrder="99" parent="Mageplaza_HelloWorld::helloworld" action="adminhtml/system_config/edit/section/helloworld" resource="Mageplaza_HelloWorld::helloworld_configuration"/>
    </menu>
</config>

上面是第一个add为主菜单
后面的add为子菜单主要区分是因为后面加了parent这个属性说明
在这个例子中，我们将创建一个0级菜单命名的“Hello World”和两个子菜单命名为“管理项目”和“配置”。该menu.xml文件文件将定义“添加”笔记的集合，将一个菜单项添加到Magento的后端。我们将看到它的结构：

<add id="Mageplaza_HelloWorld::post" title="Posts" module="Mageplaza_HelloWorld" sortOrder="10" action="mageplaza_helloworld/post" resource="Mageplaza_HelloWorld::post" parent="Mageplaza_HelloWorld::helloworld"/>

让我们解释一些属性：
该id属性是本说明的标识符。这是一个唯一的字符串，应遵循以下格式：
{Vendor_ModuleName}::{menu_description} 。
该title属性是将在菜单栏上显示的文字。
的module属性被定义此菜单是属于该模块。
的sortOrder属性被定义菜单的位置。较低的值会显示在菜单上。
该parent属性是父菜单节点的ID。它会告诉Magento这个菜单是那一个菜单的子菜单。在这个例子中，我们有parent=“Mageplaza_HelloWorld ::helloworld”，所以我们-知道这个菜单中的“Manage Items”是“Hello World”菜单中的子菜单，它会显示的Hello World菜单内。
该action属性将定义页面此菜单链接的URL。正如我们上面所讲，该URL随后将这种格式
{router_name} {controller_folder} {ACTION_NAME} 。在本例中，该菜单将链接到该模块的HelloWorld，controller是Helloworld和action是index
该resource属性用于定义该管理员用户必须拥有查看和访问此菜单中的ACL规则。我们将找到有关ACL其他主题的更多细节。
您还可以创建更多的子菜单，它会显示类似商店菜单的上方。

步骤3：更新Magento缓存

运行以下命令行：

php bin/magento cache:clean

结果：

我来学习如何修改一级菜单的图标

你可以看到他们上面的0级菜单标题。由“Admin Icons”在Magento字体生成此图标。要修改magento2后台图标，这里我们主要是针对.svg的格式文件操作。

要设置我们新的SVG图标，你可以自己创建，或者找到一个在网络上。

您可以使用Icomoon网站来选择或导入你的图标。[1]: https://icomoon.io/app/#/select
在本实施例中，我将下载一个：

选择一个或多个图标，并在页面的底部，点击“Generate Font”。

你将有一个这样的画面：

记住代码e900在图标下方，这将是我们的CSS代码非常有用。

提取档案，进入了“front”文件夹中。
我们将“icomoon”里面4个文件重命名为“jobs”（不要删除扩展名！）

将重命名后4文件放到以下文件夹内：
lib/web/fonts/MaximeFonts
当然你也可以不用maximefonts这个名字，你可以使用自己想用的

在管理菜单字体显示

我们的字体是准备好了，所以我们将其显示在管理菜单上。

创建文件：

app/design/adminhtml/Magento/backend/Maxime_Jobs/web/css/source/_module.less

写上以下代码：

@maximejobs-icons-admin__font-name-path: '@{baseDir}fonts/MaximeFonts/jobs';
@maximejobs-icons-admin__font-name : 'MaximeJobs';
.lib-font-face(
    @family-name:@maximejobs-icons-admin__font-name,
    @font-path: @maximejobs-icons-admin__font-name-path,
    @font-weight: normal,
    @font-style: normal
);
.admin__menu .item-job-head.parent.level-0 > a:before {
    font-family: @maximejobs-icons-admin__font-name;
    content: "\e900";
}

在菜单定义“content”属性填上上面的代码。“item-job-head”类包含“item-”，后面是我们在menu.xml上定义:resource="Maxime_Jobs::job_head"
删除这些文件夹：
pub/static/adminhtml/Magento/backend
var/view_preprocessed

刷新管理页面（它可以是一个有点长，因为Magento的生成静态文件），
你会看到新的漂亮的图标！