Django Wars [Parte 30]: Template

O Django Wars foi idealizado e desenvolvido no Django 1.4. Algumas funcionalidades aqui descritas podem não funcionar ou funcionar de forma diferente em outras versões do Django

A coisa mais comum no mundo web é ter uma estrutura de páginas onde a única coisa que muda é o conteúdo.
Em um site, como esse blog aqui, você tem o menu sempre no mesmo canto, o mesmo topo, e vários outros elementos fixos na página que acabam por fortalecer a identidade visual do site.
Isso chama-se template.
Você poderia colocar o mesmo código de template em cada arquivo, ou fazer o melhor do melhor do melhor do melhor DO MUNDO: um único arquivo de template onde todas as outras páginas herdam as informações.
Já pensou, para cada página do Django-wars que fizemos você ter que definir todo o layout?
Se você quiser alterar o layout teria que alterar todos os arquivos.

Documentação sobre Django Template Layer.

Na pasta de tempaltes irei criar um arquivo chamado template.html que irá guardar o template do projeto.
Notem, antes de mais nada, que o meu template é uma simples página Bootstrap com algumas tags bem legais do Django:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        
        {% block titulo %}
            <title>Bootstrap, from Twitter</title>
        {% endblock %}
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        
        <!-- Le styles -->
        <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
        <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        </style>
        
        <link href="{% static 'assets/css/bootstrap-responsive.css' %}" rel="stylesheet">
        
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="{% static 'assets/ico/favicon.ico' %}">
    </head>
    
    
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Django Wars</a>
                    
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="{% url pagina_de_crimes %}">Crimes</a></li>
                            <li><a href="{% url pagina_de_stats %}">Stats</a></li>
                            <li><a href="{% url pagina_da_loja %}">Loja</a></li>
                            <li><a href="{% url pagina_do_inventario %}">Inventário</a></li>
                            <li><a href="{% url pagina_de_alvos %}">Atacar Alguém</a></li>
                            <li><a href="{% url pagina_do_hospital %}">Hospital</a></li>
                            <li><a href="{% url pagina_do_rank %}">Rank</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        
        
        {% block conteudo %}
        {% endblock %}
        
        
        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <!--<script src="{% static 'assets/js/jquery.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-transition.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-alert.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-modal.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-dropdown.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-scrollspy.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-tab.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-tooltip.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-popover.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-button.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-collapse.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-carousel.js' %}"></script>
        <script src="{% static 'assets/js/bootstrap-typeahead.js' %}"></script>-->
    </body>
</html>

Tags que você deve ter notado:
{% load staticfiles %} – Avisa a este template para carregar os arquivos estáticos definidos no settings.py.
{% block nomedobloco %} alguma coisa { %endblock %} – Esse bloco é algo bem legal! Já já você vai entender.
{% static ‘alguma_coisa’ %} – Retorna o endereço do arquivo estático.
{% url ‘nome_da_url’ %} – Procura no urls.py por uma URL com este nome, e retorna o endereço.

One thought on “Django Wars [Parte 30]: Template

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *