是否有相当于 Jade 扩展的车把

Question

我正在考虑将我的 express 应用程序的诱人语言从 Jade 转移到 Handlbars，我想知道在 handlebars 中是否有与 Jade extend 指令等效的指令。

Answer 1

如我所见，在 handlebars 的存储库中告诉您存在一个 handlebars 依赖项，可以使您扩展块。您可以找到更多信息 here and here。

layout.hbs

<!doctype html>
<html lang="en-us">
<head>
    {{#block "head"}}
        <title>{{title}}</title>

        <link rel="stylesheet" href="assets/css/screen.css" />
    {{/block}}
</head>
<body>
    <div class="site">
        <div class="site-hd" role="banner">
            {{#block "header"}}
                <h1>{{title}}</h1>
            {{/block}}
        </div>

        <div class="site-bd" role="main">
            {{#block "body"}}
                <h2>Hello World</h2>
            {{/block}}
        </div>

        <div class="site-ft" role="contentinfo">
            {{#block "footer"}}
                <small>&copy; 2013</small>
            {{/block}}
        </div>
    </div>

    {{#block "foot"}}
        <script src="assets/js/controllers/home.js"></script> 
    {{/block}}
</body>
</html>

这里我们定义了一个基本布局，您可以从中扩展其他布局html。

page.html

{{#extend "layout"}}
    {{#content "head" mode="append"}}
        <link rel="stylesheet" href="assets/css/home.css" />
    {{/content}}

    {{#content "body"}}
        <h2>Welcome Home</h2>

        <ul>
            {{#items}}
                <li>{{.}}</li>
            {{/items}}
        </ul>
    {{/content}}

    {{#content "foot" mode="prepend"}}
        <script src="assets/js/analytics.js"></script>
    {{/content}}
{{/extend}}

在此文件中，您可以设置要从布局扩展的所有数据。

.js 文件

var handlebars = require('handlebars');
var layouts = require('handlebars-layouts');

// Register helpers 
handlebars.registerHelper(layouts(handlebars));

// Register partials 
handlebars.registerPartial('layout', fs.readFileSync('layout.hbs', 'utf8'));

// Compile template 
var template = handlebars.compile(fs.readFileSync('page.html', 'utf8'));

// Render template 
var output = template({
    title: 'Layout Test',
    items: [
        'apple',
        'orange',
        'banana'
    ]
});

1。需要 handlebars 和 handlebars-layout
2.将车把中的助手注册为布局。
3. Register partials 将文件 layout.hbs 设置为名为 'layout' 的 "module"，然后在 page.html 中设置扩展名 'layout' 4. 在模板中编译扩展page.html.
5.渲染模板将数据从js传递给文件。

Answer 2

对于那些正在寻找 webpack 解决方案的人。我在配置中留下了一段代码：

webpack.config.js

...
const fs = require("fs")
const HandlebarsPlugin = require("handlebars-webpack-plugin")
const HandlebarsLayouts = require('handlebars-layouts');

module.exports = {
    ...,
    plugins: [
        ...,
        new HandlebarsPlugin({
            ...,
            onBeforeSetup: function(Handlebars){
                Handlebars.registerHelper(HandlebarsLayouts(Handlebars));
                Handlebars.registerPartial('default', fs.readFileSync('path/to/layout.hbs', 'utf8'));
            }
        })
    ]
}

参考文献：

Handlebars Webpack Plugin

Handlebars Layouts

是否有相当于 Jade 扩展的车把

Is there a Handlbars equivalent to Jades extend

express

handlebars.js

pug