Login/Register
Assemble: Multiple points of content insertion in layout?
Asked Answered
Solved handlebars.jsassemble
B

1

5

All assemble users who uses layouts knows that "{{> body }}" marks the point of insertion of contents of any page who uses the layout. But is it possible to define multiple points of insertions, instead of tossing everything at where the {{> body }} is?

For instance, in my page I would like to define a specific piece of javascript, but I like that custom javascript to be at the very bottom of the page along with out javascript tags. If it only puts everything where the {{> body }} is, this is not possible, since the script will just be appended to the content.

In other words, it would be useful to have {{> script }} or even customizable tags marking different points of insertion, and in the page using the layout, these tags are specifically defined.

Above is my ideal use case, does anyone know if assemble supports anything like this?

Breslau answered 5/11, 2013 at 23:3 Comment(0)
M
10

@Xavier_Ex check out the assemble handlebars helper repo https://github.com/assemble/example-layout-helpers
And this particular pull request https://github.com/assemble/handlebars-helpers/pull/75

We added some layout helpers about a month ago that allow you to "extend" a layout and include different content sections. Notice that you'll have to include your layout as a partial in the assemble gruntfile setup for this to work properly...

assemble: {
  options: {
    flatten: true,
    assets: 'docs/assets',
    partials: ['src/includes/*.hbs', 'src/layouts/*.hbs'],
    layout: false,
    data: ['src/data/*.{json,yml}', 'package.json']
  },
  pages: {
    src: 'src/*.hbs',
    dest: 'docs/'
  }
}

Layout (default.hbs)...

<!DOCTYPE html>
<html lang="en">
  <head>
    {{#block "head"}}
    <meta charset="UTF-8">
    <title>{{title}} | {{site.title}}</title>
    <link rel="stylesheet" href="{{assets}}/{{stylesheet}}.css">
    <link rel="stylesheet" href="{{assets}}/github.css">
    {{/block}}
  </head>
  <body {{#is stylesheet "bootstrap"}}style="padding-top: 40px;"{{/is}}>

    {{#block "header"}}
    {{! Navbar
    ================================================== }}
    {{> navbar }}
    {{/block}}


    {{! Subhead
    ================================================== }}
    <header class="{{#is stylesheet "bootstrap"}}jumbotron {{/is}}{{#is stylesheet "assemble"}}masthead {{/is}}subhead">
      <div class="container">
        <div class="row">
          <div class="col col-lg-12">
            <h1> DOCS / {{#if title}}{{ uppercase title }}{{else}}{{ uppercase basename }}{{/if}} </h1>
          </div>
        </div>
      </div>
    </header>

    {{! Page content
    ================================================== }}
    {{#block "body"}}
    <div class="container">
      <div class="panel panel-docs">
        {{> body }}
      </div>
    </div>
    {{/block}}

    {{#block "script"}}
    <script src="{{assets}}/highlight.js"></script>
    <script src="{{assets}}/holder.js"></script>
    {{/block}}
  </body>
</html>

Some page

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

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

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

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

Hope this helps.

Matteson answered 7/11, 2013 at 1:31 Comment(7)
Thanks, this is exactly what I meant. I'm glad that somebody actually understands what I was trying to express. So you guys making custom helpers means Assemble doesn't support this out of the box. – Breslau
I think your link points to an empty example repo that I'm not sure is the right one... I did some googling and eventually found your pull request into the main handlebars-helper repo and added the link. The helper is not documented though, perhaps you can add the documentation to those helpers that you're the author of. Again these are insanely helpful helpers, thanks for adding them :D – Breslau
I noticed that the block helper has 3 modes of processing contents, "append", "prepend" and "replace" and the default is "replace". How and where do I specify using other modes?? – Breslau
You can add the mode to the "hash"... {{#content "script" mode="append"}} <script src="assets/js/analytics"></script> {{/content}} Edits: I keep hitting "enter" – Matteson
Right I just figured that out... But I realized what I wanted to do was that, in one layout I include 2 partials and they both define a "script" block that needs to be included into the layout. Right now the later one always overwrites the one comes earlier so only one script block is included... What's the correct way of doing this?? – Breslau
That's a good question. I don't think I thought of that use case of having the same block used from different partials. The way this helper works is that it's just defining the content of an "inline" partial, then injecting that content into the "block" defined in the layout. Would you open an issue on the handlebars-helpers repository with a couple of code snippets on how you're using this and request that when a "content" block is used more than once with the "append" or "prepend" mode, to add all of them together? This should give you your desired affect. – Matteson
this might be asking too much, but can this be used to extend multiple layouts. If I want several different layouts that pull 2 content blocks each from a series of different pages:) – Tearoom

© 2022 - 2024 — McMap. All rights reserved.