Theme System

On this page

The theme system manages site appearance and templating:

  • ThemeManager (core/lib/theme/theme-manager.js): Main coordinator for theme operations
  • ThemeDiscovery (core/lib/theme/modules/theme-discovery.js): Scans for available themes
  • ThemeTemplateResolver (core/lib/theme/modules/theme-template-resolver.js): Resolves template paths
  • ThemeInstaller (core/lib/theme/modules/theme-installer.js): Handles theme installation
  • ThemeMarketplaceCDN (core/lib/theme/modules/theme-marketplace-cdn.js): Integrates with theme marketplace

Architecture

Theme Manager
├── Theme Discovery         # Find and validate themes
├── Theme Template Resolver # Resolve template paths
├── Theme Installer         # Install/delete themes
└── Theme Marketplace CDN   # Download from marketplace

Theme Structure

theme-name/
├── theme.json                 # Theme metadata (required)
├── templates/                 # Main templates
│   ├── layout.html            # Base layout (required)
│   ├── home.html              # Homepage template
│   ├── post.html              # Single post template
│   ├── page.html              # Single page template
│   ├── taxonomy.html          # Category/tag template
│   └── 404.html               # Error page template
├── custom/                    # Custom templates
│   ├── homepage.html          # Custom homepage
│   ├── category.html          # Custom category page
│   ├── tag.html               # Custom tag page
│   ├── categories.html        # Categories listing page
│   ├── tags.html              # Tags listing page
│   ├── topics.html            # Taxonomies listing page
│   ├── blog.html              # Paginated posts page
│   ├── [taxonomy]-[slug].html # Specific taxonomy slug page
│   └── [slug].html            # Page-specific templates
├── partials/                  # Reusable components
│   ├── header.html
│   ├── footer.html
│   └── sidebar.html
└── assets/                    # Static assets
    ├── css/
    │   └── style.css          # Main stylesheet (required)
    └── js/
        └── main.js            # JavaScript files

Template Resolution Hierarchy

  1. Custom templates: custom/[slug].html
  2. Content-specific: [type].html (post.html, page.html)
  3. Generic content: content.html
  4. Base layout: layout.html (fallback)

Theme Validation

Themes must include:

  • Valid theme.json with required fields
  • templates/layout.html
  • assets/css/style.css

For more details, see Theme Structure