Aplikacja webowa w Pythonie – Flask – Static Files – #4
Do tej pory udało nam się już skonfigurować aplikację, przygotować jej strukturę oraz opisać routing. Dzisiaj podłączymy jeszcze pliki CSS i JS, aby nasza apka przestała być taka brzydka :)
Static files – czyli CSS i JS we Flasku
Skorzystam z MaterializeCSS (oczywiście Bootstrap czy inny podobny framework również wchodzi w grę). Materialize ma trzy foldery – js, css oraz fonts. Wszystkie trzy wraz z zwartością przeklejam do folderu static.
Co teraz? Tak naprawdę wszystkie zmiany, których dokonamy, znajdą się w pliku base.html. Na początek podłączmy css-y, czyli dodajmy do sekcji <head>:
|
1 2 3 4 |
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/materialize.css') }}"> <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
Pierwsze dwie linijki to standardowy html – korzystamy jedynie z flaskowego url_for, by nie hardkodować ścieżki do plików. Z racji, że w folderze static umieściliśmy folder css i dopiero w nim znajdują się pliki, musi to wyglądać właśnie w taki sposób. Gdybyśmy utworzyli css-y bez folderu (np. static/style.css), wówczas wystarczyłoby napisać {{url_for('static', filename='style.css')}}.
Trzecia linijka jest niepotrzebna dla Flaska, ale chciałabym, by aplikacja od początku była responsywna, więc dodałam ją od razu.
Przyszedł czas na sekcję <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<body> <nav class="light-blue"> <div class="nav-wrapper"> <div class="container"> <a href="#" class="brand-logo">Logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="{{url_for('index')}}">Home</a></li> <li><a href="{{url_for('about')}}">O mnie</a></li> <li><a href="{{url_for('contact')}}">Kontakt</a></li> </ul> </div> </div> </nav> <main> <div class="section no-pad-bot" id="index-banner"> <div class="container"> <h1 class="header center">Moja aplikacja</h1> <div class="row center"> <div id="content">{% block content %}{% endblock %}</div> </div> </div> </div> </main> <footer class="page-footer orange"> <div class="container"> <div class="row"> </div> </div> <div class="footer-copyright"> <div class="container"> Copyright </div> </div> </footer> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/materialize.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script> </body> |
- <nav> – nawigacja – wykorzystałam możliwości MaterializeCSS i nazwy jego klas, aby została wyświetlona w ładny sposób
- <main> – właściwa część aplikacji – klasy i ID z frameworka również wpływają na wygląd aplikacji. W divie content, tak jak wcześniej, znalazł się block z zawartością, która zostaje dopisana przez layouty-dzieci
- <footer> – stopka – również stworzona z pomocą Materialize, póki co pusta
- tagi <script> – zamykające body – pierwszy z nich wywołuje jQuery, niezbędne do JS-ów Materialize. Kolejne dwa tagi działają identycznie jak te wywołujące CSS-y w <head>
Pewnie zwróciliście uwagę, że pliki css/style.css oraz js/script.js nie istnieją – będą to nasze customowe style i skrypty, które będziemy chcieli wykorzystać w aplikacji. Póki co utworzyłam tylko style.css z zawartością:
|
1 2 3 4 5 6 7 8 9 |
body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } |
Pozwoli nam to “przyczepić” footera do dolnej krawędzi przeglądarki, nawet gdy treść będzie za krótka, by wypełnić całą jej wysokość. Nie jest to konieczne, ale ładne :)
Efekt:
