Templates em Django

O django dá suporte a tags de templates. O HTML é estático, em quanto o Django é dinâmico. O Template do Django possibilita transformar objetos em Python em HTML. Isso possibilita facilidade na criação de sites dinâmicos.

Antes de falarmos dos usos de templates em Django, vamos configurar nosso controller e nossa view para atender a uma requisição de um cliente. Siga as instruçẽs abaixo:

Entre na pasta da sua aplicação (nesse exemplo ela se chama cliente). Em seguida, crie uma pasta chamada templates_default.
Dentro da pasta templates_default, crie dois arquivos. Um chamado index.html e outro chamado base.html.
Abra o arquivo settings.py e em TEMPLATES = [{ ... 'DIRS': [ ] ...}] coloque dentro do colchetes de DIRS o diretório do seu template. Nesse exemplo ficou:

        TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [
            'cliente/templates_default',
            ]
            ,

            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
        ]

Na mesma pasta que está o arquivo settings.py, abra o arquivo url.py, apague tudo, copie o código abaixo e cole dentro do arquivo url.py (em 'cliente.views.cliente', substitua o primeiro cliente pelo nome de sua aplicação, caso o nome seja diferente do exemplo):

    from django.conf.urls import url
    from django.contrib import admin
    urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', 'cliente.views.cliente'),
    ]

Vá até a pasta de sua aplicação e abra o arquivo chamado views.py. Apague tudo e cole o código abaixo:

    from django.shortcuts import render
    from django.http import HttpResponse
    from cliente.models import Carro

    # Create your views here.
    def cliente(request):
        return render(request, 'index.html')

Quando você iniciar o servidor usando o comando runserver e entrar na página http://127.0.0.1:8000 aparecerá uma página em branco. Essa página é a página index.html que você criou.

O uso de templates

Vá até a pasta da sua aplicação e abra a pasta templates_default. Abra o arquivo base.html, copie e cole o código abaixo:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title> Catálogo de carros </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      </head>
      <body>
        <div class="page-header" style="text-align:center">
          <h1 >Bem vindo ao catálogo de carros!</h1>
        </div>
        <div id="navigationBar">
          {% block navigationBar %}{% endblock %}
        </div>
      </body>
    </html>

Agora abra o arquivo index.html e cole o código abaixo:

    {% extends "base.html" %}

    {% block navigationBar%}

    <div class="container-fluid">

      <input class="form-control"  ng-model="searchText" id="disabledInput" type="text" placeholder="Buscar...">
    </div>

    {% endblock %}

O código do arquivo base.html é, literalmente, a base do index.html. Em base.html definimos todo o esqueleto do nosso site e deixamos alguns buracos que foram preenchidos por index.html.

O bloco definido em index.html, chamado navigationBar será substituído e colado dentro de base.html sempre que for chamado.

Com o uso de {% extends "base.html" %}, estamos dizendo ao Django para juntar o conteúdo de base.html e do index.html e para substituir os blocos.

Para saber mais sobre templates do Django, consulte a documentação nesse link.