1

我是车把的完整初学者，我正在尝试修改从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，所以如果有更好的方法来创建应用程序时考虑到这一点，我将不胜感激。

4

2 回答 2

4

你的代码看起来不错。究竟是什么问题？当您添加{{> 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>

希望这对您有所帮助。

于 2019-07-02T00:40:37.270 回答
0

我没有使用车把，而是使用了 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>

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

我按照本教程学习了 hbs 的基础知识（注意它是西班牙语）。本教程生成了这个开源项目（我将其包括在内，以防它有用）。

于 2021-01-02T23:50:32.893 回答