Tutorial: Servir archivos estáticos y usar la herencia de plantillas con Django en Visual Studio

2025-06-12

En este artículo se presenta el paso 3 de la serie de tutoriales Trabajar con el marco web de Django en Visual Studio.

El paso anterior de esta serie de tutoriales crea una aplicación de Django mínima con una sola página de HTML autocontenida. Las aplicaciones web modernas normalmente se componen de muchas páginas y usan recursos compartidos como archivos CSS y JavaScript para proporcionar un estilo y un comportamiento coherentes. En el paso 3, trabajará con plantillas de elementos de Visual Studio para agregar contenido al proyecto de Django y expandir las funcionalidades de la aplicación.

En el paso 3 del tutorial, aprenderá a:

Uso de plantillas de elementos de Visual Studio para agregar rápidamente nuevos archivos con código reutilizable
Servir archivos estáticos desde el código de Django
Adición de más páginas a la aplicación Django
Uso de la herencia de plantillas para crear un encabezado y navegación entre páginas

Prerrequisitos

Una solución de Visual Studio y proyectos de aplicación de Django creados en Paso 1: Crear el proyecto de Django y actualizar en Paso 2: Crear una aplicación de Django con vistas y plantillas de página de esta serie de tutoriales.
Revise la sección requisitos previos del paso 1 de esta serie de tutoriales para obtener más información sobre las versiones de plantilla de Django, los proyectos de Visual Studio frente a los proyectos de Django y el desarrollo de Python en Mac.

Exploración de plantillas de elementos en Visual Studio

A medida que desarrolla una aplicación django, normalmente agrega muchos más archivos python, HTML, CSS y JavaScript. Para cada tipo de archivo (y otros archivos como web.config que pueda necesitar para la implementación), Visual Studio proporciona plantillas de elementos cómodas para empezar. Puede usar estas plantillas para agregar rápidamente nuevos archivos de diferentes tipos con código reutilizable.

Para ver las plantillas disponibles, vaya a explorador de soluciones en Visual Studio y abra la estructura del proyecto.
Haga clic con el botón derecho en la carpeta en la que desea crear un nuevo archivo y seleccione Agregar>Nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento.
Para usar una plantilla, seleccione la plantilla deseada, escriba un nombre para el archivo y seleccione Agregar.

Visual Studio agrega el archivo al proyecto actual y marca los cambios para el control de código fuente.

Comprender cómo Visual Studio identifica las plantillas de elementos

El archivo de proyecto de Visual Studio (.pyproj) contiene un identificador de tipo de proyecto que marca el archivo como un proyecto de Python. Visual Studio usa este identificador de tipo para reconocer y mostrar solo las plantillas de elemento que son adecuadas para el tipo de proyecto. Visual Studio sigue este enfoque para proporcionar un amplio conjunto de plantillas de elementos para muchos tipos de proyecto sin pedirle que los ordene cada vez.

Servir archivos estáticos desde la aplicación

En una aplicación web compilada con Python (mediante cualquier marco), los archivos de Python siempre se ejecutan en el servidor del host web y nunca se transmiten al equipo de un usuario. El explorador usa otros archivos como CSS y JavaScript, por lo que el servidor host simplemente los ofrece como tal cuando se solicitan. Estos tipos de archivos se conocen como archivos "estáticos" y Django puede entregarlos automáticamente sin necesidad de escribir ningún código.

Un proyecto de Django se configura de forma predeterminada para servir archivos estáticos desde la carpeta de estática de la aplicación. Este comportamiento es posible mediante el código siguiente 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']))

Puedes organizar los archivos dentro de la carpeta estática de la aplicación mediante cualquier estructura de carpetas que quieras y usar rutas de acceso relativas dentro de la carpeta estática para hacer referencia a los archivos.

Uso de un archivo CSS estático en la plantilla HTML

Siga estos pasos para agregar un archivo CSS a la aplicación y, a continuación, use la hoja de estilos CSS en la plantilla de index.html:

En Explorador de soluciones, haga clic con el botón derecho en la carpeta HelloDjangoApp del proyecto, seleccione Agregar>Nueva carpetay asigne un nombre a la carpeta estática.
Haga clic con el botón derecho en la carpeta estática de y seleccione Agregar>Nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla hoja de estilos , nombre el archivo site.csy luego, seleccione Agregar.

Visual Studio agrega el archivo site.css al proyecto y abre el archivo en el editor. Este es un ejemplo de la estructura de proyecto de Django actualizada:
Reemplace el contenido del archivo site.css por los estilos siguientes:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Reemplace el contenido del archivo HelloDjangoApp/templates/index.html por el marcado siguiente:
```
<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>
```
Este código reemplaza el elemento HTML <strong> del paso 2 de la serie de tutoriales por un elemento <span> que hace referencia a la clase de estilo message. El uso de una clase de estilo de esta manera proporciona más flexibilidad al aplicar estilo al elemento HTML.
Para guardar los cambios del proyecto, seleccione Archivo>Guardar todo o use el método abreviado de teclado Ctrl+Mayús+S. (Este paso no es necesario porque, a medida que desarrolla el proyecto, Visual Studio guarda los archivos automáticamente).
Ejecute el proyecto y observe los resultados. Cuando haya terminado, detenga la aplicación.
(Opcional) Puede confirmar los cambios en el control de código fuente y actualizar el repositorio remoto. Para obtener más información, consulte Confirmar cambios en el control de código fuente en el paso 2 de esta serie de tutoriales.

Use la etiqueta {% carga estática %}

La instrucción {% load static %} debe estar presente en el archivo index.html antes de que el sitio haga referencias relativas a archivos estáticos en elementos HTML como <head> y <body>. En el ejemplo que se muestra en esta sección, "archivos estáticos" hace referencia a un conjunto de etiquetas de plantilla de Django personalizado. El conjunto de etiquetas permite usar la sintaxis de {% static %} para hacer referencia a archivos estáticos. Sin la etiqueta {% load static %}, verá una excepción cuando se ejecuta la aplicación.

Agregue referencias sin la etiqueta {% carga estática %}

También puede configurar referencias relativas al sitio a archivos estáticos en el marcado HTML sin usar la etiqueta {% load static %}. En este caso, tú especificas la ubicación de la carpeta estática dentro de la jerarquía de carpetas del proyecto de Django.

<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>

Organización de archivos y carpetas estáticos

Puede agregar otros archivos CSS, JavaScript y HTML en la carpeta de estática según sus necesidades del proyecto. Una manera típica de organizar archivos estáticos es crear subcarpetas denominadas fuentes, scriptsy contenido (para hojas de estilo y cualquier otro archivo). En cada caso, recuerde incluir las carpetas de la ruta de archivo relativa en las referencias {% static %}.

Agregar página a la aplicación Django

Agregar otra página a la aplicación django implica las siguientes tareas:

Adición de una función de Python que define la vista
Agregar una plantilla para el marcado HTML de la página
Actualización de las rutas de dirección URL en el archivo de urls.py del proyecto de Django

Siga estos pasos para agregar una página Acerca de (/about) al proyecto de HelloDjangoApp y vínculos a esa página desde la página principal:

En Explorador de Soluciones, haga clic con el botón derecho en la carpeta templates/HelloDjangoApp de tu proyecto y seleccione Agregar>Nuevo elemento.

Sugerencia

Si no ve el comando Nuevo elemento en el menú Agregar, asegúrese de detener su aplicación Django para que Visual Studio salga del modo de depuración, si es necesario.
En el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla página HTML de, asigne al archivo el nombre about.htmly, a continuación, seleccione Agregar.

Reemplace el contenido del archivo about.html por el siguiente marcado HTML:

<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>

En un paso posterior, reemplazará el vínculo explícito a la página principal por una barra de navegación.

En el archivo HelloDjangoApp/views.py, 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."
      }
   )

En el archivo basicProject/urls.py del proyecto de Django, agregue la ruta de acceso de la página about como último elemento de la matriz urlPatterns:

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

En el archivo templates/HelloDjangoApp/index.html, agregue la siguiente marcación como la primera instrucción en el elemento <body>:
```
<div><a href="about">About</a></div>
```
Este marcado agrega un vínculo a la página /about de la aplicación Django. En un paso posterior, reemplazará este vínculo por una barra de navegación.
Guarde los cambios del proyecto y vuelva a ejecutar el proyecto. Vaya a la página /about y compruebe la navegación entre las distintas páginas de la aplicación.
Cuando haya terminado, detenga la aplicación.

Ruta a la página "index"

Al intentar acceder a la página /index de su aplicación en ejecución, verá un error Página no encontrada (404).

Aunque el archivo HelloDjangoApp/views.py tiene una función denominada index, los patrones de enrutamiento de direcciones URL del archivo BasicProject/urls.py del proyecto de Django no contienen una expresión regular que coincida con la cadena index. La expresión actual de la página "index" de la aplicación es ^$. Para que coincida con la cadena index, debe agregar otra entrada de dirección URL para el patrón ^index$.

En la sección siguiente se describe cómo es mejor usar la etiqueta {% url '<pattern_name>' %} de la plantilla de página para hacer referencia al nombre de de un patrón. En este caso, Django crea la dirección URL adecuada para usted. Por ejemplo, puede reemplazar el marcado de <div><a href="home">Home</a></div> en las plantillas de /HelloDjangoApp/about.html por el marcado <div><a href="{% url 'index' %}">Home</a></div>. El uso de la cadena de 'index' ahora funciona porque el primer patrón de dirección URL del archivo urls.py se denomina 'index'. También puede usar 'home' para hacer referencia al segundo patrón.

Use la herencia de plantillas para el encabezado y la navegación

En lugar de vínculos de navegación explícitos en cada página, muchas aplicaciones web tienen un encabezado de personalización de marca y una barra de navegación que proporciona los vínculos de página más importantes, menús emergentes, etc. Para garantizar la coherencia dentro de la aplicación, el encabezado y la barra de navegación deben ser los mismos en todas las páginas, pero no es necesario repetir el mismo código en cada plantilla de página. Puede definir las partes comunes de todas las páginas en un único archivo.

El sistema de plantillas de Django proporciona dos maneras de reutilizar elementos específicos en varias plantillas:

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 usar una variable si desea cambiar la ruta de acceso dinámicamente en el código. Las inclusiones se usan normalmente 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 la sintaxis {% extends <template_path> %} al principio de una plantilla de página para especificar una plantilla base compartida sobre la que la plantilla referida se construye. La herencia se usa normalmente para definir un diseño compartido, una barra de navegación y otras estructuras para las páginas de una aplicación. Este enfoque requiere plantillas de referencia para agregar o modificar solo áreas específicas de la plantilla base denominadas bloques .

Para ambos enfoques, el valor de <template_path> es relativo a las plantillas de la aplicación carpeta (también se permiten../ o ./).

Una plantilla base delimita bloques mediante las etiquetas {% block <block_name> %} y {% endblock %}. Si una plantilla de referencia usa etiquetas con el mismo nombre de bloque, el contenido del bloque de la plantilla de referencia invalida el bloque coincidente en la plantilla base.

En los pasos siguientes se muestra la herencia de plantillas:

En el Explorador de Soluciones, haga clic con el botón derecho en la carpeta templates/HelloDjangoApp y cree un nuevo archivo a partir de la plantilla Página HTML con el nombre layout.html.

Reemplace el contenido del archivo layout.html por el siguiente marcado HTML:

<!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; 2024</p>
      </footer>
   </div>
</body>
</html>

Esta plantilla contiene un bloque denominado content, que identifica todo el contenido que deben reemplazar las páginas de referencia.

En el archivo HelloDjangoApp/static/site.css, agregue los estilos siguientes al final del archivo:

.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;
}

Estas definiciones de estilo generan un resultado interesante para este ejercicio. Este tutorial no muestra el diseño dinámico.

Reemplace el contenido del archivo templates/HelloDjangoApp/index.html por el código siguiente:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
La plantilla de index ahora hace referencia a la plantilla base e invalida el bloque content. Puede ver que mediante la herencia, esta plantilla se simplifica.
Reemplace el contenido del archivo templates/HelloDjangoApp/about.html por el código siguiente, por lo que la plantilla de about también hace referencia a la plantilla base e invalida el bloque content:
```
{% extends "HelloDjangoApp/layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Vuelva a ejecutar la aplicación y observe los resultados. Use los vínculos de la barra de navegación para cambiar entre las páginas de la aplicación.
Cuando haya terminado, detenga la aplicación y guarde los cambios del proyecto.
Dado que ha realizado cambios sustanciales en la aplicación, es un buen momento para guardar los cambios en un repositorio de Git. Para obtener más información, consulte Confirmar cambios en el control de código fuente en el paso 2 de esta serie de tutoriales.

Paso siguiente

paso 4: Usar la plantilla completa de proyecto web de Django

Compartir a través de