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的生成静态文件），
你会看到新的漂亮的图标！