时间戳

首页 > 解决方案 > 使用把手在 .hbs 文件之间进行链接的最简单方法是什么？

javascript - 使用把手在 .hbs 文件之间进行链接的最简单方法是什么？

问题描述

我是车把的完整初学者，我正在尝试修改从glitch.com 上的示例中获取的简单车把模板

我希望能够在文件之间进行链接，.hbs就像在文件之间进行链接一样，.html但是当我尝试时，我会收到消息cannot GET，然后是我提供给它的任何文件。

这是我对 ref 的整体结构的抓取；

在此处输入图像描述

这是index.hbs我正在使用的文件

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="views/secondpage.hbs">Link to second page</a>
  </body>
</html>

我想链接到（例如）这个secondpage.hbs文件；

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="views/index.hbs">Link back to index</a>
  </body>
</html>

这是我server.js文件中的代码

// Generic node.js express init:
const express = require('express');
const app = express();
app.use(express.static('public'));

const hbs = require('hbs');

hbs.registerPartials(__dirname + '/views/partials/');

app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');

app.get("/", (request, response) => {

  let dt = new Date();
  let data = {
    projectName: process.env.PROJECT_DOMAIN,
    luckyNumber: Math.floor(Math.random()*1000),
    serverTime: new Date(),
    ip: (request.headers["x-forwarded-for"]||"").split(",")[0]
  };

  data.json = JSON.stringify(data, null, 2);

  response.render('index', data);
});

let listener = app.listen(process.env.PORT, () => {
  console.log('Your app is listening on port ' + listener.address().port);
});

和我的代码watch.json

{
  "install": {
    "include": [
      "^package\\.json$",
      "^\\.env$"
    ]
  },
  "restart": {
    "exclude": [
      "^public/",
      "^dist/"
    ],
    "include": [
      "\\.js$",
      "\\.hbs$",
      "\\.json"
    ]
  },
  "throttle": 100
}

如果需要其他文件的任何详细信息来提供帮助，请告诉我，我可以提供。

我很感激我可能以错误的方式思考这个问题，我已经更详细地研究了车把并尝试了助手等。但对于我想要实现的目标来说，它似乎过于复杂，我认为你可以html在hbs文件中编写基本内容？我正在寻找最直接、最通用的解决方案来解决车把中视图之间的链接问题。

FWIW 我想以一种非常简单的方式使用车把，基本上只是想拥有相当于php includesusing的功能partials，所以如果有更好的方法来创建应用程序时考虑到这一点，我将不胜感激。

标签： javascripthandlebars.jsexpress-handlebarsglitch-framework

解决方案

你的代码看起来不错。究竟是什么问题？当您添加{{> head}}部分时，index.hbs它不会正确呈现吗？

编辑：

好的，您的代码主要有两个问题：

  • 您没有在express链接到/secondpage端点时定义路由。
  • 您正在尝试链接到文件<a href="views/secondpage.hbs">Link</a>而不是链接到 URL 端点<a href="/secondpage">Link</a>。

要修复您的代码，您必须定义链接到handlebars文件的端点，因此您需要将server.js文件更改为类似的内容。

const express = require('express');
const hbs = require('hbs');

const app = express();

app.use(express.static('public'));
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
hbs.registerPartials(__dirname + '/views/partials/');

// 1st Page Route (URL Endpoint)

app.get('/', (request, response) => {
    const data = {
        projectName: process.env.PROJECT_DOMAIN,
        luckyNumber: Math.floor(Math.random() * 1000),
        serverTime: new Date(),
        ip: (request.headers['x-forwarded-for'] || '').split(',')[0],
    };
    data.json = JSON.stringify(data, null, 2);

    response.render('index', data);
});

// 2nd Page Route (URL Endpoint)

app.get('/secondpage', (request, response) => {
    response.render('secondpage');
});

const listener = app.listen(process.env.PORT, () => {
    console.log('Your app is listening on port ' + listener.address().port);
});

然后您需要在以下位置修复指向此的 HTML 链接index.hbs：

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="/secondpage">Link to second page</a>
  </body>
</html>

这在secondpage.hbs：

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="/">Link back to index</a>
  </body>
</html>

希望这对您有所帮助。

推荐阅读