Tutorial: Servicio de archivos estáticos y uso de la herencia de plantillas con Flask 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 Flask en Visual Studio.

Los pasos anteriores de esta serie de tutoriales crean una aplicación de Flask 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 Flask 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 Flask
Adición de más páginas a la aplicación Flask
Uso de la herencia de plantillas para crear un encabezado y navegación entre páginas

Prerrequisitos

Una solución de Visual Studio y un proyecto de aplicación de Flask creados en Paso 1: Crear proyecto de Flask y actualizado en Paso 2: Refactorizar proyecto de Flask.

Exploración de plantillas de elementos en Visual Studio

A medida que desarrolla una aplicación de Flask, 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 navegador utiliza únicamente otros archivos como CSS y JavaScript, por lo que el servidor host simplemente los entrega as-is cuando se solicitan. Estos tipos de archivos se conocen como archivos "estáticos" y Flask puede entregarlos automáticamente sin necesidad de escribir ningún código. En los archivos HTML, por ejemplo, puede hacer referencia a archivos estáticos mediante una ruta de acceso relativa en el proyecto. El primer procedimiento de esta sección muestra cómo usar un archivo CSS estático con una plantilla de página existente.

Cuando necesite entregar un archivo estático desde el código, como a través de una implementación de punto de conexión de API, Flask proporciona un método práctico. Puede hacer referencia a archivos mediante rutas de acceso relativas dentro de una carpeta denominada estáticas en la raíz del proyecto. El segundo procedimiento de esta sección muestra cómo trabajar con un archivo de datos estático simple a partir del código.

En ambos procedimientos, puede organizar los archivos en la carpeta estática según sus preferencias.

Uso de un archivo CSS estático en una plantilla

Siga estos pasos para usar un archivo estático en una plantilla:

En Explorador de soluciones, haga clic con el botón derecho en la carpeta HelloFlask de su proyecto, seleccione Agregar>Nueva carpetay nombre la carpeta como static.
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 de hoja de estilos , asigne al archivo el nombre site.csy, a continuación, 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 Flask actualizada:
Reemplace el contenido del archivo site.css por los estilos siguientes:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Reemplace el contenido del archivo HelloFlask/templates/index.html por el marcado siguiente:
```
<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>
```
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+Shift+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.

Servir archivos estáticos desde código

Flask proporciona una función denominada send_static_file a la que puede llamar desde el código para hacer referencia a cualquier archivo dentro de la carpeta de estática del proyecto. El siguiente proceso crea un punto de conexión de API simple que devuelve un archivo de datos estático:

En la carpeta estática, cree un archivo de datos JSON estático denominado data.json. Puede usar la plantilla de archivo texto como base para el archivo.
Reemplace el contenido del archivo JSON por el código siguiente que proporciona algunos datos de ejemplo para demostrar el mecanismo:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
En el archivo HelloFlask/views.py, agregue una función con el punto de conexión de ruta /api/data que devuelve el archivo de datos estático mediante el método send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Guarde los cambios del proyecto y vuelva a ejecutar el proyecto. Navegue hacia el endpoint de la ruta /api/data y confirme que la aplicación devuelve el archivo estático.
Cuando haya terminado, detenga la aplicación.

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 estilos y cualquier otro archivo).

Uso de rutas de dirección URL y parámetros de consulta de las API

Puede controlar las variables de dirección URL y los parámetros de consulta con las API cuando trabaje con Flask. Para obtener más información, consulte Uso de rutas de URL variables y parámetros de consulta en el Paso 1 de esta serie de tutoriales.

Agregar página a la aplicación Flask

Agregar otra página a la aplicación flask 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 views.py del proyecto de Flask

Siga estos pasos para agregar una página "Acerca de" (/about) al proyecto BasicProject y crear 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 HelloFlask/templates del proyecto y seleccione Agregar>Nuevo Elemento.

Sugerencia

Si no ves el comando Nuevo elemento en el menú Agregar, asegúrate de detener la aplicación Flask para que Visual Studio salga del modo de depuración, según sea 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>
      <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 HelloFlask/views.py, agregue una función denominada about que use la plantilla:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

En el archivo HelloFlask/templates/index.html, agregue el siguiente etiquetado como 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 Flask. 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.

Asignar un nombre a la función de página

Flask no impone restricciones ni requisitos en el nombre de la función de página. El decorador @app.route determina las direcciones URL para las que Flask llama a la función para generar una respuesta. Normalmente, los desarrolladores asignan el nombre de la función de página a la ruta, pero este tipo de coincidencia no es necesaria.

Utilice la herencia de plantillas para encabezado y 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 Flask (Jinja de forma predeterminada) 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. La inclusión se utiliza normalmente en el cuerpo de una página para incorporar la plantilla compartida en una ubicación específica de la página.
Herencia usa la sintaxis {% extends <template_path> %} al principio de una plantilla de página para especificar una plantilla base compartida en la que se basa la plantilla de referencia. 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 .

En ambos enfoques, el valor de <template_path> es relativo a la carpeta de plantillas de la aplicación (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 Explorador de Soluciones, haga clic con el botón derecho en la carpeta HelloFlask/templates, y cree un 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>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('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 HelloFlask/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 HelloFlask/templates/index.html por el marcado siguiente:
```
{% extends "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 HelloFlask/templates/about.html por el marcado siguiente, por lo que la plantilla de about también hace referencia a la plantilla base e invalida el bloque content:
```
{% extends "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 Realizar cambios en el control de código fuente en el paso 2 de esta serie de tutoriales.

Revisión del tutorial

Enhorabuena por completar este tutorial sobre Flask en Visual Studio.

En este tutorial, ha aprendido a:

Creación de un proyecto de Flask con varias páginas
Uso de plantillas para crear diferentes vistas de página
Proporcionar archivos estáticos, agregar páginas y usar la herencia de plantillas

Documentación del diseñador de plantillas de Jinja (jinja.pocoo.org)
url_for en la documentación del objeto de la aplicación de Flask (flask.pocoo.org)
Código fuente del tutorial en GitHub (Microsoft/python-sample-vs-learning-flask)

Compartir a través de