Re-using the same layout.hbs without spamming my content files with {{> layout}} #1788
Replies: 2 comments
-
Okay I found a solution. Please let me know if there is a better way of doing this. We can effectively thing of the layout file as being the below, obviously we can do w.e we like in this file. But the main aim here is to get it to load the content from somewhere else. For the partials (part of a html page not the HBS partial concept). Then use compile twice, once for the inner content where the content contains export const getHtmlForTemplate = async (templateName: string, context: object): Promise<string> => {
// get's the string content of the file by the templateName
const partialSource = await getHtmlForPartial(templateName);
try {
const template = Handlebars.compile(partialSource);
const partialTemplate = template(context);
return getLayoutHtmlForTemplate(partialTemplate);
} catch (error) {
// Error parsing the template with the provided context
throw new Error(error)
}
} Notice how the content being returned here is first parse through I then feed it through in much the way way. export const getLayoutHtmlForTemplate = async (partialTemplate: string): Promise<string> => {
// first get the layouts file content
const layoutSource = await getHtmlForLayout();
try {
const template = Handlebars.compile(layoutSource)
// process the layout template and place all of the content from the above function inside it. This will be rendered using the escape syntax `{{{ }}}` based on the `layout.hbs` file above.
return template({ content: partialTemplate });
} catch (error) {
// Error parsing the template with the provided context
throw new Error(error)
}
} Is there a better way than just double feeding? This seems fine, I pick up on the usage of |
Beta Was this translation helpful? Give feedback.
-
I believe a new method assemblePartials() can make it easy, please check out my feature request: |
Beta Was this translation helpful? Give feedback.
-
Before filing issues, please check the following points first:
This will probably help you to get a solution faster.
For bugs, it would be great to have a PR with a failing test-case.
Hi, I would like to do something like what this guy has done.
#1343
Specifically having a
layout.hbs
file for the layout (use case is sending emails). Then for each of the emails I want to trigger sayregister.hbs
I then want to render register which is a section of the full HTML document nested inside the layouts file every time.register.hbs
newsLetter.hbs
e.t.c.layout.hbs
and with a dynamic partial and then register every single one of my content files.Both of these options don't seem right, I am not using express. When I Google my use case all I see is solutions with express or this
handlebars-layout
package which seems like massive over kill.https://www.npmjs.com/package/handlebars-layout
Is there not a simple way of allowing me to wrap every template with the layout information? What options do I have?
Example of a piece of content, there will be many different names templates. Any one of these templates can be rendered in the place where {{{ content }}} is.
Beta Was this translation helpful? Give feedback.
All reactions