Giters

shannonmoeller / gulp-hb

A sane Gulp plugin to compile Handlebars templates. Useful as a static site generator.

Home Page:http://npm.im/gulp-hb

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using same layout for different pages

lubomirblazekcz opened this issue · comments

commented

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:

<html class="no-js" lang="en">
{{> "layout/head"}}
<body class="preload">
     <div id="body">
        {{> "layout/header"}}
         <main id="page">
            {{> "_core/template"}}
         </main>
         {{> "layout/footer"}}
     </div>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js" defer></script>

    {{#each js as |url|}}
         <script type="text/javascript" src="{{url}}" defer></script>
     {{/each}}
 </body>
 </html>

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)

{{#if page_home}}
    {{> "partial/slider"}}
    {{> "partial/images"}}
    {{> "partial/boxes"}}
{{else if page_otherpage}}
    {{> "partial/text"}}
    {{> "partial/form"}}
    {{> "partial/info"}}
{{else if page_otherpage2}}
    {{> "partial/text"}}
    {{> "partial/form"}}
    {{> "partial/info"}}
{{else if page_otherpage3}}
    {{> "partial/text"}}
    {{> "partial/form"}}
    {{> "partial/info"}}
{{/if}}

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!

commented

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.

commented

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

commented

thanks for the tips! I will be switching from gulp-compile-handlebars to gulp-hb in the near future, so this really helps!

commented

@evromalarkey Were you able to get this working, or did you still want a more complete example?

commented

Marking as closed for now. Feel free to reopen.