汇编：动态或条件部分

时间：2014-07-11 19:48:30

标签： gruntjs handlebars.js assemble

目前正在使用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部分将在侧边栏中有不同的内容/链接。基本上，关于侧边栏的所有改变都是内容。

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}}。

1 个答案:

答案 0 :(得分：3)

唯一ID

这只是一种策略，但很简单。如果您在每个页面的YAML前端放置一个唯一标识符，它将在以后派上用场。添加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']
}
相关问题
最新问题