Ghost continues to prove its worth as a versatile content management system, enabling bloggers and publishers to create stunning websites. Among its array of features, the block and contentFor helpers stand out as powerful tools that facilitate the creation of customizable templates.
In this blog post, we will delve into the usage and potential of the {{{block}}} and
{{{contentFor}}} helpers in Ghost CMS, providing examples and highlighting their benefits
for enhancing your website's design and functionality.
Understanding the block helper
The block helper in Ghost CMS serves as a placeholder within a custom handlebars template, enabling you to create slots that can be populated when the template is inherited by another template file.
Here's a breakdown of its usage:
- use the triple curly braces
{{{block "block-name"}}}to define a block and create a placeholder within the template. Replace "block-name" with a unique identifier for the block. - when a template file inherits another template using
{{!< template-name}}, the contentFor helper is used to access and populate the block definitions within the inherited template. - if the contentFor helper is not used, the block will be gracefully skipped, allowing flexibility in customizing templates.
To illustrate the usage of the block helper, let's consider one of the most common use cases. We regularly use these helpers to add scripts in a "scripts" block.:
<!-- default.hbs -->
<body>
...
{{!-- Block for scripts --}}
{{{block "scripts"}}}
...
</body>
In this example, the block helper is used within the default.hbs template to create a placeholder for scripts. Then in any template file like page.hbs, post.hbs that inherits the default.hbs can utilize contentFor helper to populate the scripts block. This allows specific scripts to be injected into the inherited template when rendering the page.
Understanding the contentFor helper
The contentFor helper complements the block helper by providing a means to access and populate block definitions within inherited templates.
- utilize the
{{#contentFor "block-name"}}...{{/contentFor}}syntax to define and fill the block definitions within the template being inherited. - the inherited template is referenced at the top of the file using
{{!< template-name}}. This establishes the connection between the inherited template and the template containing the contentFor helper. - the content placed within the contentFor helper will be rendered into the corresponding block within the inherited template.
Here's how the contentFor definition looks like for the above example:
<!-- template file or partial file .hbs -->
{{#contentFor "scripts"}}
<script>
...script here
</script>
{{/contentFor}}
In this example, the content within the contentFor block will be added in place of the block when the page renders.
Use cases and benefits
The block and contentFor helpers provide several use cases and benefits that enhance the flexibility and customization of your Ghost CMS website. Here are some ideas how these helpers can be used in Ghost themes:
- Dynamic script injection
You have the possibility of injecting scripts or other dynamic content into specific sections of your templates, enhancing interactivity and functionality. In our themes we use this functionality to add table of contents or social sharing scripts.
- Custom CSS classes
You can dynamically assign different CSS classes to the body tag (or any other HTML tag) based on specific templates or content types, allowing for targeted styling and customization throughout your Ghost CMS theme.
- Meta tag changes
It's possible to dynamically change the meta tags for specific pages or posts within your Ghost theme. For example you can set different language or title tag based the post tag.
- Modular template structure
By using the block helper, you can create modular templates with defined slots, allowing for easy customization and content injection within inherited templates. For example, define a place for an ad unit in your default template and then use the contentFor in your post templates to place the ads based on certain conditions.
These are just some examples, but you can leverage these blocks for even more things.
Conclusion
The block and contentFor helpers in Ghost CMS provide powerful capabilities for creating customizable and modular templates. By utilizing these helpers, you can enhance the design, functionality, and interactivity of your website.
Whether you want to inject dynamic scripts, customize specific sections, or maintain consistency across your templates, the block and contentFor helpers offer the flexibility and control you need.