如何在Express中定位当前页面导航

Question

现在，我是通过jQuery做这个，像这样:

$(".navigation__item a").each(function () {
  if (window.location.pathname === $(this).attr("href")) {
    $(this).parent().addClass("active");
  }
});

然而，这不是完全证明，所以我想传递一个"活动"参数到我的导航视图，但我不确定如何做到这一点。下面是我的导航模板的一个片段:

<aside class="navigation-wrap">
  <ul class="navigation">
    <li class="navigation__item{{#if current}} active{{/if}}">
      <a href="/admin/dashboard">Overview</a>
    </li>
    <li class="navigation__item{{#if current}} active{{/if}}">
      <a href="/admin/customization">Customization</a>
    </li>
    <li class="navigation__item{{#if current}} active{{/if}}">
      <a href="/admin/employees">Employee</a>
    </li>
  </ul>
</aside>

下面是我的路由文件的一个片段:

app.get("/admin/:directory/:page", require("connect-ensure-login").ensureLoggedIn("/admin"), (req, res) => {
  if (req.params.page === "new") {
    res.render("admin/" + req.params.directory + "/new", Object.assign({ layout: "layouts/admin", navHighlight: "active" }, app.get("result")[0]));
  } else {
    employeeService.find({ query: { Slug: req.params.page }}, (error, employee) => {
      employee = employee[0];
      res.render("admin/employees/employee", Object.assign({ employeeRequest: req.params.page, Title: "Admin | " + employee.Name, layout: "layouts/admin" }, app.get("result")[0]));
    });
  }
});

有人完成这样的事情了吗?我已经搜索了SO和其他地方，没有找到任何东西

Answer 1

肯定有不同的可能方法。我自然而然想到的一件事是，你可以把导航保存在一个变量中，比如:

var navi = [
  {url: "/admin/dashboard", name: "Overview"},
  {url: "/admin/customization", name: "Customization"},
  {url: "/admin/employees", name: "Employee"}
];

所以我们有一个对象数组，可以动态地循环写<li>和<a>标签。有了条件，根据请求URL设置激活链接也不是什么大问题。

通过最小设置，我可以根据硬编码的请求URL输出:

<ul>
    <li class=''><a href='/admin/dashboard'>Overview</a></li>
    <li class=''><a href='/admin/customization'>Customization</a></li>
    <li class='active'><a href='/admin/employees'>Employee</a></li>
</ul>

接下来的设置。

index.js:

var express = require('express');
var app = express();
var hbs = require('hbs');
app.set('view engine', 'hbs');
hbs.registerHelper('list', function(naviItems, reqUrlItem, options) {
  var out = "";
  var cssClass = "";
  for(var i=0, l=naviItems.length; i<l; i++) {
    if (reqUrlItem === naviItems[i].url) {
        cssClass = "active";
    }
    out += "<li class='"+cssClass+"'><a href='"+naviItems[i].url+"'>" + naviItems[i].name + "</a></li>";
    cssClass = "";
  }
  return out;
});
var navi = [
  {url: "/admin/dashboard", name: "Overview"},
  {url: "/admin/customization", name: "Customization"},
  {url: "/admin/employees", name: "Employee"}
];
var reqUrl = "/admin/employees";
app.get('/', function(req, res) {
   res.render('test', {navi: navi, reqUrl: reqUrl});
});
app.listen(3000);

test.hbs

<ul>
     {{#list navi reqUrl}}{{/list}}
</ul>

所以基本上你注册一个Handlebars辅助函数叫做list，你调用你的导航变量和你的请求参数(两者都已经传递给模板之前)。helper函数应该是自解释的。希望能有所帮助!

Answer 2

在michael Troger的帮助下，我想出了一个解决办法。

src/routes/index.js

app.get("/admin/*", require("connect-ensure-login").ensureLoggedIn("/admin"), (req, res) => {
  const parts = req.path.split("/");
  /*
  console.log(
    req.path + "n",
    "0: " + parts[0] + "n",  //
    "1: " + parts[1] + "n",  // admin
    "2: " + parts[2] + "n",  // employees   // directory
    "3: " + parts[3]          // david-sarif // page
  );
  */
  if (parts[3]) {
    if (parts[3] === "new") {
      res.render("admin/" + parts[2] + "/new", Object.assign({ layout: "layouts/admin", navigation: app.get("navigationAdmin") }));
    } else {
      employeeService.find({ query: { Slug: parts[3] }}, (error, employee) => {
        employee = employee[0];
        res.render("admin/employees/employee", Object.assign({ employeeRequest: parts[3], Title: "Admin | " + employee.Name, layout: "layouts/admin", navigation: app.get("navigationAdmin") }));
      });
      handheldService.find({ query: { Slug: parts[3] }}, (error, handheld) => {
        handheld = handheld[0];
        res.render("admin/handhelds/handheld", Object.assign({ handheldRequest: parts[3], Title: "Admin | " + handheld.Name, layout: "layouts/admin", navigation: app.get("navigationAdmin") }));
      });
    }
  } else {
    res.render("admin/" + req.params[0], Object.assign({ user: req.user, title: "Admin", layout: "layouts/admin", navigation: app.get("navigationAdmin") }));
  }
});

src/middleware/index.js

module.exports = (app) => {
  app.use((req, res, next) => {
    // Create navigation for backend
    function createNavigation(navigation, data) {
      let
        html = "",
        extraClass = "";
      const parts = req.path.split("/");
      /*
      console.log(
        req.path + "n",
        "0: " + parts[0] + "n",  //
        "1: " + parts[1] + "n",  // admin
        "2: " + parts[2] + "n",  // employees   // directory
        "3: " + parts[3]          // david-sarif // page
      );
      */
      for (data of navigation) {
        if (parts[2] && data.url.includes(parts[2])) {
          extraClass = " active";
        }
        html += "<li class='navigation__item" + extraClass + "'><a href='" + data.url + "'>" + data.name + "</a></li>";
        extraClass = "";
      }
      app.set("navigationAdmin", html);
    }
    const navigationItems = [
      { url: "/admin/dashboard", name: "Overview" },
      { url: "/admin/customization", name: "Customization" },
      { url: "/admin/employees", name: "Employee" },
      { url: "/admin/handhelds", name: "Handheld" }
    ];
    createNavigation(navigationItems);
  });
};

这段代码允许我的导航保持高亮显示，无论我是在确切的页面上还是在子页面上。例如，site.com/example和site.com/example/new都会在我的导航栏中显示"example"。

繁荣。编辑:忘记添加导航的实际显示位置了!

<aside class="navigation-wrap">
  <ul class="navigation">
    {{{ navigation }}}
  </ul>
</aside>