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のすばらしい答えに加えて、次のようにすることもできます：

この 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 に答える