FearlessCMS
Home > Documentation > FearlessCMS Template Reference

FearlessCMS Template Reference

This document provides a comprehensive reference for the FearlessCMS template system, including all available variables, syntax, and examples.

Template Syntax Overview

FearlessCMS uses a simple template system with double curly braces {{}} for variables and special tags for conditionals and loops.

Variables

Global Variables

| Variable | Description | Example | |----------|-------------|---------| | {{siteName}} | Site name from config | "My Awesome Site" | | Fast and Fearless Content Managment | Site description/tagline | "A great website" | | {{theme}} | Current theme name | "nightfall" | | 2025 | Current year | "2024" | | {{baseUrl}} | Base URL of the site | "https://example.com" | | {{currentUrl}} | Current page URL | "/about" |

Page Variables

| Variable | Description | Example | |----------|-------------|---------| | {{title}} | Page title | "About Us" | | {{content}} | Page content (HTML) | "

Page content...

" | | {{url}} | Current page URL | "about" | | {{parent}} | Parent page object | {"title": "Home", "url": "home"} | | {{children}} | Array of child pages | [{"title": "Child 1", "url": "child1"}] | | {{excerpt}} | Page excerpt (first paragraph) | "This is the excerpt..." | | {{date}} | Page creation date | "2024-01-15" | | {{author}} | Page author | "John Doe" |

Menu Variables

| Variable | Description | Example | |----------|-------------|---------| | {{menu.main}} | Main menu items | Array of menu objects | | {{menu.footer}} | Footer menu items | Array of menu objects | | {{menu.sidebar}} | Sidebar menu items | Array of menu objects |

Theme Options

| Variable | Description | Example | |----------|-------------|---------| | {{themeOptions.key}} | Custom theme option | Value depends on theme |

CMS Mode Variables

| Variable | Description | Example | |----------|-------------|---------| | full-featured | Current CMS mode identifier | "full-featured", "hosting-service-plugins" | | false | Boolean indicating hosting service mode | true, false | | Full Featured | Human-readable mode name | "Full Featured", "Hosting Service (Plugin Mode)" |

Conditional Statements

Basic If/Else

html
{{#if condition}}
    
{{else}}
    
{{/if}}

Examples

html

{{#if title}}
    
{{title}}

{{/if}}

{{#if children}}
    
    
        {{#each children}}
            
{{/if}}
    
{{#if themeOptions.showSidebar}}
    
    
{{/if}}
    
{{#if title && content}}
    
    
        
    {{title}}
    
        {{content}}
    
    
{{else}}
    
    No content available
    
{{/if}}
    
{{#if isHostingServiceMode}}
    
    
        
    This site is hosted by our premium hosting service.
    
    
    
{{/if}}
    
{{#if cmsMode === "hosting-service-plugins"}}
    
    
        
    Plugin management is available in this mode.
    
    
    
{{/if}}

Loops

Foreach Loop

html
{{#each array}}
    
{{/each}}

Examples

html



{{#if children}}
    

        {{#each children}}
            

                
{{title}}

                {{#if excerpt}}
                    
{{excerpt}}

                {{/if}}
            

        {{/each}}
    

{{/if}}

{{#if themeOptions.socialLinks}}
    

{{/if}}

Template Functions

Include Function

Include other template files:

html
{{include "partials/header.html"}}
{{include "partials/footer.html"}}

Date Formatting

Format dates using PHP's date format:

html
{{date "Y-m-d"}}  
{{date "F j, Y"}} 
{{date "M j"}}

Modular Templates

FearlessCMS supports modular templates, allowing you to break down templates into reusable components. This makes themes more maintainable and reduces code duplication.

Module Include Syntax

Use the {{module=filename.html}} syntax to include other template files:

html
{{module=header.html}}
{{module=footer.html}}
{{module=navigation.html}}

File Include Syntax

Use the {{include=filename.html}} syntax to include files from the themes directory (not theme-specific):

html
{{include=ad-area.html}}
{{include=shared-components.html}}
{{include=common-ads.html}}

Note: The {{include=}} syntax is different from {{module=}}:

  • {{module=}} looks for files in the current theme's templates directory
  • {{include=}} looks for files in the main themes directory (shared across all themes)

    • Module Features

    #### Variable Access Modules have access to all template variables:

    html


    
    
    {{siteName}}
    
    {{#if siteDescription}}
    
    Fast and Fearless Content Managment
    
    {{/if}}

    #### Conditional Logic Modules support all template conditionals:

    html

{{#if heroBanner}}

    
    {{title}}

    
{{/if}}

    #### Loops Modules support foreach loops:

    html

    #### Nested Modules Modules can include other modules:

    html


    
    
    {{module=navigation.html}}

    File Extensions

    You can include modules with or without the .html extension:

    html
{{module=header.html}}  
{{module=header}}

    Error Handling

    If a module file is not found, the system will log an error and insert a comment:

    html

    Example: Modular Template Structure

    Main template (page.html): 

    html



    {{module=head.html}}




    {{module=header.html}}
    
    
        {{module=hero-banner.html}}
        
    
            {{module=sidebar.html}}
        
    
    
    
    {{module=footer.html}}

    Head module (head.html): 

    html


{{title}} - {{siteName}}

    Header module (header.html): 

    html

    Footer module (footer.html): 

    html

    
    © 2025 {{siteName}}

    Best Practices for Modular Templates

  • Keep modules focused - Each module should have a single responsibility
  • Use descriptive names - Name modules clearly (e.g., site-header.html not h.html)
  • Plan your structure - Think about what parts are reused across pages
  • Avoid deep nesting - Don't create circular includes or deeply nested structures
  • Test thoroughly - Ensure all variables and conditionals work in modules

    • Common Module Types

  • head.html - HTML head section (meta tags, CSS, JS)
  • header.html - Site header (logo, navigation)
  • footer.html - Site footer (copyright, links)
  • navigation.html - Navigation menus
  • sidebar.html - Sidebar content and layout
  • hero-banner.html - Hero banner sections
  • content-layout.html - Content area layouts

    • For more detailed information about modular templates, see the Modular Templates Guide.

    Navigation Elements

    Breadcrumbs

    Breadcrumbs provide users with navigation context and help them understand their current location within your site. FearlessCMS provides several variables to help you implement effective breadcrumb navigation.

    Basic Breadcrumb Implementation

    html

    Advanced Breadcrumb with Full Path

    html

    Breadcrumb Styling

    Light Mode CSS:

    css
.breadcrumb {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: #333;
}

.breadcrumb a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.breadcrumb .current-page {
    color: #6c757d;
    font-weight: 500;
}

.breadcrumb > * + * {
    margin-left: 0.5rem;
}

    Dark Mode Support:

    css
@media (prefers-color-scheme: dark) {
    .breadcrumb {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
    }
    
    .breadcrumb a {
        color: #007bff !important;
    }
    
    .breadcrumb a:hover {
        color: #4da6ff !important;
    }
    
    .breadcrumb .current-page {
        color: #b0b0b0 !important;
    }
}

    Breadcrumb Best Practices

  • Accessibility: Always include aria-label="Breadcrumb" for screen readers
  • Current Page: Show the current page as text, not a link
  • Separators: Use clear separators like > or / between levels
  • Responsive: Ensure breadcrumbs work well on mobile devices
  • Dark Mode: Always include dark mode styles for better user experience
  • Consistency: Use the same breadcrumb style across all pages

    • Dynamic Breadcrumb Example

    For complex sites with multiple levels, you can create dynamic breadcrumbs:

    html

    This requires setting up a breadcrumbPath variable in your content or template data.

    Template Examples

    Complete Home Template

    html



    
    
    {{siteName}}
    
    




    
    
        
    
            {{#if themeOptions.logo}}
                
            {{else}}
                
    {{siteName}}
    
            {{/if}}
            
            {{#if siteDescription}}
                
    Fast and Fearless Content Managment
    
            {{/if}}
            
            {{#if menu.main}}
                
            {{/if}}
        
    
    
        
    
        
    
            
    
                {{content}}
            
    
            
            {{#if children}}
                
    
                    
    Related Pages
    
                    
    
                        {{#each children}}
                            
    
                                
    {{title}}
    
                                {{#if excerpt}}
                                    
    {{excerpt}}
    
                                {{/if}}
                            
    
                        {{/each}}
                    
    
                
    
            {{/if}}
        
    
    
        
    
        
    
            
    © 2025 {{siteName}}. All rights reserved.
    
            
            {{#if themeOptions.socialLinks}}
                
            {{/if}}

    Blog Template

    html



    
    
    {{title}} - {{siteName}}
    




    
    
        
    
            
    {{title}}
    
        
    
    
        
    
        
    
            
    
                
    
                    {{#if children}}
                        {{#each children}}
                            
    
                                
    
                                    
    {{title}}
    
                                    {{#if date}}
                                        
                                    {{/if}}
                                    {{#if author}}
                                        by {{author}}
                                    {{/if}}
                                
    
                                
                                {{#if excerpt}}
                                    
    
                                        {{excerpt}}
                                    
    
                                {{/if}}
                                
                                Read More
                            
    
                        {{/each}}
                    {{else}}
                        
    No blog posts found.
    
                    {{/if}}
                
    
                
                {{#if themeOptions.showSidebar}}
                    
                {{/if}}
            
    
        
    
    
        
    
        
    
            
    © 2025 {{siteName}}

    404 Error Template

    html



    
    
    Page Not Found - {{siteName}}
    




    
    
        
    
            
    404
    
            
    Page Not Found
    
            
    The page you're looking for doesn't exist.
    
            
            {{#if menu.main}}
                
    Try one of these pages:
    
                
            {{/if}}
            
            Go Home

    Advanced Techniques

    Nested Conditionals

    html
{{#if themeOptions.showSidebar}}
    
{{/if}}

    Dynamic Classes

    html

    Conditional Attributes

    html

    {{title}}

    Best Practices

  • Always check if variables exist before using them
  • Use semantic HTML elements
  • Keep templates DRY - reuse common elements
  • Test with different content scenarios
  • Use meaningful variable names in theme options
  • Include proper meta tags for SEO
  • Make templates accessible with proper ARIA labels

    • Troubleshooting

    Common Issues

  • Variable not showing: Check if the variable exists in the data
  • Conditional not working: Verify the condition syntax
  • Loop not iterating: Ensure the array is not empty
  • Template not loading: Check file paths and names

    • Debug Tips

  • Use {{debug}} to output all available variables
  • Check the browser console for JavaScript errors
  • Verify template file permissions
  • Test with simple content first