是否存在相当于Jades扩展的Handlbars

时间:2015-10-09 16:20:40

标签: express handlebars.js pug

我正在考虑将我的快递应用程序的诱惑语言从Jade移到Handlbars,我想知道是否有相当于手柄中的Jade扩展指令。

2 个答案:

答案 0 :(得分:3)

正如我所看到的,在把手存储库中告诉您存在一个可以让您扩展块的把手存在依赖关系。您可以找到更多信息herehere

<强> 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。需要把手把手布局
2.将把手作为布局注册在车把中 3.注册partials将文件 layout.hbs 设置为&#34;模块&#34;调用&#39; layout&#39;,然后在page.html中设置扩展名&#39; layout&#39; 4.在模板中编译扩展名 page.html 5.渲染模板将数据从js传递到文件。

答案 1 :(得分:0)

对于那些正在寻找 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