How to insert html block in Handlebars partials - handlebars.js

Question

I use Handlebars for a simple Node.js project and I would like to insert more than just few variables in a partial.
I have a layout that contains the very basic frame of my html page (html and head tags). The pages I render are usually all the same and contain the following code:
{{> default/header
help_title="This is the title of my help modal."
help_body="<p>This is the body.</p>"
}}
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
<!-- THE CONTENT THERE -->
</div>
</div>
</div>
</main>
{{> default/footer}}
Depending on the page itself, I may want not to display the header and/or the footer (and I remove the line consequently).
My need: I'd like to wrap the main part in a partial (because everything but the <!-- THE CONTENT THERE --> is invariant) or whatever could do the job and providing to it not only few words (like in the header) but potentially a lot of html code. And I cannot find a way to do it in the documentation. Something like this, that would basically work a bit like layouts:
{{> default/main
<!-- THE RAW HTML CONTENT THERE -->
}}

Answer 1

Handlebars supports exactly what you are describing in the form of partial blocks. The default behavior of partial blocks is to render default content if the partial cannot be found. However, there is a special built-in helper, #partial-block which will inject content into your partial.
From the documentation:
This block syntax may also be used to pass templates to the partial, which can be executed by the specially named partial, #partial-block.
Inside your partial, you will add {{> #partial-block }} where you want the content to be injected. In your case, your "main" partial would look like:
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
{{> #partial-block }}
</div>
</div>
</div>
</main>
Then, the page that is calling the "main" partial would do using the block syntax with the content that is to be injected into the partial put inside of block tags:
{{#> main}}
<p>THE RAW HTML CONTENT HERE</p>
{{/main}}
I have created a fiddle for your reference.