1

現在、Assemble を使用してハンドルバーを介して静的 HTML ファイルを作成しています。

以下に default.hbs を定義しました。

<!doctype html>
    <html class="no-js" lang="en">
    <head>
        {{> head }}
    </head>
<body class="{{page.basename}}">
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <!-- Off Canvas Menu -->
    {{> mobile-nav}}
    <!-- END Off Canvas Menu -->

    <!-- Header -->
    {{> header }}
    <!-- END Header -->

    <!-- Navigation -->
    {{> navigation }}
    <!-- END Navigation -->

    <div class="container">
      <div class="row collapse" id="bcrumbs">
        {{> breadcrumbs }}
      </div>
      <!-- END breadcrumbs -->

      <div class="row collapse" id="body">
        <div class="row">
          <div class="small-12 medium-10 medium-push-2 columns" id="main-content">
            {{> body }}
          </div>
          <!-- END Main Content -->
          <div class="small-12 medium-2 medium-pull-10 columns" id="sidebar">
            {{> sidebar }}
          </div>
          <!-- END Sidebar -->
        </div>
      </div>
      <!-- END #body -->
    </div>
    <!-- END site body -->

    <!-- Footer -->
    {{> footer }}
    <!-- END Footer -->

    <!-- close the off-canvas menu -->
    <a class="exit-off-canvas"></a>
    </div> <!-- END off-canvas inner-wrap -->
</div><!-- END off-canvas wrap -->  

<!-- Load body scripts -->
{{> javascripts }}

このレイアウトは、ホームページを除いてプロジェクト全体で使用されます。私が回避しようとしている「落とし穴」は、sidebar.hbsパーシャルがサイドバーに異なるコンテンツ/リンクを持つことです。基本的に、サイドバーについて変更されるのは in のコンテンツだけです。

参照用の Sidebar.hbs:

<ul class="side-nav">
    <li class="heading">Learn About GeneAware</li>
    <li><a href="#">Definition Glossary</a></li>
    <li><a href="#">Diseases &amp; Disorders Search</a></li>
    <li><a href="#">Next Steps</a></li>
</ul>

私が避けようとしているのは、14 の異なるサイドバーdefault.hbsに置き換えるためだけに複製することです。{{> sidebar}}

4

1 に答える 1

3

一意の ID

これは1つの戦略にすぎませんが、簡単です。各ページの YAML フロントマターに一意の識別子を配置すると、後で役立ちます。titleこれは、プロパティまたはその他のコンテンツを追加するときに簡単に実行できます。slugパーマリンクや条件付きハンドルバー式などで使用できるため、使用するのに適してslugいます。パーマリンクになる可能性がある場合は、スペースを入れず、小文字にし、アンダースコアではなくダッシュを使用する必要があります。

slugうまくいかない場合は、意味のあるものを使用しますが、おそらくbasenameこの目的には適してindexいません。複数のファイルに属している可能性があり、次のようなプロパティtitleが文である可能性があります。

YAML フロントマター

以下をaboutページに追加します。

---
title: About
slug: about
---

<h1>{{title}}</h1>

実際のsidebarパーシャル

という名前のファイルにsidebar.hbs、次のようなものを追加します。

<ul class="side-nav">
{{#each .}}
  {{! `slug` is our unique identifier for each page }}
  {{#is @root.page.slug slug}}
    {{#links}}
      {{#if separator}}
      <li class="divider"></li>
      {{else}}
      <li{{#if modifier}} class="{{modifier}}"{{/if}}>
        {{#if link}} <a href="{{url}}">{{text}}</a> {{else}} {{text}} {{/if}}
      </li>
      {{/if}}
    {{/links}}
  {{/is}}
{{/each}}
</ul>

sidebarパーシャルを使う

サイドバーを挿入するレイアウトに以下を追加します。ブロック ヘルパーはisnt、サイドバーが表示されるべきでないページにサイドバーが表示されないようにします。

{{#isnt slug 'home'}}
  {{> sidebar sidebar }}
{{/isnt}}

もう 1 つの方法は、サイドバーをいつ使用するかを決定するために使用される YAML フロントマターにプロパティを追加することです。何かのようなもの：

{{#if sidenav}}
  {{> sidebar sidebar }}
{{/if}}

そして、前の問題で：

---
title: About
slug: about
sidenav: true
---

<h1>{{title}}</h1>

これはバランスです。この戦略をすべてに使用し始めると、手に負えなくなる可能性があります。

サイドバー データ ファイル

次に、ファイルを作成しsidebar.yml、次を追加します (明らかに独自のデータを使用)。

# About page
- slug: about
  links:
  - modifier: heading
    link: true
    url:  '#'
    text: Learn About GeneAware
  - link: true
    url:  '#'
    text: 'Diseases & Disorders Search'
  - separator: true
  - link: true
    url:  '#'
    text: Next Steps

# Contact page
- slug: contact
  links:
  - modifier: heading
    link: true
    url:  '#'
    text: Foo
  - link: true
    url:  '#'
    text: Bar
  - separator: true
  - link: true
    url:  '#'
    text: Baz

JSON を好む場合は、 https ://gist.github.com/jonschlinkert/f8cd6c777ca0c20d63ff を選択できるようにまとめました。

オプションを組み立てる

sidebar.ymlオプションでデータ ファイルを定義して、Assemble にデータ ファイルの場所を伝えてください。

options: {
  data: ['data/sidebar.yml']
}
于 2014-07-12T00:17:43.333 に答える