Paso 3: Atender archivos estáticos, agregar páginas y usar la herencia de plantilla con la aplicación Django

Artículo
05/08/2023

Paso anterior: Creación de una aplicación de Django con vistas y plantillas de página

En los pasos anteriores del tutorial, ha descubierto cómo crear una aplicación de Django mínima con una sola página HTML. Pero las aplicaciones web modernas contienen muchas páginas. Las páginas web modernas usan recursos compartidos, como archivos CSS y JavaScript, para proporcionar un estilo y un comportamiento coherentes.

En este paso aprenderá lo siguiente:

Usar plantillas de elementos de Visual Studio para agregar rápidamente nuevos archivos de distintos tipos con práctico código reutilizable (paso 3.1)
Configurar el proyecto de Django para atender archivos estáticos (paso 3.2)
Agregar páginas adicionales a la aplicación (paso 3.3)
Usar la herencia de plantilla para crear un encabezado y una barra de navegación que se use en varias páginas (paso 3.4)

Paso 3-1: Familiarizarse con las plantillas de elemento

A medida que desarrolle una aplicación de Django, lo normal es que vaya agregando muchos archivos Python, HTML, CSS y JavaScript. Para cada tipo de archivo (como web.config que pueda necesitar para la implementación), Visual Studio ofrece prácticas plantillas de elemento con el fin de empezar.

Para ver las plantillas disponibles, vaya al Explorador de soluciones, haga clic con el botón derecho en la carpeta en la que quiera crear el elemento y luego seleccione Agregar>Nuevo elemento.

Add new item dialog in Visual Studio.

A fin de usar una plantilla, seleccione la plantilla deseada, especifique un nombre para el archivo y luego seleccione Agregar. La adición de un elemento de este modo agrega automáticamente el archivo al proyecto de Visual Studio y marca los cambios para el control de código fuente.

Pregunta: ¿Cómo sabe Visual Studio qué plantillas de elemento debe ofrecer?

Respuesta: El archivo de proyecto de Visual Studio (.pyproj) contiene un identificador de tipo de proyecto que lo marca como un proyecto de Python. Visual Studio utiliza el identificador de tipo para mostrar solo las plantillas de elementos que sean adecuadas para el tipo de proyecto. De esta manera, Visual Studio puede proporcionar un amplio conjunto de plantillas de elemento para muchos tipos de proyecto sin pedirle que los ordene cada vez.

Paso 3.2: Atender archivos estáticos desde la aplicación

En una aplicación web creada con Python (con cualquier marco), los archivos de Python siempre se ejecutan en el servidor del host web. Los archivos de Python tampoco se transmiten nunca al equipo de un usuario. Pero el explorador usa exclusivamente otros archivos, como CSS y JavaScript. Por lo tanto, el servidor host simplemente los entrega tal y como están cada vez que se solicitan. Estos archivos se denominan archivos "estáticos", y Django puede distribuirlos automáticamente sin tener que escribir ningún código.

Un proyecto de Django se configura de manera predeterminada para proporcionar archivos estáticos de la carpeta static de la aplicación, gracias a las líneas en el archivo settings.py del proyecto de Django:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

Puede organizar los archivos en static con cualquier estructura de carpetas que quiera y, después, usar rutas de acceso relativas en esa carpeta para hacer referencia a los archivos. Para mostrar el proceso, realice los pasos siguientes para agregar un archivo CSS a la aplicación y luego use esa hoja de estilo en la plantilla index.html:

En el Explorador de soluciones, haga clic con el botón derecho en la carpeta HelloDjangoApp del proyecto de Visual Studio, seleccione Agregar>Nueva carpeta y ponga a la carpeta el nombre static.
Haga clic con el botón derecho en la carpeta static y seleccione Agregar>Nuevo elemento. En el cuadro de diálogo que aparece, seleccione la plantilla Hoja de estilo, asigne al archivo el nombre site.css y seleccione Agregar.

El archivo site.css aparece en el proyecto y se abre en el editor. La estructura de carpetas debería ser similar a la de la imagen siguiente:
Reemplace el contenido del archivo site.css por el código siguiente y guarde el archivo:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Reemplace el contenido del archivo templates/HelloDjangoApp/index.html de la aplicación por el código siguiente. El código reemplaza el elemento <strong> utilizado en el paso 2 por un elemento <span> que hace referencia a la clase de estilo message. El uso de una clase de estilo proporciona más flexibilidad a la hora de aplicar estilos al elemento. (Si no ha movido el archivo index.html a una subcarpeta de templates al usar VS 2017 15.7 y versiones anteriores, vea Espaciado entre nombres de la plantilla en el paso 2.4).
```
<html>
    <head>
        <title>{{ title }}</title>
        {% load static %} 
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>
```
Ejecute el proyecto y observe los resultados. Detenga el servidor cuando haya finalizado y confirme los cambios en el control de código fuente si quiere (tal como se explica en el paso 2).

Pregunta: ¿Para qué sirve la etiqueta {% load static %}?

Respuesta: La línea {% load static %} se requiere antes de hacer referencia a los archivos estáticos en elementos como <head> y <body>. En el ejemplo que se muestra en esta sección, "static files" hace referencia a un conjunto de etiquetas de plantilla de Django personalizado, que le permite usar la sintaxis {% static %} para hacer referencia a los archivos estáticos. Sin {% load static %}, verá una excepción cuando se ejecute la aplicación.

Pregunta: Estoy utilizando un certificado X.509 con mi servicio y obtengo un System.Security.Cryptography.CryptographicException. ¿Hay alguna convención para organizar los archivos estáticos?

Respuesta: Puede agregar otros archivos HTML, CSS y JavaScript a la carpeta static como quiera. Una forma habitual de organizar los archivos estáticos es crear subcarpetas denominadas fonts, scripts y content (para las hojas de estilos y cualquier otro archivo). En cada caso, no olvide incluir esas carpetas en la ruta de acceso relativa al archivo en las referencias de {% static %}.

Pregunta ¿Puedo completar la misma tarea sin usar la etiqueta {% load static %}?

Respuesta: Sí, puede hacerlo.

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="../../static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Paso 3-3: Adición de una página a la aplicación

La incorporación de otra página a la aplicación hará lo siguiente:

Agregar una función de Python que define la vista.
Agregar una plantilla para el marcado de la página.
Agregar el enrutamiento necesario al archivo urls.py del proyecto de Django.

Los pasos siguientes agregan una página "Acerca de" al proyecto de "HelloDjangoApp" y los vínculos a la página desde la página principal:

En Explorador de soluciones, haga clic con el botón derecho en la carpeta templates/HelloDjangoApp. Seleccione Agregar>Nuevo elemento y luego la plantilla de elemento Página HTML. Asigne el nombre about.html al archivo y seleccione Agregar.

Sugerencia

Si el comando Nuevo elemento no aparece en el menú Agregar, asegúrese de que ha detenido el servidor para que Visual Studio salga del modo de depuración.

Reemplace el contenido de about.html por el siguiente marcado (reemplace el vínculo explícito a la página principal por una barra de navegación sencilla en el paso 3.4):

<html>
    <head>
        <title>{{ title }}</title>
        {% load static %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

Abra el archivo views.py de la aplicación y agregue una función denominada about que use la plantilla:

def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

Abra el archivo urls.py del proyecto de Django y agregue la línea siguiente a la matriz urlPatterns:
```
re_path(r'^about$', HelloDjangoApp.views.about, name='about'),
```
Abra el archivo templates/HelloDjangoApp/index.html y agregue la línea siguiente debajo del elemento <body> para vincular a la página Acerca de (de nuevo, reemplazará este vínculo por una barra de navegación en el paso 3.4):
```
<div><a href="about">About</a></div>
```
Guarde todos los archivos con el comando de menú Archivo>Guardar todo o simplemente presione Ctrl+Mayús+S. (Técnicamente, este paso no es necesario porque la ejecución del proyecto en Visual Studio guarda los archivos de forma automática. Pero, está bien conocer el comando).
Ejecute el proyecto para observar los resultados y compruebe la navegación entre las páginas. Cuando haya terminado, cierre el servidor.

Pregunta: Estoy utilizando un certificado X.509 con mi servicio y obtengo un System.Security.Cryptography.CryptographicException. He intentado usar "index" para el vínculo a la página principal, pero no ha funcionado. ¿Por qué?

Respuesta: Aunque la función de vista en el archivo views.py se denomina index, los patrones de enrutamiento de dirección URL del archivo urls.py del proyecto de Django no contienen una expresión regular que coincida con la cadena "index". Para que coincida con la cadena, debe agregar otra entrada para el patrón ^index$.

Tal como se muestra en la sección siguiente, es mejor usar la etiqueta {% url '<pattern_name>' %} en la plantilla de página para hacer referencia al nombre de un patrón. En ese caso, Django crea automáticamente la dirección URL adecuada. Por ejemplo, reemplace <div><a href="home">Home</a></div> en about.html por <div><a href="{% url 'index' %}">Home</a></div>. El uso de "index" aquí funciona porque el primer patrón de dirección URL de urls.py se denomina, de hecho "index" (en virtud del argumento name='index'). También puede utilizar "home" para hacer referencia al segundo patrón.

Paso 3-4: Uso de la herencia de plantilla para crear un encabezado y una barra de navegación

En lugar de tener vínculos de navegación explícitos en cada página, las aplicaciones web modernas usan un encabezado de personalización de marca y una barra de navegación. Una barra de navegación proporciona los vínculos de página más importantes, menús emergentes, etc. Para asegurarse de que el encabezado y la barra de navegación son los mismos en todas las páginas, no repita el mismo código en cada plantilla de página. Es preferible definir los elementos comunes de todas las páginas en un solo lugar.

El sistema de plantillas de Django ofrece dos formas de reutilizar elementos específicos en varias plantillas: la inclusión y la herencia.

La inclusión son otras plantillas de página que se insertan en una ubicación específica de la plantillas de referencia mediante la sintaxis {% include <template_path> %}. También puede utilizar una variable si quiere cambiar la ruta de acceso dinámicamente en el código. La inclusión se utiliza en el cuerpo de una página para incorporar la plantilla compartida en una ubicación específica de la página.
La herencia utiliza {% extends <template_path> %} al principio de una plantilla de página para especificar una plantilla base compartida sobre la que construye a continuación la plantilla de referencia. La herencia se suele utilizar para definir un diseño, una barra de navegación y otras estructuras que se comparten entre las páginas de una aplicación, de manera que las plantillas de referencia solo puedan agregar o modificar áreas específicas de la plantilla base denominadas bloques.

En ambos casos, <template_path> se refiere a la carpeta templates de la aplicación (../ o ./ también son válidos).

Una plantilla base delimita los bloques usando las etiquetas {% block <block_name> %} y {% endblock %}. Si una plantilla de referencia utiliza etiquetas con el mismo nombre de bloque, su contenido de bloque reemplaza al de la plantilla base.

Los pasos siguientes muestran la herencia:

En la carpeta templates/HelloDjangoApp de la aplicación, cree un archivo HTML. Haga clic con el botón derecho en la carpeta templates/HelloDjangoApp, seleccione Agregar>Nuevo elemento y, después, la plantilla de elemento Página HTML. Asigne el nombre layout.html al archivo y seleccione Agregar.

Reemplace el contenido del archivo layout.html por el marcado siguiente. Puede ver que esta plantilla contiene un bloque denominado "content" que es todo lo que tienen que reemplazar las páginas de referencia:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
</body>
</html>

Agregue los estilos siguientes al archivo static/site.css de la aplicación (en este tutorial no se está intentando mostrar un diseño con capacidad de respuesta; estos estilos simplemente sirven para generar un resultado interesante):

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Modifique el archivo templates/HelloDjangoApp/index.html para hacer referencia a la plantilla base y que se pueda usar dentro de la página. Agregue la línea siguiente como línea 1 en la página HTML (por encima de la etiqueta html):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Como puede ver, el uso de la herencia facilita la implementación de esta plantilla dentro de la etiqueta de cuerpo para invalidar el bloque de contenido:
```
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Modifique el archivo templates/HelloDjangoApp/about.html de la misma manera para que la plantilla de diseño esté disponible. Agregue la misma línea del paso 1 en la página HTML (por encima de la etiqueta html):
```
{% extends "HelloDjangoApp/layout.html" %}
```
A continuación, mediante la herencia, implemente la plantilla dentro de la etiqueta de cuerpo para invalidar el bloque de contenido:
```
{% block content %}
{{ content }}
{% endblock %}
```
Ejecute el servidor para observar los resultados. Cuando haya terminado, cierre el servidor.
Dado que ha realizado cambios sustanciales en la aplicación, es de nuevo un buen momento para confirmar los cambios en el control de código fuente.

Pasos siguientes

Usar la plantilla completa de Proyecto web de Django

Profundizar un poco más

Escribiendo su primera aplicación en Django, parte 3 (vistas) (docs.djangoproject.com)
Para conocer más funciones de las plantillas de Django, como el flujo de control, consulte The Django template language (El lenguaje de plantilla de Django) (docs.djangoproject.com).
Para obtener información detallada sobre el uso de la etiqueta {% url %}, consulte url dentro de Built-in template tags and filters for Django templates reference (Etiquetas y filtros de plantilla integrados para referencia de plantillas de Django) (docs.djangoproject.com)
Código fuente del tutorial en GitHub: Microsoft/python-sample-vs-learning-django

Share via