使用把手在 .hbs 文件之间 link 的最简单方法是什么？

Question

我是车把的完全初学者，我正在尝试修改取自 example on glitch.com

的简单车把模板

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

这是我的整体结构的截图，供参考；

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

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

我想 link 到（例如）这个 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
}

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

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

FWIW 我想以一种非常简单的方式使用车把，基本上只是想用 partials 代替 php includes，所以如果有更好的方法来创建考虑到这一点，我将不胜感激。

Answer 1

您的代码看起来没问题。到底是什么问题？当您将 {{> head}} 部分添加到 index.hbs 时，它无法正确呈现吗？

编辑：

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

您 have no route defined 在 express link 连接到您的 /secondpage 端点。
您正在尝试 link 文件 <a href="views/secondpage.hbs">Link</a> 而不是 linking 到 URL 端点 <a href="/secondpage">Link</a>。

要修复您的代码，您必须将端点 linking 定义到 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 links:

<!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>

希望对您有所帮助。

Answer 2

我没有使用车把，而是使用了 express-handlebars 终端：npm i express-handlebars

Handlebars 是一个中间件，用作 Twig（模板引擎），因此对于您的服务器，我建议：

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

const exphbs = require('express-handlebars');

app.set('views', __dirname + '/views');
// added this part
app.engine('.hbs', exphbs ({
    defaultLayout: 'main',
    layoutsDir: ('views', __dirname + 'layouts'),
    partialsDir: ('views', __dirname 'partials'),
    extname: '.hbs'
}));
app.set('view engine', 'hbs')

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);
});

通过这样做，您的 布局文件夹 中应该有一个名为 main.hbs 的文件，您将在其中拥有该动态你正在寻找的方法。所有页面都保持不变的东西。我将在此处插入一个建议，请随时根据您的代码进行调整。

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- CUSTOM CSS -->
        <link rel="stylesheet" href="/css/main.css">
      </head>
      <body>

        {{> navigation }}

        <main class="container p-5">
          {{{ body }}}
        </main>

      </body>
    </html>

现在，当您在 partials 文件夹 中创建 navigation.hbs 时，您将在导航的所有页面中拥有相同的前端。这是因为我们在 server.js 中将我们的默认模板定义为 main.hbs。对于您的主体，三重哈希 ({{{}}}) 插入您定义的其他 .hbs 文件的组件。不要忘记在 views 文件夹.

中创建一个 index.hbs 文件

我通过关注 this tutorial (Note it's in Spanish). The tutorial produces this 开源项目（我将其包括在内以防有用）学习了 hbs 的基础知识。

使用把手在 .hbs 文件之间 link 的最简单方法是什么？

What is the simplest way to link between .hbs files using handlebars?

javascript

handlebars.js

express-handlebars

glitch-framework