| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{{ page_title | default(value="Tera Test") }}</title> |
| {% if include_styles %} |
| <style> |
| body { |
| font-family: {{ font_family | default(value="sans-serif") }}; |
| color: #333; |
| line-height: 1.6; |
| } |
| .container { |
| width: 80%; |
| margin: 0 auto; |
| } |
| {% if dark_mode %} |
| body { |
| background-color: #222; |
| color: #eee; |
| } |
| {% endif %} |
| </style> |
| {% endif %} |
| </head> |
| <body> |
| <div class="container"> |
| {# Header Section with variable interpolation #} |
| <header> |
| <h1>{{ header_text | upper }}</h1> |
| {% if subheader %} |
| <h2>{{ subheader }}</h2> |
| {% endif %} |
| </header> |
| |
| {# Navigation example with for loop #} |
| <nav> |
| <ul> |
| {% for item in navigation %} |
| <li class="{{ loop.index0 == current_page ? 'active' : '' }}"> |
| <a href="{{ item.url }}">{{ item.title }}</a> |
| </li> |
| {% endfor %} |
| </ul> |
| </nav> |
| |
| {# Main content section with various template features #} |
| <main> |
| {# Conditionals #} |
| {% if user %} |
| <section class="welcome"> |
| <h2>Welcome back, {{ user.name }}!</h2> |
| <p>Last login: {{ user.last_login | date(format="%Y-%m-%d") }}</p> |
| </section> |
| {% elif visitor_count > 0 %} |
| <section class="welcome"> |
| <h2>Welcome, visitor!</h2> |
| <p>You are visitor number {{ visitor_count }}</p> |
| </section> |
| {% else %} |
| <section class="welcome"> |
| <h2>Welcome to our site!</h2> |
| </section> |
| {% endif %} |
| |
| {# Macro definition and usage #} |
| {% macro render_item(item, featured=false) %} |
| <div class="item {{ featured ? 'featured' : '' }}"> |
| <h3>{{ item.title }}</h3> |
| <p>{{ item.description | truncate(length=100) }}</p> |
| {% if item.tags %} |
| <div class="tags"> |
| {% for tag in item.tags %} |
| <span class="tag">{{ tag }}</span> |
| {% endfor %} |
| </div> |
| {% endif %} |
| </div> |
| {% endmacro render_item %} |
| |
| {# Items section with macro usage #} |
| <section class="items"> |
| <h2>Items ({{ items | length }})</h2> |
| |
| {% for item in items %} |
| {{ self::render_item(item=item, featured=item.id == featured_id) }} |
| |
| {% if not loop.last %} |
| <hr> |
| {% endif %} |
| {% endfor %} |
| </section> |
| |
| {# Raw content that shouldn't be processed #} |
| {% raw %} |
| <div class="example"> |
| The syntax {{ variable }} will not be processed in raw blocks. |
| Neither will {% control %} structures. |
| </div> |
| {% endraw %} |
| |
| {# Includes #} |
| {% include "partials/footer.tera" %} |
| |
| {# Inheritance example #} |
| {% block content %} |
| <p>This is the default content.</p> |
| {% endblock content %} |
| |
| {# Set variables #} |
| {% set text_color = dark_mode ? "#fff" : "#333" %} |
| {% set items_count = items | length %} |
| |
| <div style="color: {{ text_color }}"> |
| We have {{ items_count }} items. |
| </div> |
| |
| {# Filters with complex expressions #} |
| <p>{{ "Hello, " ~ user.name | default(value="Guest") | upper }}</p> |
| <p>{{ items | filter(attribute="featured", value=true) | length }} featured items</p> |
| |
| {# With statement #} |
| {% with %} |
| {% set local_var = "Only visible in this scope" %} |
| <p>{{ local_var }}</p> |
| {% endwith %} |
| |
| {# Mathematical operations #} |
| <div class="math"> |
| <p>Price: ${{ price }}</p> |
| <p>Tax ({{ tax_rate * 100 }}%): ${{ price * tax_rate }}</p> |
| <p>Total: ${{ price * (1 + tax_rate) }}</p> |
| </div> |
| |
| {# Boolean operations #} |
| {% if user and user.is_admin or super_user %} |
| <div class="admin-panel">Admin panel</div> |
| {% endif %} |
| </main> |
| |
| {# Footer section with filters and includes #} |
| <footer> |
| <p>© {{ current_year }} {{ company_name | default(value="Our Company") }}</p> |
| |
| {% if debug %} |
| <div class="debug-info"> |
| <p>Render time: {{ render_time }}ms</p> |
| <p>Template version: {{ version }}</p> |
| </div> |
| {% endif %} |
| </footer> |
| </div> |
| |
| <script> |
| const appData = { |
| "user": {% if user %}{{ user | json_encode() }}{% else %}null{% endif %}, |
| "settings": { |
| "theme": "{{ theme | default(value="light") }}", |
| "notifications": {{ notifications_enabled | string | lower }} |
| } |
| }; |
| </script> |
| </body> |
| </html> |