发布了一个适用于 Express 的面包屑导航中间件
发布于 1年前 作者 heroicyang 765 次浏览

在开发 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}
1 回复
回到顶部