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的生成靜態文件），
你會看到新的漂亮的圖標！