组装：动态或条件部分答案

【问题标题】：Assemble: Dynamic or Conditional Partials组装：动态或条件部分
【发布时间】：2014-07-11 19:48:29
【问题描述】：

目前使用 Assemble 通过 Handlebars 创建静态 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>

我要避免的是复制 default.hbs 只是为了用 14 个不同的侧边栏替换 {{> sidebar}}。

【问题讨论】：

标签： gruntjs handlebars.js assemble

【解决方案1】：

唯一 ID

这只是一种策略，但很简单。如果你在每个页面的 YAML front-matter 中放置一个唯一标识符，它稍后会派上用场。当您添加 title 属性或任何其他内容时，这很容易完成。 slug 是一个很好的使用方法，因为它可以在永久链接或条件句柄表达式等中使用。slug 应该没有空格，是小写的，如果它可能最终出现在永久链接中，则使用破折号而不是下划线。

如果slug 不适合您，请使用任何有意义的方法，但basename 可能不是一个好的用于此目的的 b/c 它可能是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}}

另一种方法是向 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']
}

【讨论】：

非常详尽的解释，非常感谢！立即尝试，我会尽快报告反馈！
跑完每一步，决定json格式，没有错误，但是页面返回链接应该是空白的空间。