Question

我是把手的完整入门者，正在尝试修改从example on glitch.com

获取的简单把手模板。

我希望能够在Dim HeaderTitle as String, i as Integer, MyTable as ListObject HeaderTitle = "YourTitleGoesHere" 'change to match your title Set MyTable = Worksheets(1).ListObjects("Table1") With MyTable.HeaderRowRange For i = 1 to .Count If .Cells(i).Value = HeaderTitle Then MyTable.ListColumns.Add Position:= i + 1 Exit For End If Next i End With个文件之间进行链接，就像我在.hbs个文件之间进行链接一样，但是当我尝试尝试时，系统会显示消息.html以及我提供的任何文件

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

这是我正在使用的cannot 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 }文件中的{1}}？我正在寻找最简单，通用的解决方案，以解决车把视图之间的链接问题。

FWIW我想以一种非常简单的方式使用车把，基本上只是想使用html来与hbs等效，因此，如果有更好的方法来创建应用程序考虑到这一点，我将不胜感激。

Answer 1

您的代码看起来还不错。到底是什么问题？将{{> head}}部分添加到index.hbs时，渲染是否正确？

编辑：

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

您express上的have no route defined链接到您的/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>

希望这对您有所帮助。

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

这样做后，您的layouts 文件夹 中应该有一个名为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 教程（注意它是西班牙语）学习了 hbs 的基础知识。本教程生成 this 开源项目（我将其包括在内，以防万一）。

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

2 个答案: