
Explaining Headless CMS to a web designer
22 Aug 2022
Ever found yourself copying and pasting the same content across multiple pages, only to later struggle with updates? Managing content this way is frustrating, time-consuming, and prone to errors. This is where content reuse comes in as a smarter way to create and manage digital content.
Content reuse is essential for maintaining consistency and efficiency in modern web development. In this article, I’ll focus on content reuse in BCMS, a feature that empowers you to create content once and deploy it seamlessly across your website(s).
Content reuse, as the name implies, is a practical solution allowing you to use the same content across multiple places. It can be likened to building with blocks - you create useful pieces that can be arranged in different ways. When you update one of these blocks, the change appears everywhere that block is used.
This approach saves time, maintains consistency, and makes updates much easier. Instead of tracking down every place where certain information appears, you can change it in one spot and watch those changes spread automatically.
BCMS is built with content reuse as a core feature. Unlike traditional CMSs, which might require plugins or workarounds for content reuse strategy effectively, BCMS has built-in capabilities that make content repurposing straightforward and powerful.
The system follows modern web development trends of separating logic and adopting component-based architecture. BCMS makes it easy to create reusable content blocks that can be managed in one place but displayed in many locations across your site.
Content modeling is the process of organizing your content into structured, reusable pieces. It's like creating a blueprint for your information that defines what types of content you need and how they relate to each other.
Content modeling is particularly important in a headless CMS environment like BCMS, where structured content is essential. Unlike traditional CMS platforms where content is often tied to specific page layouts, structured content in headless BCMS is organized in a way that makes it machine-readable and adaptable to any display context.
So, what are the key components that make content modeling possible in BCMS?
Templates are the blueprints that define the structure of your content. They specify what fields a content type should have and how they relate to each other. For example, a "Blog Post" template might include fields for title, author, publication date, content body, and featured image.
Templates ensure that all content of the same type follows the same structure, making it easier to manage and display consistently across your site.
Entries are the actual content items created using templates. Each blog post you publish would be an entry based on the "Blog Post" template. Entries contain the specific information that fills in the structure defined by the template.
While templates define the structure, entries provide the actual content that your visitors will read and interact with.
Widgets in BCMS are reusable building blocks used inside the entry's content area. They represent sections of a page like image galleries, testimonial sections, or related article listings.
Unlike other content components, widgets can be inserted directly into the middle of your content, making them ideal for creating dynamic and flexible layouts. Common widget examples include:
Image galleries
Text with image blocks
Testimonials
Newsletter subscriptions
Related article listings
Groups are collections of related properties that can be included in templates, widgets, or even other groups. For example, an "Image in Gallery" group might contain an image, title, and description that can be reused multiple times.
You can include groups in any template, widget, or even within other groups.
Properties are individual fields like text inputs, dates, or media selections. They store specific pieces of information within your content models.
Together, all these 5 help organize your content structure and metadata, making it easier to create consistent and reusable content components.
Creating a content model in BCMS is straightforward, and the process is similar whether you’re setting up a template, widget, or group. For example, to create a template:
Log in to your BCMS dashboard
Navigate to the Templates section
Click "Create New Template"
Name your template clearly to identify its purpose (e.g., "Product Description")
Add a description that explains what this template will be used for
Choose whether it's a single entry template or can have multiple entries by toggling the "Single Entry" option
Begin adding properties to define what information this template will contain
Save your template
When creating templates, consider what content will need to appear in multiple places. For example, product information might appear on product pages, category listings, and search results.
The same streamlined process applies to creating widgets. For instance, to create a "Signup Form Widget":
Navigate to the Widgets section in your dashboard.
Click “Create Widget” and provide a clear name.
Add properties and groups just as you would in a template.
Update the widget to make it ready for easy reuse across templates and entries.
Learn more: BCMS Widgets guide
Now, let’s look at a concrete code example of a widget designed to direct users to recent blog posts. This widget is typically placed in the middle of a home page or at the end of an article so that it directs users to newly published articles. It includes a required property named title
at the top and an entry pointer array linking to multiple Blog Post entries. The Blog Post template itself contains the following properties:
Title (Default)
Slug (Default)
Cover Image – Media
Article Body – Rich text
Below is the code for the NewBlogPosts.jsx
component:
import React from 'react'; import { BCMSImage } from '@thebcms/components-react'; import { bcms } from '@/bcms'; const NewBlogPosts = ({ data }) => { return ( <div className="new-blog-posts-widget"> {/* Display the widget title */} <h1>{data.title}</h1> {/* Loop through and display the linked blog posts */} <ul> {data.blogPosts.map((post, index) => ( <li key={index}> <h2>{post.title}</h2> <p>{post.slug}</p> {/* Render the cover image if available */} {post.coverImage && ( <BCMSImage media={post.coverImage} clientConfig={bcms.getConfig()} /> )} {/* Render the article body (or a teaser) */} <div dangerouslySetInnerHTML={{ __html: post.articleBody }} /> </li> ))} </ul> </div> ); }; export default NewBlogPosts;
With this code in place, you’ve successfully created a widget that directs users to recent blog posts. Next, you can integrate this widget into your Home Page Template and render it in your Next.js application by fetching the relevant BCMS data.
For a complete starter codebase and more examples, you can check out the GitHub starter codebase.
When you've set up your templates in BCMS, creating entries becomes a straightforward process. But the real power comes from understanding how to structure these entries for maximum reusability.
To create content entries:
Navigate to the Entries section in your dashboard.
Select the template you want to use. Here, I am using our “Product description” template.
Click "Create new entry”
Let's say we're building a product catalog for an electronics store. We've already created a "Product" template with properties like:
Title(string)
Product size(string)
Product date (date)
Product specifications (group)
Fill in the fields according to the template structure:
Save your entry
Now, when creating a new entry for a smartphone product, you'll fill in these fields with the specific details for that product. The beauty here is that once you've created this entry, you can reuse it across your website - on the product page, in category listings, featured products sections, and even in comparison tables.
To maximize the efficiency and maintain consistency across your reused content, follow these best practices:
Think modularly: Break down your content into logical, reusable components. Instead of creating a monolithic "About Us" page, create separate entries for team members, company history, and mission statements that can be reused across the site.
Use entry pointers strategically: When you need to reference the same content in multiple places, use entry pointers rather than duplicating the information. This ensures that updates only need to be made once.
Standardize your naming conventions: Establish clear naming patterns for your templates, widgets, and entries. For example, prefix all product-related widgets with "Product-" to make them easy to find.
Document your content structure: Create a simple reference guide that explains how your content is organized and how different components relate to each other. This helps team members understand how to properly reuse content.
Audit your content regularly: Periodically review your content to identify opportunities for increased reusability and to ensure that reused content is still relevant in all contexts.
By implementing these practices, you'll create a content ecosystem that's not only easier to manage but also more consistent and efficient. The time you save by avoiding duplication can be invested in creating higher-quality content and improving the overall user experience.
Now let's see how BCMS handles dynamic content updates and how changes propagate automatically through your linked content.
BCMS uses a reference-based approach to content reuse. When you place a widget or entry in multiple locations, you're not duplicating the content – you're pointing to the same source.
For example, if you create a "Company Address" widget and use it in multiple pages, you're actually creating references to that widget. This means that when the source content changes, all references update automatically.
Here's how automatic propagation works:
You update a reused piece of content, like a "Privacy Policy" widget
You save the changes
BCMS automatically updates all places where that content appears
Users see the new content everywhere it's used
This ensures consistency across your website. There's no risk of outdated information appearing because you forgot to update one instance of the content.
For example, if your company changes its address, you only need to update the "Company Address" widget once, and the change will appear in the footer, contact page, and anywhere else the widget is used.
BCMS allows you to add metadata to your content through properties. This metadata can control how and where content appears:
Use date fields to control when content is visible
Add category tags to group related content
Create status fields to manage content workflow
Set priority levels to control display order
By connecting this metadata to your display logic, you can create rules for when and where reused content appears without manual management.
For example, you could create a "Featured" tag for products, and your website could automatically display these products on the homepage or in promotional sections.
Content reuse in BCMS offers significant benefits: time savings through creating content once and using it many times, consistency across your digital properties, simplified updates through automatic propagation, flexible content structures that adapt to different contexts, and reduced risk of outdated or conflicting information.
Through templates, entries, widgets, and groups, BCMS provides a powerful system for creating and managing reusable content. By following the step-by-step processes outlined in this article, you can build a content structure that grows with your needs while remaining manageable.
By embracing structured content through BCMS's content modeling tools, you're not just making content reuse possible—you're future-proofing your content strategy.
Ready to transform how you manage your website content? Start implementing these content reuse strategies in BCMS today:
Begin by auditing your current content to identify reusable elements
Create templates and widgets for your most common content types
Set up a systematic approach to metadata
Train your team on best practices for content reuse
By embracing content reuse in BCMS, you'll save time, maintain consistency, and create a more scalable CMS. Your content team will work more efficiently, and your website visitors will enjoy a more coherent experience across all your digital touchpoints.
Start small, measure the improvements, and gradually expand your approach. The initial investment in setting up thoughtful content models will pay dividends through a more efficient and effective way to manage content.
To start your BCMS journey and create applications with effective content reuse, sign up for BCMS Cloud.
Get all the latest BCMS updates, news and events.
By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties.
There are many actionable insights in this blog post. Learn more: