在开发 nodediscuss
的过程中实现的面包屑导航中间件,有需要的同学不妨瞅瞅!
GitHub: https://github.com/heroicyang/express-breadcrumbs
npm: https://npmjs.org/package/express-breadcrumbs
安装
npm install express-breadcrumbs --save
使用
1 - 初始化
在 server.js
初始化面包屑导航中间件。
// server.js
var breadcrumbs = require('express-breadcrumbs');
app.use(breadcrumbs.init());
// 设置主页信息
app.use(breadcrumbs.setHome());
// 可以单独为 `/admin` 路径设置
app.use('/admin', breadcrumbs.setHome({
name: 'Dashboard',
url: '/admin'
}));
2 - 添加导航
在每个请求中使用 req.breadcrumbs('name', 'url')
方法来添加导航, 使用 req.breadcrumbs()
方法获得已添加的导航数据.
// routes.js
app.get('/signup', function(req, res) {
req.breadcrumbs('SignUp');
res.render('/signup', {
breadcrumbs: req.breadcrumbs()
});
});
更多使用方法:
// 单个方式添加
req.breadcrumbs('name', 'url');
// 以对象的方式添加,须包含 `name` 属性,可选 `url` 属性
req.breadcrumbs({
name: 'name',
url: 'url'
});
// 以对象数组的方式添加
req.breadcrumbs([obj1, obj2]);
3 - 在模板中使用
只需要迭代 render
时提供的 breadcrumbs
即可。
// signup.jade
ul
each breadcrumb in breadcrumbs
li: a(href="#{breadcrumb.url}") #{breadcrumb.name}