Content Mode Core Concepts

Collections

A collection is a group of related content files. Collections help you organize content by type and define how it's processed.

What is a Collection?

Collections are defined in content.config.json and represent a type of content. Common examples include:

• posts: Blog posts or articles
• authors: Author profiles
• products: Product listings
• pages: Static pages

Collection Characteristics

• Each collection has a unique name (e.g., "posts", "authors")
• Content files live in a specific directory (e.g., content/posts/)
• All files in a collection share the same structure
• Collections are defined in content.config.json
• Each collection can have its own template and output path

Content Files

Content files are where your actual content lives. Hammer supports two formats: Markdown and YAML.

Markdown Files

Markdown files (.md) contain both metadata and content:

• Front Matter: YAML metadata at the top (between --- delimiters)
• Body: The main content written in Markdown (converted to HTML)

---
title: "My First Post"
date: "2024-01-15T10:00:00Z"
author: "authors/john"


This is the body content in Markdown.

YAML Files

YAML files (.yaml or .yml) are pure data files, perfect for structured content like author profiles or product data:

name: "John Doe"
slug: "john"
bio: "Writer and developer"
avatar: "/uploads/john.jpg"

Front Matter

Front matter is the metadata section at the top of Markdown files. It uses YAML syntax and is enclosed by --- delimiters. Front matter can include:

• Standard fields: title, slug, date, published
• Custom fields: Any fields you define in your collection configuration
• Relations: References to other collections (e.g., author: "authors/leon")

Templates

Templates are HTML files with Hammer template tags that define how content is rendered.

What are Templates?

Templates are located in the templates/ directory and use Hammer's template syntax to render content dynamically. One template can generate multiple pages—one for each content file in a collection.

Template Types

• Detail Templates: Render individual content items (e.g., a single blog post)
• List Templates: Render collections of content (optional, for listing pages)

Template Context

Templates have access to several variables:

• doc: The current document being rendered
• collections: All content collections
• site: Site-wide configuration
• helpers: Helper functions for formatting and manipulation

Configuration (content.config.json)

The content.config.json file is the central configuration for Content Mode. It maps collections to templates and defines the structure of your content.

Key Settings

• Collection paths: Where content files are located
• Template files: Which templates to use for rendering
• Output paths: Where generated pages are written
• Field definitions: Validation, types, and relationships
• Slug generation: Rules for creating URL-friendly identifiers

{
  "collections": {
    "posts": {
      "path": "content/posts",
      "template": "templates/post.html",
      "output": {
        "filename": "blog/{{ slug }}/index.html"
      },
      "fields": {
        "title": { "type": "string", "required": true }
      }
    }
  }
}

Output Paths

Output paths define where generated pages are written in the build output directory.

Path Patterns

Output paths use template syntax to create dynamic paths based on content properties:

• blog/{{ slug }}/index.html - Uses the content's slug
• posts/{{ date }}/{{ slug }}.html - Uses date and slug
• {{ collection }}/{{ slug }}/index.html - Uses collection name

Dynamic Paths

Paths are resolved per document, allowing each content item to have its own unique URL structure. Hammer automatically creates nested directories as needed.

Slugs

Slugs are URL-friendly identifiers for content items.

What is a Slug?

A slug is a simplified version of a title or filename that's safe to use in URLs. For example, "Hello World" becomes "hello-world".

Auto-Generation

If you don't specify a slug in your content file's front matter, Hammer automatically generates one from:

• The title field (if present)
• The filename (if no title is available)

Slug Format

Slugs are automatically formatted to be:

• Lowercase
• Hyphens instead of spaces
• Special characters removed
• URL-safe

Title: "Hello World!"
Slug: "hello-world"

Title: "What's New in 2024?"
Slug: "whats-new-in-2024"

Next Steps

Now that you understand the core concepts, dive deeper:

• Configuration Deep Dive for detailed configuration options
• Content Files to learn about creating and structuring content
• Templates to understand template rendering