Question

使用布局的所有汇编用户都知道“{{＆gt; body}}”标记了使用布局的任何页面内容的插入点。但是有可能定义多个插入点，而不是将所有内容扔到{{＆gt; body}}是？

例如，在我的页面中，我想定义一个特定的javascript，但我喜欢自定义的javascript位于页面的最底部以及javascript标签。如果它只将所有内容放在{{＆gt; body}}，这是不可能的，因为脚本只会被附加到内容中。

换句话说，拥有{{＆gt;脚本}}甚至是可自定义的标记，标记不同的插入点，并且在使用布局的页面中，这些标记是专门定义的。

以上是我理想的用例，有人知道汇编是否支持这样的事情？

Answer 1

@Xavier_Ex检查装配把手助手回购https://github.com/assemble/example-layout-helpers
这个特殊的拉取请求https://github.com/assemble/handlebars-helpers/pull/75

我们在一个月前添加了一些布局助手，允许您“扩展”布局并包含不同的内容部分。请注意，您必须将您的布局作为部分包含在汇编gruntfile设置中才能使其正常工作...

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/'
  }
}

布局（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>

一些页面

{{#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}}

希望这有帮助。

汇编：布局中插入多个内容点？

1 个答案: