组装：布局中的多个内容插入点？答案

【问题标题】：Assemble: Multiple points of content insertion in layout?组装：布局中的多个内容插入点？
【发布时间】：2013-11-05 23:03:09
【问题描述】：

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

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

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

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

【问题讨论】：

标签： handlebars.js assemble

【解决方案1】：

@Xavier_Ex 查看组装车把助手 repo https://github.com/assemble/example-layout-helpers
还有这个特殊的拉取请求https://github.com/assemble/handlebars-helpers/pull/75

大约一个月前，我们添加了一些布局助手，允许您“扩展”布局并包含不同的内容部分。请注意，您必须将布局作为部分包含在 assemble 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/'
  }
}

布局（默认.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}}

希望这会有所帮助。

【讨论】：

谢谢，这正是我的意思。我很高兴有人真正理解我想要表达的意思。所以你们制作自定义助手意味着 Assemble 不支持这个开箱即用。
我认为您的链接指向一个空的示例存储库，我不确定是不是正确的...我做了一些谷歌搜索，最终在主车把助手存储库中找到了您的拉取请求并添加了链接。虽然没有记录帮助器，但也许您可以将文档添加到您是其作者的那些帮助器中。这些都是非常有用的帮手，感谢您添加它们：D
我注意到block helper有3种处理内容的模式，“append”、“prepend”和“replace”，默认是“replace”。如何以及在何处指定使用其他模式？？
您可以将模式添加到“哈希”... {{#content "script" mode="append"}} {{/content}} 编辑：我一直按“输入”
对，我刚刚想通了...但我意识到我想做的是，在一个布局中，我包含 2 个部分，它们都定义了一个需要包含的“脚本”块布局。现在后面的总是覆盖前面的，所以只包含一个脚本块......这样做的正确方法是什么？？