发布了一个适用于 Express 的 Nodejs 面包屑导航中间件

发布了一个适用于 Express 的 Nodejs 面包屑导航中间件

在开发 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}


3 回复

标题：发布了一个适用于 Express 的 Nodejs 面包屑导航中间件

内容： 在开发 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}

通过以上步骤，您可以轻松地在您的 Express 应用程序中集成面包屑导航功能。


cool

以下是对“发布了一个适用于 Express 的 Nodejs 面包屑导航中间件”的详细回答，包括了示例代码：

安装

首先，你需要通过 npm 安装这个中间件：

npm install express-breadcrumbs --save

使用

1. 初始化

在你的 server.js 文件中，初始化面包屑导航中间件，并设置主页信息：

const express = require('express');
const breadcrumbs = require('express-breadcrumbs');

const app = express();

// 初始化面包屑导航中间件
app.use(breadcrumbs.init());

// 设置主页信息
app.use(breadcrumbs.setHome({
  name: 'Home',
  url: '/'
}));

// 为 /admin 路径设置主页信息
app.use('/admin', breadcrumbs.setHome({
  name: 'Dashboard',
  url: '/admin'
}));

2. 添加导航

在每个请求中使用 req.breadcrumbs() 方法来添加导航信息：

// routes.js

app.get('/signup', function(req, res) {
  // 添加面包屑导航
  req.breadcrumbs('SignUp');
  
  // 渲染视图时传递面包屑数据
  res.render('signup', {
    breadcrumbs: req.breadcrumbs()
  });
});

3. 在模板中使用

在你的模板文件（如 signup.jade）中，迭代渲染面包屑导航：

ul
  each breadcrumb in breadcrumbs
    li: a(href="#{breadcrumb.url}") #{breadcrumb.name}

以上是详细的安装、初始化、使用和模板中的使用方法。希望这能帮助你在项目中集成面包屑导航功能。

回到顶部