向导航列添加自定义菜单选项卡和菜单项
时间: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"); }