Magento 2 Create Admin Menu

本篇我们将介绍如何创建 Admin menu 。

Admin menu 看起来就是这样:
admin menu

他是有层次的。可以分成三级,最左侧大类的 Sales ,然后是分组 Operation ,然后是 Orders 和 invoice 等。

我们来看 orders 的链接结构:

http://example/admin/sales/order/index/key/9118b14253fc71837e2b0d7ea73c818b63d1401ebd1f04f310486d985f3e6d57/

和前台的 url 结构相比较,他多出了 admin 和后面的 /key/118b14253fc71837e2b0d7ea73c818b63d1401ebd1f04f310486d985f3e6d57/

key 是为了防止跨站脚本攻击(cross site script attacks)

后台的 url 结构就是(看到的)

admin/front-name/controller-name/action

如果引用则是

admin/front-id/controller-name/action

创建 menu.xml

File:app/code/ThankIT/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>
       <add id="ThankIT_HelloWorld::helloworld" title="Hello World" module="ThankIT_HelloWorld" sortOrder="51" resource="ThankIT_HelloWorld::helloworld"/>
       <add id="ThankIT_HelloWorld::post" title="Posts" module="ThankIT_HelloWorld" sortOrder="10" action="thankit_helloworld/post/index" resource="ThankIT_HelloWorld::post" parent="ThankIT_HelloWorld::helloworld"/>
       <add id="ThankIT_HelloWorld::helloworld_configuration" title="Configuration" module="ThankIT_HelloWorld" sortOrder="99" parent="ThankIT_HelloWorld::helloworld" action="adminhtml/system_config/edit/section/helloworld" resource="ThankIT_HelloWorld::helloworld_configuration"/>
    </menu>
</config>

注意 action="adminhtml/system_config/edit/section/helloworld" 此处使用的是 adminhtml 而不是 admin 尽管我们看到的是 admin

  • The id attribute is the identifier for this note. It’s a unique string and should follow the format: {Vendor_ModuleName}::{menu_description}.
  • The title attribute is the text which will be shown on the menu bar.
  • The module attribute is defined the module which this menu is belong to.
  • The sortOrder attribute is defined the position of the menu. Lower value will display on top of menu.
  • The parent attribute is an Id of other menu node. It will tell Magento that this menu is a child of another menu. In this example, we have parent=”ThankIT_HelloWorld::helloworld”, so we – know this menu “Posts” is a child of “Hello World” menu and it will show inside of Hello World menu.
  • The action attribute will define the url of the page which this menu link to. As we talk above, the url will be followed this format {router_name}{controller_folder}{action_name}.
  • The resource attribute is used to defined the ACL rule which the admin user must have in order to see and access this menu. We will find more detail about ACL in other topic.

关于最左侧的大类的 icon 请参考Magento Admin Pattern Library-Iconography

效果如下
menu效果

这里只有两层结构,下面看下三层的结构:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Magento_Sales::sales" title="Sales" translate="title" module="Magento_Sales" sortOrder="15" dependsOnModule="Magento_Sales" resource="Magento_Sales::sales"/>
        <add id="Magento_Sales::sales_operation" title="Operations" translate="title" module="Magento_Sales" sortOrder="10" parent="Magento_Sales::sales" resource="Magento_Sales::sales_operation" />
        <add id="Magento_Sales::sales_order" title="Orders" translate="title" module="Magento_Sales" sortOrder="10" parent="Magento_Sales::sales_operation" action="sales/order" resource="Magento_Sales::sales_order"/>
        <add id="Magento_Sales::sales_invoice" title="Invoices" translate="title" module="Magento_Sales" sortOrder="20" parent="Magento_Sales::sales_operation" action="sales/invoice" resource="Magento_Sales::sales_invoice"/>
        ....
    </menu>
</config>

对应第一张的图片。

参考文档

Magento 2 Create Admin Menu
Magento 2: Admin Menu Items

发表评论

电子邮件地址不会被公开。 必填项已用*标注