Assemble.io (handlebars.js) 部分 Context/Variables
Assemble.io (handlebars.js) Partials Context/Variables
不确定把手的使用是否合适 - 我一直在网上搜索,但没有找到太多答案。无论如何,我正在使用 assemble.io 并尝试设置一个部分以在我的站点周围重复。我的 /partials 目录中有一个 moduleResources.hbs。在里面我有这个代码:
<div class="dvp-content-well">
<div class="content-well-inner">
<h4>Related Resources</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 3</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 1</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 2</a></li>
</ul>
</div>
</div>
该代码块可以在一个页面上被调用一到两次。 基本上,我需要做的是动态更改 <h4>
和 <ul>
的内容。并希望在页面上调用部分时我可以这样做。所以喜欢 {{> moduleResources relatedResources }}
就像在局部中包含所有 HTML 但根据上下文更改它,例如:
<div class="dvp-content-well">
<div class="content-well-inner">
<!-- IF Related -->
<h4>Related Resources</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3</a></li>
</ul>
<!-- If Mentioned -->
<h4>Resources Mentioned in this Article</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3/a></li>
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 4</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 5</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 6</a></li>
</ul>
</div>
</div>
我最初设置了像 resources-title: Related Resources
这样的 YAML 变量,但你可以看到我是否使用了该模块两次,并且每个版本都需要有不同的标题(和 ul 内容)......然后呢?
对于 handlebars/assemble 这甚至是一个合理的使用场景吗?
谢谢!
我认为你的想法是正确的。您可以将不同的上下文传递给部分,并使用把手模板根据上下文填充 html。您甚至可能想将其拆分成更小的部分:
{{!list-item.hbs}}
<li><i class="fa-li fa fa-{{icon}}"></i><a href="{{url}}">{{text}}</a></li>
{{!list.hbs}}
<ul class="fa-ul">
{{#each items}}{{> list-item . }}{{/each}}
</ul>
{{!resources.hbs}}
<div class="dvp-content-well">
<div class="content-well-inner">
<h4>{{title}}</h4>
{{> list .}}
</div>
</div>
{{!my-page.hbs}}
{{> resources resources.related}}
{{> resources resources.mentioned}}
# resources.yml
related:
title: Related Resources
items:
-
icon: file-o
url: "#"
text: List Item 1
-
icon: play-circle-o
url: "#"
text: List Item 2
-
icon: fa-cog
url: "#"
text: List Item 3
mentioned:
title: Resources Mentioned in this Article
-
icon: file-o
url: "#"
text: List Item 1
-
icon: play-circle-o
url: "#"
text: List Item 2
-
icon: fa-cog
url: "#"
text: List Item 3
-
icon: file-o
url: "#"
text: List Item 4
-
icon: play-circle-o
url: "#"
text: List Item 5
-
icon: fa-cog
url: "#"
text: List Item 6
不确定把手的使用是否合适 - 我一直在网上搜索,但没有找到太多答案。无论如何,我正在使用 assemble.io 并尝试设置一个部分以在我的站点周围重复。我的 /partials 目录中有一个 moduleResources.hbs。在里面我有这个代码:
<div class="dvp-content-well">
<div class="content-well-inner">
<h4>Related Resources</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 3</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 1</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 2</a></li>
</ul>
</div>
</div>
该代码块可以在一个页面上被调用一到两次。 基本上,我需要做的是动态更改 <h4>
和 <ul>
的内容。并希望在页面上调用部分时我可以这样做。所以喜欢 {{> moduleResources relatedResources }}
就像在局部中包含所有 HTML 但根据上下文更改它,例如:
<div class="dvp-content-well">
<div class="content-well-inner">
<!-- IF Related -->
<h4>Related Resources</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3</a></li>
</ul>
<!-- If Mentioned -->
<h4>Resources Mentioned in this Article</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3/a></li>
<li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 4</a></li>
<li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 5</a></li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 6</a></li>
</ul>
</div>
</div>
我最初设置了像 resources-title: Related Resources
这样的 YAML 变量,但你可以看到我是否使用了该模块两次,并且每个版本都需要有不同的标题(和 ul 内容)......然后呢?
对于 handlebars/assemble 这甚至是一个合理的使用场景吗?
谢谢!
我认为你的想法是正确的。您可以将不同的上下文传递给部分,并使用把手模板根据上下文填充 html。您甚至可能想将其拆分成更小的部分:
{{!list-item.hbs}}
<li><i class="fa-li fa fa-{{icon}}"></i><a href="{{url}}">{{text}}</a></li>
{{!list.hbs}}
<ul class="fa-ul">
{{#each items}}{{> list-item . }}{{/each}}
</ul>
{{!resources.hbs}}
<div class="dvp-content-well">
<div class="content-well-inner">
<h4>{{title}}</h4>
{{> list .}}
</div>
</div>
{{!my-page.hbs}}
{{> resources resources.related}}
{{> resources resources.mentioned}}
# resources.yml
related:
title: Related Resources
items:
-
icon: file-o
url: "#"
text: List Item 1
-
icon: play-circle-o
url: "#"
text: List Item 2
-
icon: fa-cog
url: "#"
text: List Item 3
mentioned:
title: Resources Mentioned in this Article
-
icon: file-o
url: "#"
text: List Item 1
-
icon: play-circle-o
url: "#"
text: List Item 2
-
icon: fa-cog
url: "#"
text: List Item 3
-
icon: file-o
url: "#"
text: List Item 4
-
icon: play-circle-o
url: "#"
text: List Item 5
-
icon: fa-cog
url: "#"
text: List Item 6