今天分享Magento 2开发中一个简单的后台菜单实现过程
后台菜单创建的主要步骤
步骤1:创建menu.xml文件
步骤2:编写菜单定义步骤3:更新Magento缓存步骤1:创建menu.xml文件
创建一个名为admin菜单文件:menu.xml文件的文件
app/code/Mageplaza/HelloWorld/etc/adminhtml/menu.xml
添加简单节点:
第2步:添加菜单项
我们添加一个HelloWorld模块此过程省略,因为前面有大神写过很多了
然后我们在menu.xml添加我们的内容上面是第一个add为主菜单
后面的add为子菜单主要区分是因为后面加了parent这个属性说明在这个例子中,我们将创建一个0级菜单命名的“Hello World”和两个子菜单命名为“管理项目”和“配置”。该menu.xml文件文件将定义“添加”笔记的集合,将一个菜单项添加到Magento的后端。我们将看到它的结构:让我们解释一些属性:
该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]:
在本实施例中,我将下载一个:
选择一个或多个图标,并在页面的底部,点击“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"
刷新管理页面(它可以是一个有点长,因为Magento的生成静态文件),
你会看到新的漂亮的图标!