Closed lubomirblazekcz closed 8 years ago
You can absolutely do that with gulp-hb
and handlebars-layouts
. I did something very similar to that recently for a styleguide:
---
title: Styleguide
styles:
- /assets/styles/docs.css
categories:
- title: Configuration
partials:
- src/assets/styles/config/vars
- src/assets/styles/config/media
- title: Typography
partials:
- src/styles/objects/semantic
- title: Objects
partials:
- src/styles/objects/aspect
---
{{#extend "layouts/doc"}}
{{#content "main"}}
{{#each categories}}
<section class="doc">
<h1>{{title}}</h1>
{{#each partials}}
<article>
{{{embed .}}}
</article>
{{/each}}
</section>
{{/each}}
{{/content}}
{{/extend}}
I'll try to get you a more complete example tonight or tomrrow, but it's basically using the // Advanced
example from the README
plus the front-matter
example a little further down.
Or so:
pages/about.hbs
---
title: About Us
page: about
blocks: ['article', 'callback', 'promo']
---
{{#extend "layouts/base"}}
{{#content "content"}}
{{#contains blocks "article"}}
{{> blocks/article}}
{{/contains}}
{{/content}}
{{/extend}}
layouts/base.hbs
<!DOCTYPE html>
<html lang="ru-RU">
{{> blocks/head}}
<body>
{{> blocks/header}}
{{#contains blocks "promo"}}
{{> blocks/promo}}
{{/contains}}
<main class="main">
{{{ block "content" }}}
</main><!-- end .main -->
{{#contains blocks "callback"}}
{{> blocks/callback}}
{{/contains}}
{{> blocks/footer}}
</body>
</html>
The helper 'contains' is sort of https://github.com/assemble/handlebars-helpers/blob/master/lib/helpers/helpers-comparisons.js#L16
thanks for the tips! I will be switching from gulp-compile-handlebars to gulp-hb in the near future, so this really helps!
@evromalarkey Were you able to get this working, or did you still want a more complete example?
Marking as closed for now. Feel free to reopen.
Hello,
I'm currently using gulp-compile-handlebars and I'm looking for alternative, the thing I want to, is using same layout for different pages. Example:
Where _{{> "core/template"}} should be dynamic and rendering different partials per pages. Eg. homepage would render partials - slider, images, boxes and otherpage would render partials - text, form, info. I want to load dynamic partials per page and define all this in data .json file.
I want to avoid a big .hbs file where I have 20 if's on different pages with hundred of partials, I want to move all this into json file. Eg.: (this is how I have it now and if there 20 pages, it's a mess)
Is this something that is already possible to do with gulp-hb with handlebars-layouts? If so, could you give me a little example? When I was looking for alternative I've found the gulp-hb and assemble, so I'm wondering what would be the best option here.
Any help appreciated!