4

我正在使用 assemble.io 来自动化我的前端开发,并希望使用 YAML 前端来创建一个简单的导航菜单。

我想要实现的 HTML 是这样的:

<li><a href="#link1">Link1</a></li>
<li><a href="#link2">Link2</a></li>

我认为正确的车把标记是这样的:

      {{#each sublinks}}
      <li><a href="#{{section}}">{{section}}</li>
      {{/each}}

但是什么是正确的 YFM?我从这个开始,但知道语法不正确:

---
sublinks:
  - section: link1, link2
---
4

2 回答 2

9

对于这样的模板:

{{#each sublinks}}
<li><a href="#{{section}}">{{section}}</li>
{{/each}}

您需要这样的数据结构:

sublinks = [
    { section: 'link1' },
    { section: 'link2' },
    //...
]

在 YAML 中,它看起来像:

sublinks:
  - section: link1
  - section: link2

您还应该能够使用此 YAML:

sublinks:
  - link1
  - link2

使用此模板:

{{#each sublinks}}
<li><a href="#{{.}}">{{.}}</li>
{{/each}}

您的 YAML 对应于这样的数据结构:

sublinks = [
    { section: 'link1, link2' }
]

除非您想'link1, link2'使用 Handlebars 助手拆分字符串,否则这并不是非常有用。

于 2013-09-01T20:30:14.223 回答
3

添加到@mu's great answer,你也可以这样做:

鉴于此 YAML 前沿问题:

---
sublinks:
  - href: link/to/foo
    text: Foo Text
  - href: link/to/bar
    text: Bar Text
  - href: link/to/baz
    text: Baz Text
---

您的模板将如下所示:

{{#each sublinks}}
  <li><a href="#{{href}}">{{text}}</a></li>
{{/each}}

请注意,YAML 规范还允许使用更类似于 JavaScript 对象的语法:

---
sublinks:
  - {href: link/to/foo, text: Foo Text}
  - {href: link/to/bar, text: Bar Text}
  - {href: link/to/baz, text: Baz Text}
---
于 2013-12-30T21:38:38.850 回答