Menu

  • Home
  • Flask Tutorial
  • WebGL
  • Kontakt

Alicja | Theme by Theme in Progress | Proudly powered by WordPress

Alicja & IT
  • Home
  • Flask Tutorial
  • WebGL
  • Kontakt

Aplikacja webowa w Pythonie – Flask – Static Files – #4

December 29, 2016Flask Standard

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>

  1. <nav> – nawigacja – wykorzystałam możliwości MaterializeCSS i nazwy jego klas, aby została wyświetlona w ładny sposób
  2. <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
  3. <footer> – stopka – również stworzona z pomocą Materialize, póki co pusta
  4. 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:

6

Flask:

  • Aplikacja webowa w Pythonie – Flask – Hello World – #1
  • Aplikacja webowa w Pythonie – Flask – Template’y – #2
  • Aplikacja webowa w Pythonie – Flask na Windowsie
  • Aplikacja webowa w Pythonie – Flask – Routing – #3
  • Aplikacja webowa w Pythonie – Flask – Static Files – #4
  • Aplikacja webowa w Pythonie – Flask – Łączenie z bazą danych – #5
  • Aplikacja webowa w Pythonie – Flask – Formularze – #6
  • Aplikacja webowa w Pythonie – Flask – Struktura większej aplikacji, czyli Blueprint – #7
  • Aplikacja webowa w Pythonie – Flask – Logowanie – #8
  • Aplikacja webowa w Pythonie – Flask – Obsługa błędów – #9
  • Aplikacja webowa w Pythonie – Flask – Migracja z localhosta na serwer, czyli co może pójść nie tak z bazą danych – #10
  • Aplikacja webowa w Pythonie – Flask – Deploy na Azure’a – #11

Facebook

Kontakt

kontakt[at]alicja.it

Kategorie

  • Flask (12)
  • Luźne (2)
  • PyGame (5)
  • Relacje z wydarzeń (3)
  • WebGL (3)