Build a custom blog with Framer CMS

Scalable Blog Structure with Frame CMS: A Detailed Breakdown

Key Concepts:

• Frame CMS: A visual content management system for web design.
• Collections: Data structures within Frame CMS (Articles, Categories, Tags, Authors).
• References (Single & Multi): Linking CMS entries to establish relationships between collections.
• Dynamic Content: Content that updates automatically based on CMS data.
• CMS Pages: Pages built within Frame CMS, either static or dynamically generated.
• URL Structure: The organization of web addresses (e.g., /blog/article-title).
• Filters: Criteria used to display specific CMS entries on a page.
• Variants: Different design states for elements, triggered by conditions (e.g., current page state).
• Transforms: Modifications applied to data (e.g., adding a prefix to a title).

I. Initial Setup & Structure

Matt Jumper begins by highlighting the common issue of designers creating inflexible, static blog pages. The core goal of this tutorial is to build a scalable blog structure within Frame CMS that is easily updatable and extensible. The initial CMS setup already contains four collections: Articles, Categories, Tags, and Authors. These collections will be used to generate dynamic pages.

Four initial CMS pages are created:

1. Articles Index Page (Blog Landing Page): A static page serving as the main blog landing page.
2. Articles Detail Page: Dynamically generated pages for each article.
3. Authors Detail Page: Dynamically generated pages for each author.
4. Categories & Tags Detail Pages: Dynamically generated pages for each category and tag.

The initial page structure is then reorganized. The Articles pages are nested within a “Blog” folder to create a URL structure like /blog/article-title. The Authors, Categories, and Tags folders are also moved inside the “Blog” folder, and their names are changed to singular forms (Author, Category, Tag) for cleaner URLs.

II. Establishing Relationships with References

The crucial step of connecting the collections is achieved using References. Within the Articles collection, three fields are added:

• Category (Single Reference): Links each article to a single category.
• Author (Single Reference): Links each article to a single author.
• Tags (Multi-Reference): Allows each article to be associated with multiple tags.

This allows for data to be pulled from related collections when building out the pages. The presenter emphasizes that the choice between single and multi-references depends on the desired relationship structure. Once these fields are added, each article entry can be populated with the appropriate category, author, and tags.

III. Building the Blog Landing Page & Navigation

The blog landing page is constructed with a focus on dynamic navigation. A collection insertion of Categories is added, displaying all category names as links. The styling is adjusted to remove the default limit on the number of displayed categories and to change the direction of the layout.

A key design decision is made to apply the link styling to the category text itself, rather than a separate link element. This leverages a pre-existing style that changes the link color to black when the user is on the corresponding category page, providing visual feedback on the current page.

The category navigation is duplicated and modified to create a link back to the main blog landing page (/blog). This link is styled to appear black when the user is already on the blog landing page.

IV. Implementing Article Display & Pagination

To display articles on the landing page, another collection insertion of Articles is added. Initial pagination is implemented using a "Load More" button, configured to load six articles at a time. Padding is added to the container to create space for the button.

Below the main article list, another collection insertion of Categories is added. This displays each category title along with a "View All" link that directs the user to the corresponding category page. These are stacked vertically for a clean layout.

The article list is then duplicated and placed within each category section. A filter is applied to this duplicated article list: Category equals Category Variable. This ensures that only articles belonging to the current category are displayed. The pagination is removed, and a hard limit of three articles per category is set. Padding is removed and set to zero.

V. Extending to Category & Tag Pages

The structure built for the blog landing page is efficiently copied to the category pages. The only modifications required are:

• Connecting the H1 heading to the category title variable.
• Removing pagination from the article list on the category page.
• Implementing infinite scroll instead of a "Load More" button, increasing the number of displayed articles to nine.
• Applying a filter to the article list: Category equals Category Variable (linking the articles to the current category).

The process is then replicated for the tag pages, with minor adjustments to the filter: Tags contains Tag Variable.

VI. Author Pages & Detail Page Connections

Similar to categories and tags, author pages are built by copying the existing structure. The key change is applying a filter to the article list: Author equals Author Variable.

The article detail page is connected to the category and author information. The breadcrumbs are connected to the category variable. Links are added for the author image and category, utilizing the appropriate CMS variables. For tags, a collection insertion of tags is used, and the styling is adjusted to remove redundant links. A transform is applied to the tag title to add a prefix ("Articles Tag").

VII. Final Touches & Dynamic Linking

The final step involves ensuring dynamic linking for tags. The slug is set to "tag" to ensure the correct URL structure. The presenter demonstrates previewing the blog, showcasing the dynamic state changes and the correct linking between pages.

Conclusion:

This tutorial demonstrates a robust and scalable approach to building a blog within Frame CMS. By leveraging collections, references, filters, and dynamic content, a flexible and easily maintainable blog structure is created. The emphasis on clean organization, reusable components, and dynamic connections ensures that content updates are streamlined and the blog can easily evolve over time. The key takeaway is that with careful planning and the power of Frame CMS, designers can avoid the pitfalls of static blog pages and create truly dynamic and engaging web experiences.