Веб-программирование → Статические файлы (js, css, картинки) в Django

Каждый из вас, кто уже попробовал свой сайт перевести на Django, скорее всего столкнулись с проблемой с файлами стилей и javascript. Вы наверное пробовали их засунуть в папку templates или куда-нибудь еще, но все равно не сработало. И ваш сайт загрустил без стилей и вместе с ним вы тоже. ☹️

В этой статье я покажу вам, что нужно сделать, чтобы все это заработало.

Файлы которые, не меняются пока работает ваш сайт или веб-приложение, называется статическими(statiс files).

Это javascript файлы, css файлы, картинки, шрифты и т.п. А вот html страницы у вас будут динамическими, т.е. изменяющимися, они могут по разному отображаться в зависимости от пользователя и его действий. Допустим страница поиска товаров отобразит для одного пользователя только кондиционеры, а для другого только мобильные телефоны. Но для Django это одна и та же страница. Просто данные другие. 

Надеюсь, понятна разница. А еще браузеры в основномкешируют статические файлы, чтобы каждый раз не перезагружать с сервера. Они же не меняются. И если вы вдруг изменили css файл, чтобы текст был красным, а ваша страница все еще показывает зеленый текст 😱, не бойтесь! Просто очистите кеш браузера. 😉

Ладно, теперь к делу.

Цикл всех статей про Django:

1. Создаем веб-приложение на Django 3.0.6
2. Основы Django фреймворка
3. Статические файлы (js, css, картинки) в Django
4. Расширение html-файлов в Django
5. Регистрация в Django
6. Модели и Базы данных в Django

 

1. Наш сайт и его static файлы

Здесь буду продолжать проект с последней статьи. Там у нас было две страницы: Главная и Контакты. И ничего больше. Давайте добавим туда немного красочных элементов с анимацией. Для этого нам нужны: один css-файл и два js-файла.

styles.css - Этот файл пустой
jquery-3.5.1.min.js
scripts.js - Этот тоже пустой пока

Один из них файл jquery, скачанный отсюда. Остальные два файлапока пустые. Потом заполним их. 

У вас в проекте должна быть папка вашего главного приложения, у нас она называется mysite . Внутри этой папки, рядом с templates, создадим еще одну папку static. Тут мы будем держать статические файлы. Внутри этой папки можно создавать сколько угодно других папок и файлов. Сделаем так, как на картинке:

Мы разделили стили и скрипты по папкам, создайте для картинок другую папку. Порядок важен для того, чтобы потом быстро находить нужный файл. 

 

2. Настройки сайта для статик файлов

Теперь мы должны сказать Django где он должен брать эти статик файлы и другие настройки. Для этого откроем файл  settings.py. Найдем там строчку:

STATIC_URL = '/static/'

Она почти в самом конце обычно. Здесь указана по какому URL мы будем получать статик файлы. Дальше нам нужно добавить пути, по которым Django должен собрать статик файлы. Путей может быть много, поэтому укажем список:

STATICFILES_DIRS = [
    'mysite/static',
]

А еще на будущее добавьте еще три настройки. Про эти настройки расскажу позже.

STATIC_ROOT = os.path.join(BASE_DIR, "static")

MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = '/media/'

Кроме статик файлов, есть еще медиа файлы. Это файлы, которые загружают пользователи сайта. Они тоже работают как статик файлы. 

Теперь нам нужно настроить ссылки к этим файлам.

3. Ссылка на статик файлы

Помните файл urls.py в котором мы писалы пути на наши странички? Такие же пути нужны для статических файлов. Но это сделает за нас сам Django. Откройте файл settings.py и убедитесь что в переменной INSTALLED_APPS содержится значение 'django.contrib.staticfiles'. Если его там нет, то добавьте. 

Теперь все готово для использования static файлов. Давайте проверим.  Откройте файл styles.css в папке static/css и добавьте туда  несколько стилей:

h1 {
    font-family: Tahoma, serif;
    font-size: 14px;
    color: orange;
}

.block {
    padding: 10px;
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    background-color: #e7d7ff;
    box-shadow: 0 0 7px 1px #cb97c6;
    color: rgb(140, 84, 171);
}

Теперь запустите ваш Django сайт, если он не запущен:

python manage.py runserver

Откройте браузер по адресу http://localhost:8000/static/css/styles.css. Если все настроено правильно, то вы должны увидеть содержимое файла styles.css. 

Если не работает, то проверьте что вы сделали не так. 

4.  Подключение статик файлов

Теперь нам нужно вписать ссылки к статик файлам в наши html файлы. Это делается очень просто. Открываете любой html-файл, например home.html. И обязательно в самом начале нужно загрузить библиотеку static. Для этого в самом начале файла пишем:

{% load static %}

Мы подключили библиотеку, которая поможет нам составлять url-ы на статик файлы.

Если вы знаете html, то вы знаете как подключать CSS стили через тэг <link>:

<link href="http://localhost:8000/static/css/styles.css" rel="stylesheet"/>

В атрибуте href должна быть указана ссылка. Мы конечно можем так оставить, но это не сработает если мы запустим наш сайт по другому домену. Поэтому в Django статические файлы подключаются по другому.

Чтобы подключить статик файл styles.css мы должны написать:

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

Чтобы подключить js файлы, пишем:

<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/scripts.js' %}"></script>

После этого Django срендерит(создаст) html страницу по шаблону,  вместо {% static %} будут ссылки на статик файлы, которые мы указали. И эти ссылки будут работать всегда. 

Теперь наш файл home.html выглядит так:
 

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Главная страница сайта</title>
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
</head>
<body>

<h1>Это Главная страница сайта</h1>

</body>
</html>

Запустите сайт и откройте главную страницу. Вы должны увидеть оранжевый заголовок. Значит мы подключили CSS стили правильно. Поздравляю! Вы умеете подключать CSS и JS файлы.

5. JS-эксперимент

Подошло время для эскперимента. Если вы умеете работать с CSS и JS, можете пропустить эту часть. 

Откройте снова файл home.html и под заголовком <h1> добавьте следующее:

<div class="block" id="forward">
    Вперед
</div>

<div class="block" id="backward">
    Назад
</div>

Мы добавили два квадратных блока на экран. Добавим небольшой скрипт в файле scripts.js:

function onReady(){
    $("#forward").on("click", function(){
        $("h1").text("Йеее! Мы поменяли текст заголовка!")
    })

    $("#backward").on("click", function(){
        $("h1").text("Это Главная страница сайта")
    })
}

$(document).ready(onReady);

Здесь мы используя библиотеку jQuery прописали обработчики нажатия на два блока. Первый будет менять текст, а второй возвращать назад. Снова перезапустите сайт и откройте главную страницу. Попробуйте нажать на блоки. 

Вот и на этом все, надеюсь теперь ваши сайты станут живее. Картинки работают точно также!

7755 0
Alisher Alikulov