汇编：在布局中插入多个内容点？ [英] Assemble: Multiple points of content insertion in layout?
问题描述
例如，在我的页面中，我希望来定义一段特定的javascript，但我喜欢那个自定义的javascript，并且在javascript页面的最底部。如果它只把{{> body}}放在哪里，这是不可能的，因为脚本将被附加到内容中。
换句话说，让{{> script}}或者甚至可定制的标签标记不同的插入点是很有用的，并且在使用布局的页面中，这些标签是特别定义的。
上面是我的理想用例，有谁知道如果汇编支持类似这样的东西？
@Xavier_Ex检出汇编手柄条帮手回购 https://github.com/assemble/example-layout-helpers
这个特殊的拉取请求 https://github.com/assemble/handlebars-helpers/pull/75
我们在一个月前添加了一些布局助手，允许您扩展布局并包含不同的内容部分。请注意，您必须在汇编gruntfile设置中将您的布局包含为部分内容才能正常工作......
$ b
汇编：{
options：{
flatten：true，
assets：'docs / assets'，
partials：['src / includes / * .hbs'，'src / layouts / *。hbs']，
layout：false，
data：['src / data / *。{json，yml}'，'package.json']
}，
页：{
src：'src / *。hbs'，
dest：'docs /'
}
}
Layout（default.hbs）...
<！DOCTYPE html>
< html lang =en>
< head>
{{#blockhead}}
< meta charset =UTF-8>
< title> {{title}} | {{site.title}}< /标题>
< link rel =stylesheethref ={{assets}} / {{stylesheet}} .css>
< link rel =stylesheethref ={{assets}} / github.css>
{{/ block}}
< / head>
< body {{#is stylesheetbootstrap}} style =padding-top：40px;{{/ is}}>
{{#blockheader}}
{{！ Navbar
============================================= =====}}
{{> navbar}}
{{/ block}}
{{！分目
============================================= =====}}
< div class =row>
< div class =col col-lg-12>
< h1> DOCS / {{#if title}} {{uppercase title}} {{else}} {{uppercase basename}} {{/ if}}< / h1>
< / div>
< / div>
< / div>
< / header>
{{！页面内容
============================================ ======}}}
{{#blockbody}}
< div class =container>
< div class =panel panel-docs>
{{> body}}
< / div>
< / div>
{{/ block}}
{{#blockscript}}
< script src ={{assets}} / highlight.js>< ; /脚本>
< script src ={{assets}} / holder.js>< / script>
{{/ block}}
< / body>
< / html>
某页
{{＃extenddefault}}
{{#contenthead}}
< link rel =stylesheethref =assets /css/home.css/>
{{/ content}}
{{#contentbody}}
< h2>欢迎回家< / h2>
< ul>
{{#items}}
< li> {{。}}< / li>
{{/ items}}
< / ul>
{{/ content}}
{{#contentscript}}
< script src =assets / js / analytics.js>< /脚本>
{{/ content}}
{{/ extend}}
这有助于。
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?
@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.
这篇关于汇编：在布局中插入多个内容点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
