Estoy renderizando una plantilla, que estoy intentando diseñar con una hoja de estilo externa. La estructura del archivo es la siguiente.
/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/styles
- mainpage.cssmainpage.html tiene este aspecto
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
</head>
<body>
<!-- content --> Sin embargo, ninguno de mis estilos se está aplicando. ¿Tiene algo que ver con el hecho de que html es una plantilla que estoy renderizando? La pitón se ve así.
return render_template("mainpage.html", variables..)Sé que esto está funcionando, porque todavía puedo renderizar la plantilla. Sin embargo, cuando intenté mover mi código de estilo de un bloque de "estilo" dentro de la etiqueta "head" del html a un archivo externo, todo el estilo desapareció, dejando una página html vacía. ¿Alguien ve algún error con mi estructura de archivos?
<script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>En las plantillas jinja2 (que usa el matraz), use
Sin embargo, los
staticarchivos suelen estar en lastaticcarpeta, a menos que se configure de otro modo.fuente
He leído varios hilos y ninguno de ellos solucionó el problema que la gente está describiendo y yo también lo he experimentado.
Incluso intenté alejarme de conda y usar pip, para actualizar a python 3.7, probé todos los códigos propuestos y ninguno de ellos se solucionó.
Y aquí está el por qué (el problema):
por defecto, python / flask busca la estática y la plantilla en una estructura de carpetas como:
puede verificar usted mismo usando el depurador en Pycharm (o cualquier otra cosa) y verificar los valores en la aplicación (app = Flask ( nombre )) y buscar teamplate_folder y static_folder
para solucionar esto, debe especificar los valores al crear la aplicación algo como esto:
la ruta TEMPLATE_DIR y STATIC_DIR dependen de la ubicación de la aplicación de archivo. en mi caso, vea la imagen, estaba ubicado dentro de una carpeta bajo src.
puede cambiar la plantilla y las carpetas estáticas como desee y registrarse en la aplicación = Frasco ...
En verdad, comencé a experimentar el problema al jugar con la carpeta y, a veces, trabajé a veces no. esto soluciona el problema de una vez por todas
el código html se ve así:
Este es el código
Aquí la estructura de las carpetas
fuente
Sigues teniendo problemas después de seguir la solución proporcionada por codegeek
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">:?En Google Chrome, presionar el botón de recarga (F5) no recargará los archivos estáticos. Si ha seguido la solución aceptada pero aún no ve los cambios que ha realizado en CSS, presione
ctrl + shift + Rpara ignorar los archivos en caché y volver a cargar los archivos estáticos.En Firefox, al presionar el botón de recarga aparece para recargar los archivos estáticos.
En Edge, presionar el botón Actualizar no recarga el archivo estático.
ctrl + shift + RSe supone que presionar ignora los archivos en caché y recarga los archivos estáticos. Sin embargo, esto no funciona en mi computadora.fuente
Estoy ejecutando la versión 1.0.2 de flask en este momento. Las estructuras de archivos anteriores no funcionaron para mí, pero encontré una que sí, que es la siguiente:
(Tenga en cuenta que 'estática' y 'plantillas' son carpetas, que deben tener exactamente el mismo nombre).
Para verificar qué versión de matraz está ejecutando, debe abrir Python en la terminal y escribir lo siguiente en consecuencia:
fuente
La estructura del proyecto del matraz es diferente. Como mencionaste en la pregunta, la estructura del proyecto es la misma, pero el único problema es la carpeta de estilos. La carpeta de estilos debe estar dentro de la carpeta estática.
fuente
Un punto más para agregar a este hilo.
Si agrega un guión bajo en su nombre de archivo .css, entonces no funcionaría.
fuente
Un punto más para agregar Junto con las respuestas arriba votadas, asegúrese de que la línea a continuación se agregue al
app.pyarchivo:De lo contrario, el matraz no podrá detectar la carpeta estática.
fuente
Si alguno de los métodos anteriores no funciona y su código es perfecto, intente actualizar presionando Ctrl + F5. Borrará todos los chaces y luego volverá a cargar el archivo. Funcionó para mí.
fuente
Estoy bastante seguro de que es similar a la plantilla de Laravel, así es como hice la mía.
Referido: problema de ruta de archivos CSS
Aplicación de matraz simple que lee su contenido de un archivo .html. ¿Se bloquea la hoja de estilo externa?
fuente