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”