Magento2 自定义后台菜单

Yumenokanata 发布于2019-06-27 15:10 / 2844人阅读

摘要：的属性被定义菜单的位置。较低的值会显示在菜单上。它会告诉这个菜单是那一个菜单的子菜单。您还可以创建更多的子菜单，它会显示类似商店菜单的上方。

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

GPU云服务器云服务器自定义菜单自定义菜单详解 js自定义菜单钉钉自定义菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/22239.html

Magento2 自定义后台菜单

摘要：的属性被定义菜单的位置。较低的值会显示在菜单上。它会告诉这个菜单是那一个菜单的子菜单。您还可以创建更多的子菜单，它会显示类似商店菜单的上方。今天分享Magento 2开发中一个简单的后台菜单实现过程后台菜单创建的主要步骤步骤1：创建menu.xml文件步骤2：编写菜单定义步骤3：更新Magento缓存步骤1：创建menu.xml文件创建一个名为admin菜单文件：menu.x...

zzzmh 2019-08-27 10:54 评论0 收藏0
Magento2.x 如何创建一个Module?

摘要：今天记录下如何创建一个，直接进入正题。创建好我们的和之后，接下来就需要创建一系列的文件，我们依次来说每个文件如何创建。 Magento2.x版本已经发布一段时间了，到现在为止已经到2.2了，最新版本可以关注Magento在github上的更新。今天记录下Magento2.1如何创建一个module，直接进入正题。安装Magento2后，进入项目的根目录后，进入/app目录，只有app...

bbbbbb 2019-06-27 14:11 评论0 收藏0
[译]Magento2 高级路由

摘要：以上是的的目录路由器配置。考虑重写模块以上文件文件使用的操作字符串。例如，如果你想回到第一个模块在这个系列和添加前端端点，所有你需要做的就是添加以下配置和以下控制器文件。默认操作字符串段我们从先进的路由移动之前，有一些最后要提。今天，我们要介绍的几个Magento的路由系统的高级功能，并讨论一些看似急性锐边的历史。虽然所有在这篇文章中提供的技术可能不是最好的方式来实现自己的目标，作为...

PumpkinDylan 2019-06-27 15:09 评论0 收藏0
Magento2 产品详情页添加自定义内容

摘要：自定义内容只需要依照原路经在自己模块下新建相同的路径内容添加自定义内容新建下午注意继承对象新建新建打开前台可以看到效果添加选项继续在中添加代码如下添加自定义内容详情页添加选项接在在下创建文件自定义内容,只需要依照原路经在自己模块下新建相同的路径内容, 添加自定义内容 step1.新建/xxx/xxx/Block/Product/View/Extra.php ...

ConardLi 2019-07-01 12:18 评论0 收藏0
Magento2 模块下添加自定义JS

摘要：先看看要做的事自己写的或第三方文件如下位置下添加自己的文件例配置文件添加文件，用于配置引用添加到例这里为后面调用修改模板然后就可以这样调用了目录结构借用别人的图先看看要做的事 1.自己写的或第三方JS文件如下位置下添加自己的文件： //view//web/js/ 例：//view//web/js/my.js 2.配置文件添加requirejs-config.js文件，用于配置引用...

geekzhou 2019-06-27 15:09 评论0 收藏0