Pages

Pages in Elemental CMS follow a clean, direct approach. Each page is self-contained with its own spec and content files, dependencies are loaded directly without bundling or minification, and resources are organized by language for clear multilingual support.

Creating Pages #

Create a new page with a clean, focused structure:

# Create a new page elemental-cms pages create -p home en # Generated files: PAGES_FOLDER/en/ ├── home.json # Clean metadata structure └── home.html # Direct HTML content

Managing Pages #

Listing Pages

# List all pages elemental-cms pages list # Output shows: * home (en) # * indicates local changes about (en) # No * means in sync * contact (en) # * can also mean local-only or missing local files

Pushing Pages

# Push a page elemental-cms pages push -p home en # Push all pages elemental-cms pages push --all

Pulling Pages

# Pull a page elemental-cms pages pull -p home en # Pull all pages elemental-cms pages pull --all

Publishing Pages

# Publish a page elemental-cms pages publish -p home en # Publish all draft pages elemental-cms pages publish --all

Unpublishing Pages

# Unpublish a page elemental-cms pages unpublish -p home en

Removing Pages

# Remove a page elemental-cms pages remove -p home en

Comparing Pages

# Compare local and database versions elemental-cms pages diff -p home en # Compare draft version elemental-cms pages diff -p home en --drafts

Page Dependencies #

Pages can include their own dependencies, loaded directly and only when needed:

{ "name": "home", "language": "en", "title": "Home Page", "cssDeps": [ { "name": "home-styles", "type": "text/css", "url": "css/home.css" # Direct file reference } ], "jsDeps": [ { "name": "home-behavior", "type": "application/javascript", "url": "js/home.js" # Clean JavaScript file } ] }

Key points about page dependencies:

  • Each dependency is a separate, focused file
  • No bundling or minification needed
  • Files are loaded directly when the page loads
  • Clear organization by purpose and language

Important Notes #

Draft vs Published

Pages follow a simple workflow:

  • push: Creates/updates draft version
  • publish: Makes page accessible on the web
  • unpublish: Returns to draft state

Batch Operations

Some commands support --all for bulk operations:

# Push all pages elemental-cms pages push --all # Pull all pages elemental-cms pages pull --all # Publish all draft pages elemental-cms pages publish --all

Backup System #

The system automatically creates backups when updating existing pages:

PAGES_FOLDER/en/ ├── home.json ├── home.html └── .bak/ ├── home-1637584752066.json # Backup with timestamp └── home-1637584752066.html # Matching content backup

Example Page Structure

A complete page example showing the clean, direct approach:

# home.json - Clean metadata and direct dependencies { "_id": ObjectId("..."), "name": "home", "language": "en", "title": "Home Page", "description": "Welcome to our site", "isHome": true, "cssDeps": [ { "name": "home-styles", "type": "text/css", "url": "css/home.css" } ], "jsDeps": [ { "name": "home-behavior", "type": "application/javascript", "url": "js/home.js" } ] } # home.html - Direct HTML content <div class="home-page"> <h1>{​{ _("home.welcome") }​}</h1> <div class="content"> {​{ render_snippet('featured-content', page) }​} </div> </div>

This approach ensures your pages remain clean, maintainable, and efficient, loading only the resources they need when they need them.

Content