Instantly share code, notes, and snippets.

Embed
What would you like to do?

Basic Example of using Assemble

Layout

Create a page named layout.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
  </head>
  <body>
  <!-- conditionally `button` when `foo` is true -->
  {{#if foo}}
    {{> button }}
  {{/if}}
  <body>
    {% body %}
  </body>
</html>

Then tell Assemble where to find it:

assemble.layouts('templates/layouts/*.hbs');

Page

Create a page named foo.hbs or whatever you want:

---
layout: default
foo: true
---

This is a random page. We could put the “if” block here 
instead of the layout. Whatever makes sense for your project.
We’ll tell assemble how to find pages in the task defined below.  

Partial

Create a partial named button.hbs:

<button>Click me!!!</button>

then tell Assemble where to find it:

assemble.partials('templates/partials/*.hbs');

All together

Run assemble

var assemble = require('assemble');
var extname = require('gulp-extname');

assemble.partials('templates/partials/*.hbs');
assemble.layouts('templates/layouts/*.hbs');

assemble.task('default', function () {
  assemble.src('templates/*.hbs')
    .pipe(extname())
    .pipe(assemble.dest('.'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment