Templates ========= O Velox usa um sistema de templates similar ao Jinja2, com escape XSS automático. Renderizar Templates ------------------- **1. Usando app.render() (recomendado):** .. code-block:: python from velox import Velox app = Velox(__name__) app.template('templates') # Define a pasta de templates @app.get('/') def home(req, res): # Renderiza template com contexto return app.render('index.html', { 'title': 'Minha Página', 'name': 'João', 'users': [{'name': 'Alice'}, {'name': 'Bob'}] }) **2. Usando res.html() com template:** .. code-block:: python @app.get('/pagina') def pagina(req, res): html = app.render('pagina.html', {'msg': 'Olá!'}) res.html(html) **3. Sem template (HTML direto):** .. code-block:: python @app.get('/') def home(req, res): res.html('

Olá Mundo!

') --- Variáveis no Template --------------------- No arquivo ``templates/index.html``: .. code-block:: html {{ title }}

Olá, {{ name }}!

Primeiro usuário: {{ users.0.name }}

Email: {{ user.email }}

Variáveis são **escapadas automaticamente** contra XSS. Use ``|safe`` para HTML confiável: .. code-block:: html {{ conteudo_html }} {{ conteudo_html|safe }} --- Condicionais ------------ .. code-block:: html {% if user %}

Bem-vindo, {{ user.name }}!

{% else %}

Bem-vindo, visitante!

{% endif %} {% if count > 10 %} Mais de 10 itens {% elif count > 5 %} Entre 5 e 10 {% else %} Poucos itens {% endif %} --- Loops (For) ----------- .. code-block:: html

{{ user.name }} - {{ user.email }}

{% for user in users %}

{{ forloop.index }}: {{ user.name }}

{% endfor %} Variáveis disponíveis no loop: - ``forloop.index`` - posição atual (1-based) - ``forloop.index0`` - posição atual (0-based) - ``forloop.first`` - True se primeiro - ``forloop.last`` - True se último - ``forloop.length`` - total de items --- Herança de Templates -------------------- **templates/base.html:** .. code-block:: html {% block title %}Velox{% endblock %}

{% block content %}{% endblock %}

**templates/index.html:** .. code-block:: html {% extends "base.html" %} {% block title %}Página Inicial{% endblock %} {% block content %}

Bem-vindo!

Esta é a página inicial.

{% endblock %} --- Includes -------- **header.html:** .. code-block:: html

Meu Site

**footer.html:** .. code-block:: html **index.html (com includes):** .. code-block:: html {% include "header.html" %}

Página Principal

{% include "components/alerta.html" with msg="Olá!" %}

{% include "footer.html" %} --- Filtros ------- .. code-block:: html {{ name|upper }} {{ name|lower }} {{ name|title }} {{ text|truncate:50 }} {{ text|striptags }} {{ text|default:"N/A" }} {{ items|length }} {{ items|first }} {{ items|last }} {{ items|join:", " }} {{ price|currency:"R$" }} {{ num|format:"%.2f" }} {{ date|date:"%d/%m/%Y" }} {{ html|safe }} --- Static Files (CSS/JS) ---------------------- Configure no app.py: .. code-block:: python from velox import Velox app = Velox(__name__) app.template('templates') app.static('static') # Pasta de arquivos estáticos No template: .. code-block:: html

Estrutura: :: projeto/ ├── app.py ├── static/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── app.js │ └── img/ │ └── logo.png └── templates/ └── index.html --- Exemplo Completo ---------------- **app.py:** .. code-block:: python from velox import Velox app = Velox(__name__) app.template('templates') app.static('static') @app.get('/') def home(req, res): users = [ {'name': 'Alice', 'email': 'alice@email.com'}, {'name': 'Bob', 'email': 'bob@email.com'}, ] return app.render('index.html', { 'title': 'Home', 'users': users, 'count': len(users), }) @app.get('/sobre') def sobre(req, res): res.html('

Sobre Nós

Página sobre.

') if __name__ == '__main__': app.run() **templates/index.html:** .. code-block:: html {% extends "base.html" %} {% block title %}{{ title }}{% endblock %} {% block content %}

Bem-vindo!

Total de usuários: {{ count }}

{{ user.name|title }} - {{ user.email }}
Nenhum usuário cadastrado.

{% if count > 0 %}

Há usuários registrados!

{% endif %} {% endblock %}