Assemble page with multiple named sections

127 views Asked by At

Using Assemble and Handlebars, is it possible to break a page up into named sections, and have each section append into an area of the parent layout? A lot like how Asp.net MVC does @section IM_A_SECTION {} and then @RenderSection("IM_A_SECTION").

Page.hbs would look like

---
layout: layout.hbs
---
{{#content "head"}}
    Header stuff goes here
{{/content}}
{{#content "body"}}
    Body stuff goes here
{{/content}}

And layout.hbs would be

<html>
     <head>
         {{>head}}  
     </head> 
     <body>
         {{>body}}  
     </body> 
</html>

I can get something like this to work using Handlebars in Nodejs, but not in Assemble.

Edit :

Based on doowb's answer the following solves the above.

Page.hbs :

{{#extend "layout"}}
    {{#content "head"}}
        Header stuff goes here
    {{/content}}
    {{#content "body"}}
        Body stuff goes here
    {{/content}}
{{/extend}}

And layout.hbs :

<html>
     <head>
         {{#block "head"}}{{/block}}
      </head>
     </head> 
     <body>
         {{#block "body"}}{{/block}}
     </body> 
</html>

And in gruntfile.js, in the assemble task, add the layout folder to the partials folder list.

assemble: {
    options: {
        partials: ['src/partials/**/*.hbs', 'src/layouts/**/*.hbs']
    }
}

Hope someone else finds this useful.

1

There are 1 answers

1
doowb On BEST ANSWER

Take a look at this question: Assemble: Multiple points of content insertion in layout?

It has information on how to use the helper layouts in assemble v0.4.x. These will still be available in assemble v0.6.0 but we'd like to be able to support more options for built-in layouts.