Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Assemble: Multiple points of content insertion in layout?

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?

like image 550
Xavier_Ex Avatar asked Nov 05 '13 23:11

Xavier_Ex


People also ask

How do I insert multiple table of contents in Word?

Then go to the INSERT tab, click Quick Parts, and Field. Then scroll down and click TC. Type the name of the subsection, then check TC entry in doc with multiple tables. This will add a switch to the code – the \f switch – that enables us to add multiple Tables of Contents.

How do you insert contents in Word?

On the toolbar ribbon, select References. Near the left end, select Insert Table of Contents. (Or select Table of Contents > Insert Table of Contents. The table of contents is inserted, showing the headings and page numbering in your document.

What are the 4 types of section breaks?

The different kinds of section breaks include next page, continuous, even page, and odd page breaks. To learn more about the different kinds of page and section breaks, see their separate headings below, where they are covered in greater detail.


1 Answers

@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.

like image 194
doowb Avatar answered Sep 17 '22 22:09

doowb