1

目前使用 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只是{{> sidebar}}用 14 个不同的侧边栏替换。

4

1 回答 1

3

唯一 ID

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

如果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 。

组装选项

确保通过在选项中定义数据文件来告诉 Assemblesidebar.yml数据文件在哪里，例如：

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