Gruntjs 汇编：动态或条件分部_Gruntjs_Handlebars.js_Assemble

Gruntjs 汇编：动态或条件分部

gruntjs

Gruntjs 汇编：动态或条件分部,gruntjs,handlebars.js,assemble,Gruntjs,Handlebars.js,Assemble,目前正在使用Assembly通过手柄创建静态HTML文件我在下面定义了default.hbs： <!doctype html> <html class="no-js" lang="en"> <head> {{> head }} </head> <body class="{{page.basename}}"> <div class="off-canvas-wrap" data-offc

目前正在使用Assembly通过手柄创建静态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 }}

我试图避免的是复制

default.hbs

只是用14个不同的边栏替换

{{>sidebar}

。

唯一ID 这只是一个策略，但很简单。如果你在每一页的YAML首页上都放上一个唯一的标识符，那么以后它就会派上用场。当您添加

标题

属性或任何其他内容时，很容易做到这一点

slug

是一个很好的用法，因为它可以在permalinks或条件句柄表达式等中使用。

slug

应该没有空格，小写，如果可能在permalinks中结束，则使用破折号而不是下划线

如果

slug

不适合您，请使用任何有意义的方法，但是

basename

可能不是用于此目的的好方法b/c它可能是

index

，它可能属于多个文件，而像

title

这样的属性可能是一个句子

YAML锋物质将以下内容添加到

关于

页面：

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

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

使用

侧栏

部分将以下内容添加到希望插入侧栏的布局中。

isnt

块帮助器将确保侧边栏不会呈现在不应该有侧边栏的页面上

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

另一种方法是向YAML前端添加一个属性，用于决定何时使用边栏。比如：

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

在前面：

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

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

如果您喜欢JSON，我将其放在一起，以便您可以选择：

装配选项确保通过在选项中定义

侧边栏.yml

数据文件来告诉Assembly它在哪里，例如：

options: {
  data: ['data/sidebar.yml']
}

非常透彻的解释，非常感谢！现在就尝试一下，我会很快报告反馈！运行每一步，决定json格式，没有错误，但页面返回链接所在的空白。

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

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

# 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

options: {
  data: ['data/sidebar.yml']
}