Simple guide for using Eleventy with Handlebars

[chasedenecke]

[zachleat]

You should be able to put any handlebars syntax (http://handlebarsjs.com/) in a .hbs file and Eleventy will process it! That’s the super simple guide :)

What kinda stuff are you looking for?

[chasedenecke]

I've got this big static site that's currently being generated with vuepress and I'm trying to deploy it with 11ty and Handlebars. The tutorials I've found so far are nice very basic intros but really give no guidance on how to do the type of stuff I want to do. There is lots of other documentation, but I don't feel like I have the foundation to understand it. In other words, I feel like there's a bit of a gap in the tutorials: the very simple stuff for brand new users trying to make a simple site is good. And the detailed info for people who already know what they are doing is good. But the documentation for intermediate users like myself feels like it's missing.

…

On Thu, Nov 14, 2019 at 3:27 PM Zach Leatherman ***@***.***> wrote: You should be able to put any handlebars syntax (http://handlebarsjs.com/) in a .hbs file and Eleventy will process it! That’s the super simple guide :) What kinda stuff are you looking for? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#10?email_source=notifications&email_token=AKJYFTSPXWFPRS5A53UZBSLQTXNG5A5CNFSM4JNPPUNKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEDWKCQ#issuecomment-554132746>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKJYFTWB3EAMDNAHGCALS6TQTXNG5ANCNFSM4JNPPUNA> .

[zachleat]

the type of stuff I want to do

Ah, can you elaborate there?

[koitaki]

Zach, wondering if I may add a comment to help elaborate on the difference lacking from beginner blogs to more detailed sites, where I struggled with the existing online documentation.

Say a site has several collections with posts in them (eg. Dogs, Cats).
Ideally, for DRY purposes, you'd have one template handling the listing of both of them.
Eg. layouts/collection.hbs

But how would one pass in the required collection? Eg.
{% for post in collections.["collection-required"] %}
<a href="{{post.data.url}}>{{ post.data.title }}
{% endfor %}

The documentation for that seems a bit hazy once you've got past the basic blog.
Eg. set up a collection filter in .eleventy.js and somehow refer to them in the templates?

More likely my obtuseness, but that sort of stuff makes the wheels spin for a while.

For what its worth, my current workaround is:
• Each collection has its own index.hbs, and they loop through their collection
• Those index.hbs files then refer to the layout _includes/layout/collections.hbs
(which itself refers to to base layout)

But obviously each individual collection index with a loop is not a particularly DRY solution.

EDIT: I saw an answer that helped with this, and added my solution to:
11ty/eleventy#296

[ronykris]

HI Zach,

Awesome tutorials. It got me running in practically no time. Thank you!

So, this is what I'm trying to do -
I am want to build my 11ty blog with the Casper theme that comes along with Ghost (I don't want to use ghost) and also integrate a digital garden. While I found a repo for the digital garden, I haven't found anything that'll help me integrate the casper theme into 11ty.

Therefore, is this something you can assist me with? Some pointers would help.
Thinking loud, is there a way to convert hbs to njk?

Thank you!