博客导航栏的优化

博客默认的导航栏在移动设备上的显示各种难看，一直是一个心病。今天抽时间修复了一下，在移动设备上显示也非常优雅了。

MEAN.io的导航栏用的就是Bootstrap的navbar，它本身能很好的兼容移动设备，这里有一个例子。可见是mean.io没有用好。参照前面的例子，下面来进行修改。

导航栏的代码在packages/system/public/views/header.html里面。需要修改如下：

<div class="container-fluid" data-ng-controller="HeaderController">
  <div class="navbar-header">
    <!-- 收起来时的toggle button，注意data-target的值要和后面的对应 -->
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#bs-navbar-collapse-1">
      <span class="sr-only">Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" ui-sref="home" mean-token="'site-title'">Title</a>
  </div>

  <!-- 这里是可以收起来的内容，注意这里的id要和前面的data-target对应 -->
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      ...
  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

这里基本上就完成了。在移动设备上，NavBar能够优雅的折叠起来，但是竟然打不开。Google了一下，发现答案原来是没有引入bootstrap.js。引入后，能够正常的运行了。

导航标签为了更好看，我这里都改为glyphicon。在menu item中家一个新的字段icon:

Articles.menus.add({
  'title': 'Articles',
  'link': 'all articles',
  'icon': 'list'  // 
});
Articles.menus.add({
  'roles': ['authenticated'],
  'title': 'Create New Article',
  'link': 'create article',
  'icon': 'plus'
});

在header.html做如如下修改：

<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a> 

改为

<a mean-token="item.link" ui-sref='{{item.link}}'><i class="glyphicon glyphicon-{{item.icon}}"></i></a>

大功告成，把以前NavBar中的文字链接，都改为好看的icon了。