Crear una carpeta estática en Flask
Aprenderemos, con esta explicación, cómo usar activos estáticos o archivos estáticos dentro del directorio estático. También aprenderemos cómo importar nuestro archivo CSS personalizado a Flask.
Crear una carpeta estática en Flask
En una aplicación Flask, hay una forma extraña de mostrar imágenes y cargarlas en sus clases de CSS personalizadas y usar su JavaScript personalizado. Entonces, sigamos adelante y comencemos.
Como estamos empezando desde cero, crearemos un nuevo proyecto. Importaremos algunas clases de Flask, escribiremos el módulo en minúsculas y luego crearemos un objeto de aplicación.
from flask import Flask, render_template
app = Flask(__name__)
Crearemos una función de página de inicio básica llamada index(). Estableceremos las dos raíces en decoradores individuales como '/home' y '/'.
El propósito de agregar dos raíces es mostrarle que podemos usar más de una ruta() en una sola función, lo que significa que ambas rutas diferentes pueden acceder a esta función.
Usaremos la palabra clave return para devolver el render_template() y pasar el archivo home.html.
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
Para ejecutar nuestra aplicación, necesitamos usar el siguiente código.
El método run() ayudará a ejecutar la aplicación Flask. Debemos pasar el debug igual a True porque queremos ver la depuración, pero puedes desactivarlo escribiendo False cuando lleves tu sitio al nivel de producción.
if __name__ == "__main__":
app.run(debug=True)
Ahora, necesitamos configurar una carpeta de plantilla donde colocaremos todos nuestros archivos HTML; para ello, crearemos una nueva carpeta y la llamaremos templates. Luego, necesitaremos crear otra carpeta nueva, a la que llamaremos static.
Ahora, es posible que ya podamos decir dónde colocaremos archivos específicos. Entraremos en la carpeta templates y crearemos un nuevo archivo llamado base.html, y luego haremos uno nuevo llamado home.html.
Escribamos un código HTML muy básico dentro del archivo base.html, y en el head, pondremos un título de bloque, y dentro de la etiqueta body, añadiremos otro contenido de bloque.
La aplicación Flask establece un valor por defecto para todos nuestros archivos static, que se guardarán en la carpeta llamada static, lo que significa que hay que hacer esta carpeta estática. Ahora, haremos referencia al nombre de archivo específico que queremos; pasaremos {{ url_for('static',filename='style.css') }} al atributo href y pondremos comillas dobles alrededor.
De esta forma, usaremos el código de Python en la etiqueta link para obtener la URL de la carpeta static, que nos dará la URL y luego especificará el nombre exacto del archivo.
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Ahora, tenemos nuestra plantilla base. Ampliemos esta plantilla base usando el código jinja {% extends 'base.html' %} dentro de nuestro archivo home.html y usemos algunos bloques para acceder a los elementos base.html.
{% extends 'base.html' %}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h1> Home Page</h1>
{% endblock %}
Ahora, hablaremos sobre la creación de un archivo static dentro de nuestro directorio static y cómo podemos importar nuestro CSS personalizado. Necesitaremos crear un nuevo archivo CSS dentro de nuestro directorio static y llamarlo style.css; no importa cómo lo llames.
Puede cambiar el nombre del archivo en lugar de la extensión, pero asegúrese de recordar el nombre. Ahora escribiremos solo un estilo básico dentro del archivo style.css para mantenerlo simple.
Pondremos un selector CSS body, usaremos la propiedad color y pasaremos el valor del color crimson.
body {color: crimson;}
Y hemos terminado. Ahora, estamos listos para ir y ejecutar esta aplicación.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/home")
@app.route("/")
def index():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True)
Ahora, abra un navegador web y navegue a la página de inicio con un encabezado.
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn