Pisanie pierwszej aplikacji Django, część 6.Link to this heading

Ten tutorial zaczyna się, gdzie skończył się Tutorial 5. Zbudowaliśmy testowaną aplikację web-ankietową, teraz dodamy arkusz stylów i grafikę.

Oprócz od HTML-u wygenerowanego przez serwer, aplikacje webowe zazwyczaj muszą serwować dodatkowe pliki – takie jak grafiki, JavaScript lub CSS – niezbędne do wyrenderowania pełnej strony internetowej. W Django nazywamy te pliki „plikami statycznymi”.

W małych projektach to nieduży problem, bo możesz po prostu trzymać pliki statyczne gdzieś, gdzie może odnaleźć je web serwer. Jednak w dużych projektach – szczególnie tych złożonych z wielu aplikacji – raczenie sobie z wieloma zbiorami plików statycznych każdej aplikacji zaczyna być wyzwaniem.

Do tego mamy django.contrib.staticfiles: zbiera ono pliki statyczne z każdej z twoich aplikacji (i każdego innego miejsca, które wskażesz) w jedną lokację, która może być prosto zaserwowana na produkcji.

Dostosuj wygląd i pracę z twoją aplikacjąLink to this heading

Najpierw stwórz katalog o nazwie static w swoim katalogu polls. Django będzie tam szukało plików statycznych, w podobny sposób jak szuka szablonów w polls/templates/.

Ustawienie Django STATICFILES_FINDERS zawiera listę finderów, które wiedzą jak odnajdywać pliki statyczne w różnych źródłach. Jednym z domyślnych jest AppDirectoriesFinder, który szuka „statycznego” podkatalogu w każdej z INSTALLED_APPS, takiego jak ten, który właśnie stworzyliśmy w polls. Panel administracyjny używa takiej samej struktury katalogów dla swoich statycznych plików.

W katalogu static, który właśnie stworzyłeś, stwórz inny katalog o nazwie polls i w nim stwórz plik o nazwie style.css. Innymi słowy twój arkusz stylów powinien być w polls/static/polls/style.css. Z powodu jak działa finder plików statycznych AppDirectoriesFinder, możesz odwoływać się do tego pliku statycznego w Django po prostu jako do polls/style.css, podobnie jak wskazujesz ścieżkę do szablonów.

Umieść następujący kod w tym arkuszu stylów (polls/static/polls/style.css):

polls/static/polls/style.css
Css
li a {
    color: green;
}

Następnie dodaj poniższe na początku polls/templates/polls/index.html:

polls/templates/polls/index.html
Django template
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

Szablonowy tag {% static %} generuje bezwzględny URL plików statycznych.

To wszystko, co potrzebujesz zrobić dla dewelopmentu.

Wystartuj serwer (lub zrestartuj, jeśli już działa):

Linux / macOS

Shell
$ python manage.py runserver

Windows

Windows
...\> py manage.py runserver

Przeładuj http://localhost:8000/polls/, powinieneś zobaczyć, że linki pytań są zielone (styl Django!), co oznacza, że twój arkusz styli załadował się poprawnie.

Dodawanie obrazu tłaLink to this heading

Następnie stworzymy podkatalog na grafiki. Stwórz podkatalog images w katalogu polls/static/polls/. W tym katalogu umieść grafikę o nazwie background.gif. Innymi słowy umieść swój obrazek w polls/static/polls/images/background.gif.

Potem dodaj do swojego arkusza stylów (polls/static/polls/style.css):

polls/static/polls/style.css
Css
body {
    background: white url("images/background.gif") no-repeat;
}

Odśwież http://localhost:8000/polls/ a powinieneś zobaczyć tło załadowane w lewym górnym rogu ekranu.

To są podstawy. Po więcej szczegółów na temat ustawień i innych kawałków zawartych we frameworku, zobacz howto plików statycznych i dokumentację staticfiles. Demployment plików statycznych porusza kwestię, jak używać plików statycznych na prawdziwym serwerze.

Kiedy już czujesz się dobrze z plikami statycznymi, przeczytaj część 7 tego tutoriala, aby dowiedzieć się, jak dostosowywać wygenerowany automatycznie panel administracyjny Django.