{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreidza25kr6zz5hid7a275rm4sl76ycivip73452dlbn4rkucjdm7sm",
"uri": "at://did:plc:zx2dwef4winprohql2jbx45h/app.bsky.feed.post/3mpon4vpxlz32"
},
"coverImage": {
"$type": "blob",
"ref": {
"$link": "bafkreif2trv5huxtoddzkct7dwdjcq3o5zw6drbgimui7pnz2ej3qylhb4"
},
"mimeType": "image/jpeg",
"size": 206219
},
"description": "Did you ever want to put a section in a partial to a far place in an inherited template? I turned out that it's possible.",
"path": "/using-contentfor-helper-in-ghost-themes/",
"publishedAt": "2026-07-02T18:13:56.000Z",
"site": "https://muratcorlu.com",
"tags": [
"Smart Optimization",
"Page Speed",
"Django Framework",
"contentFor"
],
"textContent": "While working on new landing page of Synaps Media, I used a lot of inline CSS code. My intention was keeping section partials self-contained, like a component. So a basic section partial was something like:\n\n\n <style>\n .category-section {\n --card-padding: 24px;\n }\n </style>\n\n <section class=\"category-section\">\n ...\n </section>\n\nThis worked well. At the end I had the only styles that is really needed inside the document. With Smart Optimization built-in to Synaps Media, these styles were also minified automatically, so not worried about waste of resource. I know ideally it's better to keep styles in external CSS files, but because of the network latency, I didn't want to fined by Page Speed for this.\n\nBut another side effect was having many `style` tags inside `body`. Practically this is not a big issue as well. But I saw some warnings about this in HTML validators. If you care standards, `style` tag is not allowed inside `body` even though all modern browsers render it very well. I wanted to take my chance to pass this rule. But if I move all styles to `head` (or a separate file), then I would lose that some of my current achievements: I'll serve some unneeded styles for current page and I'll lose those self-contained handlebars templates.\n\nI used to use Django Framework in the past. Django templates (jinja) also uses inheritance and you were able to inherit multiple levels of templates and fill blocks on upper level templates in extended templates. Would it be possible to have the similar in Handlebars?\n\nI’ve learned that, at the point I’ve reached, this is possible with the help of contentFor. In my `default.hbs` file, I created a `head` block:\n\n\n <head>\n ...\n {{{block \"head\"}}}\n </head>\n <body>\n {{{body}}}\n </body>\n </html>\n\nAnd in my section partial file I used `contentFor` to place my styles in to page's head section:\n\n\n {{#contentFor \"head\"}}\n <style>\n .category-section {\n --card-padding: 24px;\n }\n </style>\n {{/contentFor}}\n\n <section class=\"category-section\">\n ...\n </section>\n\nThe good part is, `contentFor` works even if the block is not defined in the parent of current template. In my case, my partials are included in `home.hbs` file, which extends `default.hbs`. And surprisingly `contentFor` worked well.\n\nNow I still have style definitions of sections inside the partial template, but result HTML has styles in head section. All items are checked!\n\nHope you will find this information helpful!",
"title": "Using contentFor helper in Ghost Themes",
"updatedAt": "2026-07-02T18:13:56.790Z"
}