博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Magento2 自定义后台菜单
阅读量:6716 次
发布时间:2019-06-25

本文共 2334 字,大约阅读时间需要 7 分钟。

今天分享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

结果:

clipboard.png

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

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

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

您可以使用Icomoon网站来选择或导入你的图标。[1]:

在本实施例中,我将下载一个:

clipboard.png

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

你将有一个这样的画面:

clipboard.png

记住代码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的生成静态文件),

你会看到新的漂亮的图标!

clipboard.png

转载地址:http://dqelo.baihongyu.com/

你可能感兴趣的文章
得到IP
查看>>
关于如何实现浮动元素居中
查看>>
Daily Scrum 11.10
查看>>
vim 中的查找
查看>>
dev使用3
查看>>
ServerVariables变量列表
查看>>
Cocos2d-x for android 使用Box2d报错解决
查看>>
搜狗输入法的评判
查看>>
九、oracle 事务
查看>>
几种线性时间排序
查看>>
08 django模型系统(一)
查看>>
我对 前端 Js 开发方式 架构方向 的 一些看法
查看>>
Linux shell 自启动脚本写法
查看>>
How Many Tables HDOJ
查看>>
DataTable转换成List
查看>>
身份证号码验证算法
查看>>
py实现ftp
查看>>
3、异步编程-JS种事件队列的优先级
查看>>
关于C语言判断文件尾问题的探讨
查看>>
poj1243(经典dp)
查看>>