Часть шестая. Статические данные

Коротенькая глава про статические данные

Цель: Поработать со статическими данными

Задачи:

  • Создать свой CSS-файл

  • Поработать с файлами

Статика

Займёмся статическими файлами.

В папке приложения blog создадим папку static (имя зарезервировано) и в ней создадим папку blog (аналогично templates). В эту папку добавим css-файл – main.css.

В файле напишем следующее:

body { 
    background: #fafafa;  
}

Таким образом, мы заменили цвет фона с белого на кремовый (можете «поиграть» с цветом).

Чтобы статические файлы заработали на сайте, в файле main.html пропишем в самом начале следующую строку:

{% load static %}

Теперь введём ещё один стиль CSS (вспомните Bootstrap), но путь уже будет не ссылкой, а статический относительный, т.е.:

<link rel="stylesheet" href="{% static 'blog/main.css' %}">

Чтобы стиль применился, перезапустите сервер.

Финальный код main.html:

Последним штрихом, я изменил вывод статей на такой:

Чтобы это сделать, я изменил файл home.html:

И добавил в main.css стиль на alert-light:

main.css стал выглядеть так:

Last updated

Was this helpful?