CMS Overview

The Fast Mode CMS (Content Management System) lets you manage dynamic content without touching code. Update blog posts, team members, and any custom content type directly from your dashboard.

What is a CMS?

A CMS separates your content from your website's design. Instead of editing HTML files, you:

1. Define the structure of your content (fields like title, image, description)

2. Create templates that display the content

3. Manage entries through a user-friendly interface

When you add or edit content, it automatically appears on your website.

Key Concepts

Collections

A collection is a type of content with a defined structure. Think of it like a database table or a spreadsheet.

Example collections:

• Blog posts (with title, content, author, date)

• Team members (with name, role, photo, bio)

• Products (with name, price, description, images)

Items

Items are individual entries within a collection.

Example items:

• A specific blog post: "How to Build a Website"

• A team member: "John Doe, CEO"

• A product: "Premium Widget, $99"

Fields

Fields define what information each item contains.

Available field types:

• Text — Single line text (titles, names)

• Rich Text — Formatted content with HTML editor

• Image — Image uploads or URLs

• Number — Numeric values

• Date — Date picker

• Date & Time — Date and time picker

• Boolean — Yes/No toggles

• URL — Web links

• Email — Email addresses

• Video Embed — YouTube, Vimeo, Wistia, Loom URLs

• Select — Dropdown with predefined options

• Multi-Select — Multiple selections from options

• Relation — Links to items in other collections

Templates

Templates are HTML files with placeholders (tokens) that display your content:

<article>
  <h1>{{name}}</h1>
  <img src="{{featuredImage}}">
  <div>{{{content}}}</div>
</article>

How It Works

1. Define Your Collection

Create a collection in the CMS dashboard and specify what fields each item should have.

2. Create Templates

Build HTML templates with tokens:

Listing page (index):

<div class="products">
  {{#each products}}
  <div class="product-card">
    <img src="{{image}}">
    <h3><a href="{{url}}">{{name}}</a></h3>
    <p class="price">{{price}}</p>
  </div>
  {{/each}}
</div>

Detail page:

<div class="product">
  <img src="{{image}}">
  <h1>{{name}}</h1>
  <p class="price">{{price}}</p>
  <div class="description">
    {{{description}}}
  </div>
</div>

3. Configure the Manifest

Tell Fast Mode about your templates in manifest.json:

{
  "cmsTemplates": {
    "productIndex": "templates/products.html",
    "productIndexPath": "/products",
    "productDetail": "templates/product.html",
    "productDetailPath": "/products"
  }
}

4. Add Content

Use the dashboard to add items:

1. Go to CMS in the sidebar

2. Select your collection

3. Click Add Item

4. Fill in the fields

5. Save or Publish

Your content appears on the website automatically.

Token Syntax Quick Reference

Simple Fields

Use double braces for text, numbers, and dates:

<h1>{{name}}</h1>
<p>{{price}}</p>
<time>{{publishedAt}}</time>

Rich Text (HTML Content)

Use triple braces to render HTML content without escaping:

<div class="content">
  {{{description}}}
</div>

Loops

Iterate over collections with #each:

{{#each posts}}
<article>
  <h2>{{name}}</h2>
  <a href="{{url}}">Read more</a>
</article>
{{/each}}

Conditionals

Show content conditionally with #if:

{{#if featuredImage}}
  <img src="{{featuredImage}}">
{{else}}
  <div class="placeholder"></div>
{{/if}}

Related Content

Access data from relation fields using dot notation:

{{#if author}}
  <p>By {{author.name}}</p>
  <img src="{{author.photo}}">
{{/if}}

Managing Content

From the Dashboard

1. Navigate to CMS in the sidebar

2. Select a collection

3. View all items in a list or table view

4. Click to edit, or add new items

5. Items can be saved as drafts or published immediately

From the Visual Editor

1. Navigate to a CMS-powered page in the Editor

2. Click on editable elements

3. Make changes inline

4. Save directly from the page

URL Structure

CMS pages have automatic URLs based on item slugs:

• Index pages: /blog, /team, /products

• Detail pages: /blog/post-slug, /products/product-slug

Configure paths in your manifest:

{
  "cmsTemplates": {
    "blogIndexPath": "/articles",
    "blogDetailPath": "/articles"
  }
}