5

所有使用布局的 assemble 用户都知道“{{> body }}”标记了使用该布局的任何页面的内容插入点。但是是否可以定义多个插入点，而不是将所有内容都扔到 {{> body }} 所在的位置？

例如，在我的页面中，我想定义一段特定的 javascript，但我希望该自定义 javascript 与 javascript 标签一起位于页面的最底部。如果它只将所有内容放在 {{> body }} 所在的位置，这是不可能的，因为脚本只会附加到内容中。

换句话说，有 {{> script }} 甚至可自定义的标签来标记不同的插入点会很有用，并且在使用布局的页面中，这些标签是专门定义的。

以上是我理想的用例，有人知道 assemble 是否支持这样的东西吗？

4

1 回答 1

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.

于 2013-11-07T01:31:16.153 回答