插件可以通过覆盖插件注册文件的registerNavigation方法来扩展后端导航菜单。 本节展示了如何向后端导航区域添加菜单项。 以下是注册一个带有两个子菜单项的顶级导航菜单项的示例。
public function registerNavigation()
{
return [
'blog' => [
'label' => 'Blog',
'url' => Backend::url('acme/blog/posts'),
'icon' => 'icon-pencil',
'permissions' => ['acme.blog.*'],
'order' => 500,
'sideMenu' => [
'posts' => [
'label' => 'Posts',
'icon' => 'icon-copy',
'url' => Backend::url('acme/blog/posts'),
'permissions' => ['acme.blog.access_posts'],
],
'categories' => [
'label' => 'Categories',
'icon' => 'icon-copy',
'url' => Backend::url('acme/blog/categories'),
'permissions' => ['acme.blog.access_categories'],
]
]
]
];
}当你注册后端导航时,你可以使用本地化字符串作为 label 值。后端导航也可以通过 permissions 值来控制,并对应于已定义的后端用户权限。后端导航在整体导航菜单项中出现的顺序,由 order 值控制。较高的数字意味着该项在菜单项顺序中会更靠后出现,而较低的数字意味着它会更靠前出现。
要使子菜单项可见,您可以在 后端控制器 中使用 BackendMenu::setContext 方法设置导航上下文。这将激活父菜单项并在侧边菜单中显示其子项。
| Property | Description |
|---|---|
| label | specifies the menu label localization string key, required. |
| order | a numerical weight when determining the display order. |
| icon | an icon name from the October CMS icon collection, optional. |
| iconSvg | an SVG icon to be used in place of the standard icon, the SVG icon should be a rectangle and can support colors, optional. |
| url | the URL the menu item should point to (eg. Backend::url('author/plugin/controller/action'), required. |
| counter | a numeric value to output near the menu icon. The value should be a number or a callable returning a number, optional. |
| counterLabel | a string value to describe the numeric reference in counter, optional. |
| attributes | an associative array of attributes and values to apply to the menu item, optional. |
| permissions | an array of permissions the backend user must have in order to view the menu item (Note: direct access of URLs still requires separate permission checks), optional. |
| sideMenu | an array of sub-menu items sharing the same configuration as parent menu items, optional. |
| itemType | specifies a display type for the item, sub-menu items only. Supported: primary, link, ruler, section. Default: link. |
以下是系统生成的值,且在注册导航项时不会提供。
| Key | Description |
|---|---|
| code | a string value that acts as an unique identifier for that menu option. |
| owner | a string value that specifies the menu items owner plugin or module in the format "Author.Plugin". |
导航项支持指定一个计数器,以指示有需要关注的项。这些属性可用于父级和子级菜单项。使用 counter 和 counterLabel 来显示一个数字计数器。
'blog' => [
// ...
'counter' => [\Author\Plugin\Classes\MyMenuCounterService::class, 'getCounterMethod'],
'counterLabel' => 'Label describing a dynamic menu counter',
],子菜单项支持使用 itemType 属性的不同显示类型,包括用户界面元素。将类型设置为 section 以显示一个导航部分。在键名加前缀下划线 (_) 是一个很好的方式来传达它是一个 UI 元素。
'_section1' => [
'itemType' => 'section',
'label' => 'Advanced',
],将一个部分与上方放置的导航分隔符结合使用可能会很有用。将类型设置为 ruler 以显示分隔符。
'_ruler1' => [
'itemType' => 'ruler',
],要显示号召性用语,请将类型设置为 primary 以将链接显示为主要按钮。
'people_create' => [
'label' => 'New Person',
'icon' => 'icon-plus',
'url' => Backend::url('acme/blog/people/create'),
'itemType' => 'primary',
],backend.menu.extendItems 事件监听器 可用于修改现有导航项,在系统和插件注册其导航项之后。该事件返回一个导航 $manager 实例,该实例支持以下方法。
| Method | Description |
|---|---|
| addMainMenuItems($owner, $definitions) | Add or update a main menu definition |
| getMainMenuItem($owner, $code) | Retrieve an existing main menu definition |
| removeMainMenuItem($owner, $code) | Delete an existing main menu definition |
| addSideMenuItems($owner, $code, $definitions) | Add or update a side menu definition |
| getSideMenuItem($owner, $code, $sideCode) | Retrieve an existing side menu definition |
| removeSideMenuItem($owner, $code, $sideCode) | Delete an existing side menu definition |
当检索菜单项时,该对象支持方法链以更新其属性。以下示例将用 Code Editor 替换 Editor 的标签。
Event::listen('backend.menu.extendItems', function($manager) {
$manager->getMainMenuItem('October.Editor', 'editor')->label('Code Editor');
});下一个示例会将标签更改为 新闻 并添加一个 9 计数器到 Acme Blog 插件。
Event::listen('backend.menu.extendItems', function($manager) {
$manager->getMainMenuItem('Acme.Blog', 'blog')
->getSideMenuItem('posts')
->label('News')
->counter(9);
});类似地, 我们可以使用相同的事件移除菜单项. 以下示例将移除所有项, 移除单个项, 以及移除多个项, 分别.
Event::listen('backend.menu.extendItems', function($manager) {
$manager->removeMainMenuItem('Acme.Blog', 'blog');
$manager->removeSideMenuItem('Acme.Blog', 'blog', 'posts');
$manager->removeSideMenuItems('Acme.Blog', 'blog', [
'posts',
'categories'
]);
});