Ghost CMS block and contentFor helper overview & tips

Discover the power of Ghost CMS block and contentFor helpers. Create modular templates and inject dynamic content. Boost website customization.

Norbert
Norbert4 min read

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:

  1. 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.

  1. 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.

  1. 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.

  1. 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.

More in Tips & Tricks

All tips

How to use Code Injection in Ghost

Enhance your Ghost CMS with Code Injection. Easily add custom scripts and styles, integrate tools, and new features site-wide or per post for seamless customization.

Ghost CMS Price Helper Overview & Tips

How to use the price helper in your Ghost theme. Overview of the available options and specific use cases with examples on what you can do with the helper.

Ghost Pro Hosting

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.