Ver Mensaje Individual
  #16 (permalink)  
Antiguo 03/02/2015, 23:42
Avatar de razpeitia
razpeitia
Moderador
 
Fecha de Ingreso: marzo-2005
Ubicación: Monterrey, México
Mensajes: 7.321
Antigüedad: 19 años, 9 meses
Puntos: 1360
Respuesta: Hablemos de Menus Comunes

Cita:
Iniciado por Rafael Ver Mensaje
1) ¿Alguien podría ponerme un diagrama de las plantillas python por ejemplo?
Claro, python tiene un monton de template engines. Pero usare el que trae django, ya que son bastantes populares.

De hecho, como tengo un montón de flojera pondré uno que ya estoy usando en alguno de mis proyectos.


base.html
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>{% block title %}{{ site_name }} :: {% endblock title %}</title>
  8.  
  9.     {% block css %}
  10.     <!-- Bootstrap -->
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  12.  
  13.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  14.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  15.     <!--[if lt IE 9]>
  16.      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17.      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18.    <![endif]-->
  19.     {% endblock css %}
  20.  
  21.   </head>
  22.   <body>
  23.  
  24.     <div class="container">
  25.       {% include 'website/header.html' %}
  26.  
  27.       {% include 'website/navbar.html' %}
  28.  
  29.       {% block content %}{% endblock %}
  30.  
  31.       {% include 'website/footer.html' %}
  32.     </div>
  33.  
  34.     {% block javascript %}
  35.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  36.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  37.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  38.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  39.     {% endblock javascript %}
  40.   </body>
  41. </html>


header.html
Código HTML:
Ver original
  1. {% load static from staticfiles %}
  2.  
  3. <div class="row">
  4.   <a href="{% url 'home' %}"><img class="center-block img-responsive" src="{% static 'website/header.png' %}" alt="alguna descripcion"/></a>
  5. </div>

footer.html
Código Python:
Ver original
  1. <hr/>
  2. <div class="row">
  3.   <div class="col-md-4">
  4.     <h1 class="text-center">Titulo 1</h1>
  5.     <p>Parrafo 1</p>
  6.   </div>
  7.  
  8.   <div class="col-md-4">
  9.     <h1 class="text-center">Titulo 2</h1>
  10.     <p>Parrafo 2</p>
  11.   </div>
  12.  
  13.   <div class="col-md-4">
  14.     <h1 class="text-center">Titulo 3</h1>
  15.     <p>Parrafo 3</p>
  16.   </div>
  17.  
  18.  
  19. </div>
  20. <hr/>
  21. <div class="footer">
  22.   <p class="text-center">© {{ company_name }} {{company_start_year }} - {% now "Y" %}</p>
  23. </div>

navbar.html
Código Python:
Ver original
  1. <nav class="navbar navbar-default">
  2.   <div class="container-fluid">
  3.     <!-- Brand and toggle get grouped for better mobile display -->
  4.     <div class="navbar-header">
  5.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  6.         <span class="sr-only">Cambiar navegación</span>
  7.         <span class="icon-bar"></span>
  8.         <span class="icon-bar"></span>
  9.         <span class="icon-bar"></span>
  10.       </button>
  11.     </div>
  12.  
  13.     <!-- Collect the nav links, forms, and other content for toggling -->
  14.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  15.       <ul class="nav navbar-nav">
  16.         {% for nav in nav_list %}
  17.             <li class="{% if nav.is_active %}active{% endif %}"><a href="{{ nav.url }}">{{ nav.text }}</a></li>
  18.         {% endfor %}
  19.       </ul>
  20.     </div><!-- /.navbar-collapse -->
  21.   </div><!-- /.container-fluid -->
  22. </nav>

Y mas o menos este es el esquema que uso, que template tags, modelos, librerías y otras cosas use para hacer lo que debo de hacer, eso es otro tema. Pero para que se den una idea mas o menos esto lo que ocupo para mis templates base.

Y para usarlos solo hago.
product_list.html
Código HTML:
Ver original
  1. {% extends 'website/base.html' %}
  2.  
  3. {% block title %}{{ block.super }} Product List{% endblock title %}
  4.  
  5. {% block content %}
  6.     {% for product in product_list %}
  7.         {{ product }}
  8.     {% endfor %}
  9. {% endblock content %}