Ik render een sjabloon die ik probeer te stylen met een externe stylesheet. De bestandsstructuur is als volgt.
/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/styles
- mainpage.css
mainpage.html ziet er zo uit
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
</head>
<body>
<!-- content -->
Geen van mijn stijlen wordt echter toegepast. Heeft het iets te maken met het feit dat de html een sjabloon is die ik aan het renderen ben? De python ziet er zo uit.
return render_template("mainpage.html", variables..)
Ik weet dat veel werkt, omdat ik de sjabloon nog steeds kan renderen. Toen ik echter probeerde mijn stylingcode van een “style” -blok in de “head” -tag van de html naar een extern bestand te verplaatsen, verdween alle styling en bleef er een kale html-pagina over. Ziet iemand fouten in mijn bestandsstructuur?
Antwoord 1, autoriteit 100%
U moet een ‘statische’ mapconfiguratie hebben (voor css/js-bestanden), tenzij u deze specifiek overschrijft tijdens de initialisatie van Flask. Ik neem aan dat je het niet hebt overschreven.
Uw directorystructuur voor css zou er als volgt uit moeten zien:
/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/static
/styles
- mainpage.css
Merk op dat uw /styles directory onder /static moet staan
Doe dit dan
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">
Flask zoekt nu naar het css-bestand onder static/styles/mainpage.css
Antwoord 2, autoriteit 6%
Gebruik in jinja2-sjablonen (die in de fles worden gebruikt)
href="{{ url_for('static', filename='mainpage.css')}}"
De staticbestanden bevinden zich echter meestal in de map static, tenzij anders geconfigureerd.
Antwoord 3, autoriteit 4%
Nog steeds problemen na het volgen van de oplossing van codegeek: <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?
In Google Chromezal het indrukken van de herlaadknop (F5) de statische bestanden niet herladen. Als je de geaccepteerde oplossing hebt gevolgd maar de wijzigingen die je in CSS hebt aangebracht nog steeds niet ziet, druk dan op ctrl + shift + Rom de cachebestanden te negeren en de statische bestanden opnieuw te laden.
In Firefoxverschijnt het indrukken van de herlaadknop om de statische bestanden opnieuw te laden.
Als u in Edgeop de vernieuwingsknop drukt, wordt het statische bestand niet opnieuw geladen. Als u op ctrl + shift + Rdrukt, wordt verondersteld dat de bestanden in de cache worden genegeerd en de statische bestanden opnieuw worden geladen. Dit werkt echter niet op mijn computer.
Antwoord 4, autoriteit 2%
Ik heb meerdere threads gelezen en geen van hen loste het probleem op dat mensen beschrijven en die ik ook heb ondervonden.
Ik heb zelfs geprobeerd om van conda af te stappen en pip te gebruiken, om te upgraden naar python 3.7, ik heb alle voorgestelde codering geprobeerd en geen ervan is opgelost.
En hier is waarom (het probleem):
Standaard doorzoekt python/flask de static en de sjabloon in een mappenstructuur zoals:
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
and
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>
u kunt zelf verifiëren met behulp van de debugger op Pycharm (of iets anders) en de waarden in de app controleren (app = Flask(name)) en zoeken naar teamplate_folder en static_folder
om dit op te lossen, moet u de waarden specificeren bij het maken van de app, ongeveer als volgt:
TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')
# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)
het pad TEMPLATE_DIR en STATIC_DIR zijn afhankelijk van waar de bestandsapp zich bevindt. in mijn geval, zie de afbeelding, deze bevond zich in een map onder src.
u kunt de sjabloon en statische mappen naar wens wijzigen en u registreren in de app = Flask…
Eerlijk gezegd begon ik het probleem te ervaren bij het rommelen met mappen en soms werkte het soms niet. dit lost het probleem voor eens en voor altijd op
de html-code ziet er als volgt uit:
<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >
Hier de structuur van de mappen
Antwoord 5
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='name of css file') }}">
als je je CSS hebt gelinkt zoals hierboven en het werkt niet, dan kun je het volgende doen:-
- chroom=> ctrl + shift + R
- rand=> ctrl + shift + R
- firefox=> ctrl + shift + R
Antwoord 6
Als een van de bovenstaande methoden niet werkt en je code is perfect, probeer dan eens te vernieuwen door op ( Ctrl + F5 ) te drukken voor Windows en voor Mac ( houd Cmd en Shift ingedrukt en druk vervolgens op R [Command + Shift + R ] ). Het zal alle caches wissen en vervolgens het bestand opnieuw laden. Het werkte voor mij.
Antwoord 7
Ik gebruik nu versie 1.0.2 van Flask.
De bovenstaande bestandsstructuren werkten niet voor mij, maar ik vond er een die wel werkte, namelijk:
app_folder/ flask_app.py/ static/ style.css/ templates/
index.html
(Houd er rekening mee dat ‘static’ en ‘templates’ mappen zijn die exact dezelfde naam moeten hebben.)
Om te controleren welke versie van flask u gebruikt, moet u Python openen in terminal en het volgende typen:
fles importeren
fles –version
Antwoord 8
Nog een punt om toe te voegen. Zorg ervoor dat de onderstaande regel, naast de bovenstaande geüpdatete antwoorden, is toegevoegd aan het bestand app.py:
app = Flask(__name__, static_folder="your path to static")
Anders kan flask geen statische map detecteren.
Antwoord 9
De structuur van het kolfproject is anders. Zoals je in de vraag al zei, is de projectstructuur hetzelfde, maar het enige probleem is de map Styles. De map Styles moet in de statische map staan.
static/styles/style.css
Antwoord 10
Nog een punt om aan deze thread toe te voegen.
Als u een onderstrepingsteken toevoegt in uw .css-bestandsnaam, werkt het niet.
Antwoord 11
Vreemd genoeg werkt het voor mij om een ”statische” map te hebben samen met het benoemen van mijn .css-bestand als “main.css”. Als ik een andere bestandsnaam heb, bijvoorbeeld “styles.css” of “mainstyle.css”, wordt de stijl niet weergegeven op de pagina wanneer deze wordt weergegeven.
Antwoord 12
Als je html en css met elkaar wilt verbinden wanneer je Blueprints in Flask gebruikt:
-
Zorg ervoor dat je de sjablonen en statische map hebt ingesteld:
core = Blueprint(‘core’, name, template_folder=’templates’, static_folder=’static’) -
voeg de url_for toe aan uw href-code:
Antwoord 13
Ik ben er vrij zeker van dat het vergelijkbaar is met de Laravel-sjabloon, dit is hoe ik de mijne deed.
<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />
Verwezen:
probleem met CSS-bestandspad