Flask App laedt CSS nicht
Verfasst: Donnerstag 7. November 2019, 21:21
Hallo,
ich folge einen Kurs auf Talk-Python, welcher einfach teilweise viel zu schnell ist und nicht wirklich Support neben der Video reihe anbietet. Deshalb hoffe ich dass ihr mir helfen könnt.
Zu meinem Problem:
Ich verwende PyCharm Pro und dies ist das erste Mal dass ich mit diesem IDE arbeite.
Ich möchte eine Dynamische html seite erstellen, via Flask und Jinja2. Mein code sieht so aus
Python:
HTML_index:
CSS:
Ordner Struktur:
Ich bin ehrlich gesagt ziemlich Ratlos. Ich habe es genauso referenziert wie im Video und auch die gleiche Ordner Struktur, deshalb weiß ich nicht wo der Wurm drin ist.
Ich habe auch natürlich schon versucht das css anders zu referenzieren:
oder via full path.
Was mich stuzig macht ist, dass wenn ich Änderungen vornehme im CSS, diese aktualisiert werden wenn ich meinen PC einmal neustarte
Es reicht nicht PyCharm zu schließen.
Danke fürs lesen und für jede Hilfe die mir geboten wird.
ich folge einen Kurs auf Talk-Python, welcher einfach teilweise viel zu schnell ist und nicht wirklich Support neben der Video reihe anbietet. Deshalb hoffe ich dass ihr mir helfen könnt.
Zu meinem Problem:
Ich verwende PyCharm Pro und dies ist das erste Mal dass ich mit diesem IDE arbeite.
Ich möchte eine Dynamische html seite erstellen, via Flask und Jinja2. Mein code sieht so aus
Python:
Code: Alles auswählen
import flask
app = flask.Flask(__name__)
def get_latest_packages():
return [
{'name': 'flask','version': '1.2.3'},
{'name': 'sqlalchemy', 'version': '2.2.0'},
{'name': 'passlib', 'version': '3.0.0'}
]
@app.route('/')
def index():
test_packages = get_latest_packages()
return flask.render_template('index.html', packages = test_packages)
@app.route('/about')
def about():
return flask.render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)Code: Alles auswählen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python Package Index Demo</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/css/site.css"/>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<div class="main_content">
<h1>Python Packages Index</h1>
<h2>Packages</h2>
{% for p in packages %}
<div>
<span class="title">
{{ p.name.upper() }}
</span>
<span class="version">
{{ p.version }}
</span>
</div>
{% endfor %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>CSS:
Code: Alles auswählen
.title {
font-weight: bold;
}
.main_content {
padding: 20px;
}
nav {
background-color: #000;
padding: 10px;
font-size: 20px;
color: white;
}
nav > a {
color: white;
margin-right: 10px;
}Code: Alles auswählen
Auflistung der Ordnerpfade
Volumeseriennummer : 62A0-61BB
C:.
├───.idea
│ └───inspectionProfiles
├───static
│ ├───css
│ ├───img
│ └───js
├───templates
├───venv
│ ├───Include
│ ├───Lib
│ │ └───site-packages
│ │ ├───click
│ │ │ └───__pycache__
│ │ ├───Click-7.0.dist-info
│ │ ├───flask
│ │ │ ├───json
│ │ │ │ └───__pycache__
│ │ │ └───__pycache__
│ │ ├───Flask-1.1.1.dist-info
│ │ ├───itsdangerous
│ │ │ └───__pycache__
│ │ ├───itsdangerous-1.1.0.dist-info
│ │ ├───jinja2
│ │ │ └───__pycache__
│ │ ├───Jinja2-2.10.3.dist-info
│ │ ├───markupsafe
│ │ │ └───__pycache__
│ │ ├───MarkupSafe-1.1.1.dist-info
│ │ ├───pip-19.0.3-py3.7.egg
│ │ │ ├───EGG-INFO
│ │ │ └───pip
│ │ │ ├───_internal
│ │ │ │ ├───cli
│ │ │ │ ├───commands
│ │ │ │ ├───models
│ │ │ │ ├───operations
│ │ │ │ ├───req
│ │ │ │ ├───utils
│ │ │ │ └───vcs
│ │ │ └───_vendor
│ │ │ ├───cachecontrol
│ │ │ │ └───caches
│ │ │ ├───certifi
│ │ │ ├───chardet
│ │ │ │ └───cli
│ │ │ ├───colorama
│ │ │ ├───distlib
│ │ │ │ └───_backport
│ │ │ ├───html5lib
│ │ │ │ ├───filters
│ │ │ │ ├───treeadapters
│ │ │ │ ├───treebuilders
│ │ │ │ ├───treewalkers
│ │ │ │ └───_trie
│ │ │ ├───idna
│ │ │ ├───lockfile
│ │ │ ├───msgpack
│ │ │ ├───packaging
│ │ │ ├───pep517
│ │ │ ├───pkg_resources
│ │ │ ├───progress
│ │ │ ├───pytoml
│ │ │ ├───requests
│ │ │ ├───urllib3
│ │ │ │ ├───contrib
│ │ │ │ │ └───_securetransport
│ │ │ │ ├───packages
│ │ │ │ │ ├───backports
│ │ │ │ │ └───ssl_match_hostname
│ │ │ │ └───util
│ │ │ └───webencodings
│ │ ├───werkzeug
│ │ │ ├───contrib
│ │ │ │ └───__pycache__
│ │ │ ├───debug
│ │ │ │ ├───shared
│ │ │ │ └───__pycache__
│ │ │ ├───middleware
│ │ │ │ └───__pycache__
│ │ │ ├───wrappers
│ │ │ │ └───__pycache__
│ │ │ └───__pycache__
│ │ └───Werkzeug-0.16.0.dist-info
│ └───Scripts
└───__pycache__Ich habe auch natürlich schon versucht das css anders zu referenzieren:
Code: Alles auswählen
<link href="{{ url_for('static', filename='relative/path/from/static/yourStyle.css') }}" rel="stylesheet">Was mich stuzig macht ist, dass wenn ich Änderungen vornehme im CSS, diese aktualisiert werden wenn ich meinen PC einmal neustarte
Es reicht nicht PyCharm zu schließen.
Danke fürs lesen und für jede Hilfe die mir geboten wird.