Theme Templates 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" | | `` | Site description/tagline | "A great website" | | `{{theme}}` | Current theme name | "nightfall" | | `2026` | 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}}

No content available

This site is hosted by our premium hosting service.

Plugin management is available in this mode.

{{/if}} ``` ## Loops ### Foreach Loop ```html {{#each array}} {{/each}} ``` ### Examples ```html {{#if children}}

{{/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

``` #### Conditional Logic Modules support all template conditionals: ```html {{#if heroBanner}} {{/if}} ``` #### Loops Modules support foreach loops: ```html ``` #### Nested Modules Modules can include other modules: ```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=footer.html}} ``` **Head module (head.html):** ```html {{title}} - {{siteName}} ``` **Header module (header.html):** ```html

``` **Footer module (footer.html):** ```html ``` ### Best Practices for Modular Templates 1. **Keep modules focused** - Each module should have a single responsibility 2. **Use descriptive names** - Name modules clearly (e.g., `site-header.html` not `h.html`) 3. **Plan your structure** - Think about what parts are reused across pages 4. **Avoid deep nesting** - Don't create circular includes or deeply nested structures 5. **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](modular-templates). ## 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 1. **Accessibility**: Always include `aria-label="Breadcrumb"` for screen readers 2. **Current Page**: Show the current page as text, not a link 3. **Separators**: Use clear separators like `>` or `/` between levels 4. **Responsive**: Ensure breadcrumbs work well on mobile devices 5. **Dark Mode**: Always include dark mode styles for better user experience 6. **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}}

``` ### Blog Template ```html {{title}} - {{siteName}}

{{#if date}} {{date "F j, Y"}} {{/if}} {{#if author}} by {{author}} {{/if}}

{{/if}} Read More

No blog posts found.

``` ### 404 Error Template ```html Page Not Found - {{siteName}}

404

Page Not Found

The page you're looking for doesn't exist.

Try one of these pages:

{{title}}

{{/if}} Go Home

``` ## Advanced Techniques ### Nested Conditionals ```html {{#if themeOptions.showSidebar}} {{/if}} ``` ### Dynamic Classes ```html

``` ### Conditional Attributes ```html {{title}} ``` ## Best Practices 1. **Always check if variables exist** before using them 2. **Use semantic HTML** elements 3. **Keep templates DRY** - reuse common elements 4. **Test with different content** scenarios 5. **Use meaningful variable names** in theme options 6. **Include proper meta tags** for SEO 7. **Make templates accessible** with proper ARIA labels ## Troubleshooting ### Common Issues 1. **Variable not showing**: Check if the variable exists in the data 2. **Conditional not working**: Verify the condition syntax 3. **Loop not iterating**: Ensure the array is not empty 4. **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

Theme Templates Reference

{{title}}

{{title}}

{{title}}

Related Pages

{{title}}

404

Page Not Found