6

如何使用布局、带有把手模板的部分，如下所示？

我查看了部分文档，但仍然无法弄清楚我想要实现的目标。

默认.html

站点的不同视图重用默认布局。{{{content}}}用作将呈现主要内容的占位符。

<!DOCTYPE html>
<html>
<head>  
  <title>{{title}}</title>
</head>
<body>
 <p>This is the top of the body content in the default.html file</p>
 {{{content}}}
 <p>This is the bottom of the body content in the default.html file</p>
</body>
</html>

索引.html

{{#> default}}

{{ include header }}
<p>This is some other content</p>
{{ include footer }}

header.html

<h1>This is a header</h1>

页脚.html

<p>This is a footer</p>

输出

<!DOCTYPE html>
<html>
<head>  
  <title>Using Layout, Partials with Handlebars Template</title>
</head>
<body>
 <p>This is the top of the body content in the default.html file</p>
 <h1>This is a header</h1>
 <p>This is some other content</p>
 <p>This is a footer</p>
 <p>This is the bottom of the body content in the default.html file</p>
</body>
</html>
4

2 回答 2

2

  • 首先要进行部分工作，首先删除 index.html 中部分调用前面的尖锐（#）。

    {{> 默认}}

  • 第二：您将无法使用把手构建整个页面（带有标题）：一旦页面加载，就会加载javascript，因此标题已经发送并且无法修改。Handlebars.js 仅在您想要操作 DOM 以将模板结果放入容器时才有用。

你有一个可以在这里做的例子： https ://jsfiddle.net/ChristopheThiry/zepk5ebh/4/

<script id="default" type="text/x-handlebars-template">
 <p>This is the top of the body content in the default.html file</p>
 {{{content}}}
 <p>This is the bottom of the body content in the default.html file</p>
</script>

<script id="index" type="text/x-handlebars-template">
{{include header }}
{{> default}}
{{include footer }}
</script>

<div id="resultPlaceholder">
</div>

$(document).ready(function () {
  var defaultSource   = $("#default").html();
  var indexSource = $("#index").html();
  Handlebars.registerPartial('default',defaultSource);
  Handlebars.registerHelper('include', function(source) {
        return new Handlebars.SafeString(source);
});
  var template = Handlebars.compile(indexSource);
  var context = { "content" : "<b>This is some other content</b>","header" : "<h1>This is a header</h1>", "footer" : "<div class='footer'>This is a footer</div>"} ;
  var html    = template(context);
  $("#resultPlaceholder").html(html);
});

我希望这个例子会有所帮助......

于 2016-09-26T09:10:26.227 回答
0

我知道这个问题已经过时了，但是我目前面临着同样的“问题”。

如果您对实现有疑问，请查看文档。

一个实现示例：

JS代码

import * as Handlebars from 'handlebars';
import * as path from 'path';

...

const partial_path = path.join(HBS, partial);
const { name } = path.parse(path.basename(partial_path));
Handlebars.registerPartial(name, readHbs(partial_path)); // readHBS only reads the file syncronously.

车把部分（基本文件）

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
    <style>
    </style>
  </head>
  <body>
    <main class="flexbox">
      <div class="flexbox container paper">{{> @partial-block }}</div>
    </main>
  </body>
</html>

车把模板

{{#> base extra_headers="" }}
<header style="width: inherit;">
  <h1 style="text-align: center;"> I'm your template </h1>
</header>
{{/base }}
于 2021-07-17T16:54:21.567 回答