Javascript 模板把手中的模板_Javascript_Jquery_Node.js_Handlebars.js

Javascript 模板把手中的模板

javascript jquery node.js

Javascript 模板把手中的模板,javascript,jquery,node.js,handlebars.js,Javascript,Jquery,Node.js,Handlebars.js,我正在开发一个NodeJs应用程序，带有express和把手。我想要的是，我可以重用一些部分，比如页眉和页脚元素所以我想，我选择了“基本”html。并通过手柄在其中拍摄所需的html元素我的index.js中有这个： const functions = require('firebase-functions'); const express = require('express'); const engines = require('consolidate'); const app = e

我正在开发一个NodeJs应用程序，带有express和把手。我想要的是，我可以重用一些部分，比如页眉和页脚元素

所以我想，我选择了“基本”html。并通过手柄在其中拍摄所需的html元素

我的index.js中有这个：

const functions = require('firebase-functions');
const express = require('express');
const engines = require('consolidate');

const app = express();
app.engine('hbs', engines.handlebars);
app.set('views', './views');
app.set('view engine', 'hbs');

app.get('/activiteiten', (request, response) => {

    // var test = require('./views/dayCard.hbs');
    // var data = {display_name: "hi"};
    // var theCompiledHtml = test(data);

    response.render('index', {
        menu_item: "Mijn Dashboard",
        menu_sub: "Activiteiten"
        //content: theCompiledHtml

    });
});


exports.app = functions.https.onRequest(app);

这和预期的一样。但是我想给它添加更多的数据。因此，我在模板中创建了内容标签。除此之外，我还将html添加到dayCard.hbs中

Daycard.hbs：

<div class="col-xs-12 col-md-6 col-lg-3">
    <div class="card-deck text-center">
        <div class="card box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{display_name}}</h4>
            </div>

            <div class="card-body">
            </div>
        </div>
    </div>
</div>


{{display_name}}

我想使用该文件，在其中添加一些数据。并将整个包附加到内容标签。所以一种模板变成了一种模板。我该怎么做

如果您要有多个分部，您可能应该设置这样的结构

- views
  - layouts
      layout.hbs //your html boilerplate layout
  - partials
      header.hbs
      footer.hbs
  index.hbs

在

index.js

中，使用默认布局设置视图引擎

    // View Engine
    app.set('views', path.join(__dirname, 'views'));
    app.engine('handlebars', expressHandlebars({ defaultLayout: 'layout' }));
    app.set('view engine', 'handlebars');

然后在

layout.hbs

文件中，您可以使用部分语法，例如Daycard.hbs

{{>Daycard}

   <!DOCTYPE html>
     <html>
     <head></head>
       <body>
         {{> navbar}}
         {{{body}}}  //which will render the contents of index.hbs
         {{> footer}}
       </body>
    </html>


{{>navbar}
{{{body}}}//，它将呈现index.hbs的内容
{{>页脚}

如果您要有多个分部，您可能应该设置这样的结构

- views
  - layouts
      layout.hbs //your html boilerplate layout
  - partials
      header.hbs
      footer.hbs
  index.hbs

在

index.js

中，使用默认布局设置视图引擎

    // View Engine
    app.set('views', path.join(__dirname, 'views'));
    app.engine('handlebars', expressHandlebars({ defaultLayout: 'layout' }));
    app.set('view engine', 'handlebars');

然后在

layout.hbs

文件中，您可以使用部分语法，例如Daycard.hbs

{{>Daycard}

   <!DOCTYPE html>
     <html>
     <head></head>
       <body>
         {{> navbar}}
         {{{body}}}  //which will render the contents of index.hbs
         {{> footer}}
       </body>
    </html>


{{>navbar}
{{{body}}}//，它将呈现index.hbs的内容
{{>页脚}