Magento2 自定義后臺菜單

zzzmh 發(fā)布于2019-08-27 10:54 / 1875人閱讀

摘要：的屬性被定義菜單的位置。較低的值會顯示在菜單上。它會告訴這個菜單是那一個菜單的子菜單。您還可以創(chuàng)建更多的子菜單，它會顯示類似商店菜單的上方。

今天分享Magento 2開發(fā)中一個簡單的后臺菜單實(shí)現(xiàn)過程

后臺菜單創(chuàng)建的主要步驟

步驟1：創(chuàng)建menu.xml文件
步驟2：編寫菜單定義
步驟3：更新Magento緩存

步驟1：創(chuàng)建menu.xml文件

創(chuàng)建一個名為admin菜單文件：menu.xml文件的文件

app/code/Mageplaza/HelloWorld/etc/adminhtml/menu.xml

添加簡單節(jié)點(diǎn)：

第2步：添加菜單項(xiàng)

我們添加一個HelloWorld模塊此過程省略，因?yàn)榍懊嬗写笊駥戇^很多了
然后我們在menu.xml添加我們的內(nèi)容

上面是第一個add為主菜單
后面的add為子菜單主要區(qū)分是因?yàn)楹竺婕恿藀arent這個屬性說明
在這個例子中，我們將創(chuàng)建一個0級菜單命名的“Hello World”和兩個子菜單命名為“管理項(xiàng)目”和“配置”。該menu.xml文件文件將定義“添加”筆記的集合，將一個菜單項(xiàng)添加到Magento的后端。我們將看到它的結(jié)構(gòu)：

讓我們解釋一些屬性：
該id屬性是本說明的標(biāo)識符。這是一個唯一的字符串，應(yīng)遵循以下格式：
{Vendor_ModuleName}::{menu_description} 。
該title屬性是將在菜單欄上顯示的文字。
的module屬性被定義此菜單是屬于該模塊。
的sortOrder屬性被定義菜單的位置。較低的值會顯示在菜單上。
該parent屬性是父菜單節(jié)點(diǎn)的ID。它會告訴Magento這個菜單是那一個菜單的子菜單。在這個例子中，我們有parent=“Mageplaza_HelloWorld ::helloworld”，所以我們-知道這個菜單中的“Manage Items”是“Hello World”菜單中的子菜單，它會顯示的Hello World菜單內(nèi)。
該action屬性將定義頁面此菜單鏈接的URL。正如我們上面所講，該URL隨后將這種格式
{router_name} {controller_folder} {ACTION_NAME} 。在本例中，該菜單將鏈接到該模塊的HelloWorld，controller是Helloworld和action是index
該resource屬性用于定義該管理員用戶必須擁有查看和訪問此菜單中的ACL規(guī)則。我們將找到有關(guān)ACL其他主題的更多細(xì)節(jié)。
您還可以創(chuàng)建更多的子菜單，它會顯示類似商店菜單的上方。

步驟3：更新Magento緩存

運(yùn)行以下命令行：

php bin/magento cache:clean

結(jié)果：

我來學(xué)習(xí)如何修改一級菜單的圖標(biāo)

你可以看到他們上面的0級菜單標(biāo)題。由“Admin Icons”在Magento字體生成此圖標(biāo)。要修改magento2后臺圖標(biāo)，這里我們主要是針對.svg的格式文件操作。

要設(shè)置我們新的SVG圖標(biāo)，你可以自己創(chuàng)建，或者找到一個在網(wǎng)絡(luò)上。

您可以使用Icomoon網(wǎng)站來選擇或?qū)肽愕膱D標(biāo)。[1]: https://icomoon.io/app/#/select
在本實(shí)施例中，我將下載一個：

選擇一個或多個圖標(biāo)，并在頁面的底部，點(diǎn)擊“Generate Font”。

你將有一個這樣的畫面：

記住代碼e900在圖標(biāo)下方，這將是我們的CSS代碼非常有用。

提取檔案，進(jìn)入了“front”文件夾中。
我們將“icomoon”里面4個文件重命名為“jobs”（不要刪除擴(kuò)展名！）

將重命名后4文件放到以下文件夾內(nèi)：
lib/web/fonts/MaximeFonts
當(dāng)然你也可以不用maximefonts這個名字，你可以使用自己想用的

在管理菜單字體顯示

我們的字體是準(zhǔn)備好了，所以我們將其顯示在管理菜單上。

創(chuàng)建文件：

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

刷新管理頁面（它可以是一個有點(diǎn)長，因?yàn)镸agento的生成靜態(tài)文件），
你會看到新的漂亮的圖標(biāo)！