向导航列添加自定义菜单选项卡和菜单项

时间: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");
}