我是 Handlebars 的初学者，正在尝试修改取自 example on glitch.com 的简单 Handlebars 模板。
我希望能够在 .hbs 文件之间链接，就像在 .html 文件之间链接一样，但是当我尝试时，我收到消息 无法 GET 后跟我提供给它的任何文件。
这是我的整体结构供引用；
这是我正在使用的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
}
如果需要其他文件的任何详细信息来提供帮助，请告诉我，我可以提供。
我很感激我可能以错误的方式思考这个问题，我更详细地研究了 Handlebars 并尝试了助手等。但对于我想要实现的目标来说，它似乎过于复杂，我认为你可以编写基本的html 在 hbs 文件中？我正在寻找最直接、通用的解决方案来解决 Handlebars 中 View 之间的链接问题。
FWIW我想以一种非常简单的方式使用 Handlebars ，基本上只是希望使用 partials 来代替 php include ，所以如果有更好的方法考虑到这一点来创建应用程序，我将不胜感激您的建议。
最佳答案
你的代码看起来没问题。到底是什么问题呢？当您添加{{> head}}时偏向index.hbs渲染不正确吗？
编辑:
好吧，您的代码主要有两个问题:
- 您 have no route defined上
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);
});
然后您需要修复 index.hbs 上的 HTML 链接:
<!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>
希望这对您有帮助。
关于javascript - 使用 Handlebars 在 .hbs 文件之间链接的最简单方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56828154/