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
}

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

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

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.hbsviews 文件夹中创建一个文件。

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

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