向导航列添加自定义菜单选项卡和菜单项
时间:2020-03-05 15:25:28 来源:igfitidea点击:
对移动友好的导航工具列,简称为navbar,是drupal8中工具列的后端口。
从它的名字来看,它试图解决的问题非常明显。
Navbar是Drupal项目中经常使用的模块。
在我们最近的项目中,我们被要求开发一系列菜单,以便在需要时快速访问管理页面。
与快捷方式不同,我们希望它像通知一样动态显示。
例如,如果有任何新的注释等待批准,菜单应该会显示出来,还有一些类似的项目。
我想,Navbar可以满足这个需求。
这个强大的开发人员友好的模块通过实现hook_navbar()使任何模块都可以实现这一点。
类似于hook_menu(),返回的菜单项数组,但采用可渲染数组格式。
如果你需要一个例子,函数navbar_navbar()是一个很好的开始。
它提供的菜单可以看作,
- navbar选项卡的名称用作菜单项(例如Home)
- 单击时的navbar选项卡将展开,以显示其下面的菜单项(例如快捷方式),具体取决于hook_navbar()中定义的navbar项的方式。
#1的示例代码,
<?php
/**
* Implements hook_navbar().
*/
function mymodule_navbar() {
$items = array();
$count = db_query('SELECT COUNT(cid) FROM {comment} WHERE status = :status', array(
':status' => COMMENT_NOT_PUBLISHED,
))->fetchField();
if ($count > 0) {
$items['comment_unapproved'] = array(
'#type' => 'navbar_item',
'tab' => array(
'#type' => 'link',
'#title' => t('Unapproved comment (!count)', array('!count' => $count)),
'#href' => 'admin/content/comment/approval',
'#options' => array(
'html' => TRUE,
'attributes' => array(
'title' => t('Approve comments'),
'class' => array('navbar-icon', 'navbar-icon-comment-unapproved'),
),
),
),
'#weight' => -20,
'#wrapper_attributes' => array(
'class' => array('pull-right'),
),
);
}
return $items;
}
?>
注意:为了与其他菜单选项卡保持区别,我们可以使用"#wrapper_attributes"添加自定义CSS类。
我有'向右拉',所以我可以把它放在工具列的右极端。
#2的示例代码,
<?php
/**
* Implements hook_navbar().
*/
function navbar_navbar() {
global $user;
$items = array();
//Add logout & user account links or login link.
if (module_exists('user')) {
if ($user->uid) {
$links = array(
'account' => array(
'title' => t('View profile'),
'href' => 'user',
'html' => TRUE,
'attributes' => array(
'title' => t('User account'),
),
),
'logout' => array(
'title' => t('Log out'),
'href' => 'user/logout',
),
);
}
else {
$links = array(
'login' => array(
'title' => t('Log in'),
'href' => 'user',
),
);
}
$items['user'] = array(
'#type' => 'navbar_item',
'tab' => array(
'#type' => 'link',
'#title' => format_username($user),
'#href' => 'user',
'#options' => array(
'attributes' => array(
'title' => t('My account'),
'class' => array('navbar-icon', 'navbar-icon-user',),
),
),
),
'tray' => array(
'#heading' => t('User account actions'),
'user_links' => array(
'#theme' => 'links__navbar_user',
'#links' => $links,
'#attributes' => array(
'class' => array('menu', 'navbar-menu-user'),
),
),
),
'#weight' => 100,
);
}
return $items;
}
?>
示例2提供用户名作为菜单选项卡。
单击后,它会将配置文件页面链接和注销链接显示为菜单项。
与hook_menu()不同,这些项不会被缓存,因此我们可以使用动态菜单。
我不得不写自定义css来获得我的自定义菜单图标。
下面是CSS我用来放置铅笔图标旁边的菜单选项卡。
.navbar-bar .navbar-icon-comment-unapproved:before {
background-image: url("../../../contrib/navbar/icons/bebebe/pencil.svg");
}
.no-svg .navbar-bar .navbar-icon-comment-unapproved:before {
background-image: url("../../../contrib/navbar/icons/bebebe/pencil.png");
}
.navbar-bar .navbar-icon-comment-unapproved:active:before,
.navbar-bar .navbar-icon-comment-unapproved.navbar-active:before {
background-image: url("../../../contrib/navbar/icons/ffffff/pencil.svg");
}
.no-svg .navbar-bar .navbar-icon-comment-unapproved:active:before,
.no-svg .navbar-bar .navbar-icon-comment-unapproved.navbar-active:before {
background-image: url("../../../contrib/navbar/icons/ffffff/pencil.png");
}

