node.js jshtml-express 布局答案

【问题标题】：node.js jshtml-express layoutnode.js jshtml-express 布局
【发布时间】：2013-04-22 17:47:29
【问题描述】：

你好！

有没有办法在 jshtml 中拥有母版页或布局？

我尝试以 .net Razor 样式执行此操作，但没有成功。 Link to jshtml view engine.

我的意图是让母版页被称为 layout.jshtml 和其他一些子页面，如 index.jshtml 等，就像它在 razor 中一样。

更多解释我所说的“我想要母版页”的意思我有 Layout.jshtml ，这是我的母版页

<html>
<head>
    <link rel="stylesheet" href="/stylesheets/style.css" ></link>

</head>
<body>

@writeBody();




</body>
</html>

我还有其他视图叫做 some.jshtml

<h1>@locals.title</h1>
<div class="Mydata">
@locals.content
@locals.otherContent
</div>

当我在浏览器中运行此页面时，我希望将 layout.jshtml 和 some.jshtml 连接起来。 some.jshtml 的内容在 writeBody() 中渲染；在 layout.jshtml 中

当我谈到串联时，我指的是这样的事情。这是我可以在浏览器中看到的结果。

<html>
<head>
    <link rel="stylesheet" href="/stylesheets/style.css" ></link>

</head>
<body>

<h1>title</h1>
<div class="Mydata">
content
otherContent
</div>

</body>
</html>

【问题讨论】：

标签： node.js viewengine

【解决方案1】：

jshtml 存储库链接到 jshtml-express 项目。

那里的文档给出了如何在您的项目中使用它的示例：

var express = require('express');

var port = parseInt(process.argv.pop());
var app = express();
app.configure(function() {
    app.use(express.bodyParser());
    app.use(app.router);
});

app.engine('jshtml', require('jshtml-express'));  // make sure you have installed via npm install jshtml-express
app.set('view engine', 'jshtml');

我自己没有使用过这个，但这个过程与其他模板系统（Jade、Handlebars 等）类似。

【讨论】：

您好 Nick，感谢您的回复，是的，我已经通过 npm 安装了 jshtml-express，并添加了您提到的代码行，此外，我还可以运行 *.jshtml 文件来显示我的数据。但我不知道如何将我的应用设置为拥有母版页。
知道了，我想我有点不清楚您所说的母版页是什么意思。你能提供更多细节吗？

【解决方案2】：

更多解释我所说的“我想要母版页”的意思我有 Layout.jshtml ，这是我的母版页

<html>
<head>
    <link rel="stylesheet" href="/stylesheets/style.css" ></link>

</head>
<body>

@writeBody();




</body>
</html>

我还有一个叫做 some.jshtml 的视图

<h1>@locals.title</h1>
<div class="Mydata">
@locals.content
@locals.otherContent
</div>

当我在浏览器中运行此页面时，我希望将 layout.jshtml 和 some.jshtml 连接起来。 some.jshtml 的内容在 writeBody() 中渲染；在 layout.jshtml 中

当我谈到串联时，我指的是这样的事情。这是我可以在浏览器中看到的结果。

<html>
<head>
    <link rel="stylesheet" href="/stylesheets/style.css" ></link>

</head>
<body>

<h1>title</h1>
<div class="Mydata">
content
otherContent
</div>

</body>
</html>

【讨论】：