Magento2 自定義后臺(tái)菜單

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

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

今天分享Magento 2開(kāi)發(fā)中一個(gè)簡(jiǎn)單的后臺(tái)菜單實(shí)現(xiàn)過(guò)程

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

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

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

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

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

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

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

我們添加一個(gè)HelloWorld模塊此過(guò)程省略，因?yàn)榍懊嬗写笊駥?xiě)過(guò)很多了
然后我們?cè)趍enu.xml添加我們的內(nèi)容

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

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

步驟3：更新Magento緩存

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

php bin/magento cache:clean

結(jié)果：

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

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

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

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

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

你將有一個(gè)這樣的畫(huà)面：

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

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

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

在管理菜單字體顯示

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

創(chuàng)建文件：

app/design/adminhtml/Magento/backend/Maxime_Jobs/web/css/source/_module.less

寫(xiě)上以下代碼：

@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”類(lèi)包含“item-”，后面是我們?cè)趍enu.xml上定義:resource="Maxime_Jobs::job_head"
刪除這些文件夾：
pub/static/adminhtml/Magento/backend
var/view_preprocessed

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

云服務(wù)器 GPU云服務(wù)器自定義菜單自定義菜單詳解 js自定義菜單釘釘自定義菜單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110358.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zzzmh

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

vgg16

閱讀 2251·2023-04-26 00:00
搬瓦工vps：Linux服務(wù)器選擇CentOS、Debian、Ubuntu鏡像的建議

閱讀 3448·2021-09-24 10:37
《30天自制操作系統(tǒng)》第9天

閱讀 3622·2021-09-07 09:58
css布局【實(shí)用】

閱讀 1585·2019-08-30 15:56
如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

閱讀 2273·2019-08-30 13:11
移動(dòng)端適配方案

閱讀 2365·2019-08-29 16:38
javascript對(duì)任意顏色獲取更亮或更暗的顏色值

閱讀 1057·2019-08-29 12:58
Magento2 自定義后臺(tái)菜單

閱讀 1976·2019-08-27 10:54

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Magento2 自定義后臺(tái)菜單

相關(guān)文章