Django как обновить static файлы
Обновлено: 07.07.2024
Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.
Что такое CSS?
Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы ;)
Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.
Давай использовать Bootstrap!
Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.
Установка Bootstrap
Для установки Bootstrap тебе нужно добавить следующие строки в <head> твоего .html файла ( blog/templates/blog/post_list.html ):
Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!
Выглядит уже лучше!
Статические файлы в Django
Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.
Куда поместить статические файлы в Django
Django уже знает, где искать статические файлы для встроенного приложения "admin". Теперь нам нужно добавить статические файлы для своего приложения blog .
Мы сделаем это, создав папку static внутри каталога с нашим приложением:
Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.
Твой первый CSS файл!
Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static . Затем создай новый файл под названием blog.css внутри папки css . Готово?
Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.
Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.
В файле blog/static/css/blog.css тебе нужно добавить следующий код:
В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a , h1 , body ), атрибутом class или атрибутом id . Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a , класса external_link или идентификатора link_to_wiki_page :
Почитай про CSS селекторы в CSS Selectors на w3schools.
Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:
Мы просто загружаем здесь статические файлы :) Далее между <head> и </head> , после ссылок на файлы Bootstrap CSS, добавь такую строку:
Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. Мы только что сказали нашему шаблону, где находится наш CSS файл.
Твой файл должен теперь выглядеть следующим образом:
Ок, сохрани файл и обнови страницу!
Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!
Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!
Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега <head> в файле blog/templates/blog/post_list.html :
Теперь добавь строку font-family: 'Lobster'; в CSS файле blog/static/css/blog.css внутри блока определения стиля h1 a (код помещается между скобками < и >) и обнови страницу:
Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.
Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div , содержащий наш заголовок, как это сделано здесь:
Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа . , относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css :
Далее переделаем код HTML, отображающий посты, используя классы. Замени:
в blog/templates/blog/post_list.html этим кодом:
Сохрани эти файлы и обнови свой веб-сайт.
Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.
Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!
В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.
Этот раздел описывает как работать с ними.
Настройка статики¶
Убедитесь что django.contrib.staticfiles добавлено INSTALLED_APPS .
В настройках укажите STATIC_URL , например:
Сохраните статические файлы в каталоге static вашего приложения. Например my_app/static/my_app/myimage.jpg .
Serving the files
Кроме конфигурации, необходимо настроить раздачу статических файлов.
Потому что это представление очень неэффективно и, возможно, небезопасно. Оно предназначено только для разработки, и не должно использоваться на боевом сервере.
Способы раздачи статических файлов описаны в разделе Развертывание статических файлов.
Ваш проект, возможно, будет содержать статические файлы, которые не относятся ни к одному из приложений. Настройка STATICFILES_DIRS указывает каталоги, которые проверяются на наличие статических файлов. По умолчанию эта настройка пустая. Например:
Смотрите описание настройки STATICFILES_FINDERS чтобы узнать, как staticfiles находит файлы.
Static file namespacing
Раздача статических файлов при разработке.¶
Если вы используете django.contrib.staticfiles как описано ваше, runserver все сделает автоматически, если DEBUG равна True . Если django.contrib.staticfiles не добавлено в INSTALLED_APPS , вы можете раздавать статические файлы используя представление django.contrib.staticfiles.views.serve() .
Не используйте его на боевом сервере! Способы раздачи статических файлов описаны в разделе Развертывание статических файлов.
Например, если STATIC_URL равна /static/ , вы можете добавить следующий код в urls.py :
Также эта функция раздает файлы из каталога STATIC_ROOT не выполняя поиск всех статических файлов, как это делает django.contrib.staticfiles .
Раздача файлов, загруженных пользователем, при разработке¶
При разработке медиа файлы из MEDIA_ROOT можно раздавать используя представление django.contrib.staticfiles.views.serve() .
Не используйте его на боевом сервере! Способы раздачи статических файлов описаны в разделе Развертывание статических файлов.
Например, если MEDIA_URL равна /media/ , вы можете добавить следующий код в urls.py :
Развертывание¶
django.contrib.staticfiles предоставляет команду, чтобы собрать все статические файлы в одном каталоге.
Укажите в STATIC_ROOT каталог, из которого будут раздаваться статические файлы, например:
Она скопирует все статические файлы в каталоге STATIC_ROOT .
Используйте любой веб-сервер для раздачи этих файлов. Способы раздачи статических файлов описаны в разделе Развертывание статических файлов.
Веб-сайты обычно должны обслуживать дополнительные файлы, такие как изображения, JavaScript или CSS. В Django мы называем эти файлы «статическими файлами». Django предоставляет django.contrib.staticfiles помощь в управлении ими.
На этой странице описывается, как вы можете обслуживать эти статические файлы.
Настройка статических файлов ¶
Убедитесь, что django.contrib.staticfiles он включен в ваш INSTALLED_APPS .
В вашем файле настроек определите STATIC_URL , например:
В своих шаблонах используйте static тег шаблона для создания URL-адреса для заданного относительного пути с использованием файла configure STATICFILES_STORAGE .
Храните свои статические файлы в папке, которая называется static в вашем приложении. Например my_app/static/my_app/example.jpg .
В дополнение к этим шагам настройки вам также необходимо будет обслуживать статические файлы.
Во время разработки, если вы используете django.contrib.staticfiles , это будет выполняться автоматически, если для параметра runserver when DEBUG установлено значение True (см. django.contrib.staticfiles.views.serve() ).
Этот метод крайне неэффективен и, вероятно, небезопасен , поэтому непригоден для производства .
См. Раздел Развертывание статических файлов для получения информации о правильных стратегиях обслуживания статических файлов в производственных средах.
В вашем проекте, вероятно, также будут статические активы, не привязанные к конкретному приложению. Помимо использования static/ каталога внутри ваших приложений, вы можете определить список каталогов ( STATICFILES_DIRS ) в вашем файле настроек, где Django также будет искать статические файлы. Например:
См. Документацию по STATICFILES_FINDERS настройке для получения подробной информации о том, как staticfiles находить ваши файлы.
Статическое пространство имен файлов
Теперь нам, возможно, удастся разместить наши статические файлы напрямую my_app/static/ (вместо того, чтобы создавать другой my_app подкаталог), но на самом деле это было бы плохой идеей. Django будет использовать первый найденный статический файл, имя которого совпадает, и если бы у вас был статический файл с тем же именем в другом приложении, Django не смог бы их различить. Нам нужно указать Django на правильный путь, и лучший способ гарантировать это - разместить их в пространстве имен . То есть, помещая эти статические файлы в другой каталог, названный по имени самого приложения.
Вы можете использовать статические ресурсы пространства имен STATICFILES_DIRS , указав префиксы .
Обслуживание статических файлов во время разработки ¶
Если вы используете, django.contrib.staticfiles как описано выше, это runserver будет происходить автоматически, если для DEBUG него установлено значение True . Если у вас нет django.contrib.staticfiles в INSTALLED_APPS , вы можете вручную обслуживать статические файлы с помощью django.views.static.serve() зрения.
Это не подходит для производственного использования! Некоторые общие стратегии развертывания см. В разделе Развертывание статических файлов .
Например, если ваш STATIC_URL определяется как /static/ , вы можете сделать это, добавив следующий фрагмент в свой urls.py:
Также эта вспомогательная функция обслуживает только фактическую STATIC_ROOT папку; он не выполняет обнаружение статических файлов, например django.contrib.staticfiles .
Обслуживание файлов, загруженных пользователем во время разработки ¶
Во время разработки вы можете обслуживать загруженные пользователем медиафайлы с MEDIA_ROOT помощью django.views.static.serve() представления.
Это не подходит для производственного использования! Некоторые общие стратегии развертывания см. В разделе Развертывание статических файлов .
Например, если ваш MEDIA_URL определяется как /media/ , вы можете сделать это, добавив следующий фрагмент в свой ROOT_URLCONF :
Тестирование ¶
Из-за этого staticfiles поставляется свой собственный django.contrib.staticfiles.testing.StaticLiveServerTestCase подкласс встроенного, который имеет возможность прозрачно обслуживать все активы во время выполнения этих тестов способом, очень похожим на то, что мы получаем во время разработки , то есть без необходимости собирать их используют в первую очередь. DEBUG = True collectstatic
Развертывание ¶
django.contrib.staticfiles предоставляет удобную команду управления для сбора статических файлов в одном каталоге, чтобы вы могли легко их обслуживать.
Задайте STATIC_ROOT настройку для каталога, из которого вы хотите обслуживать эти файлы, например:
Запустите команду collectstatic управления:
Это скопирует все файлы из ваших статических папок в STATIC_ROOT каталог.
Используйте любой веб-сервер для обслуживания файлов. Развертывание статических файлов охватывает некоторые общие стратегии развертывания статических файлов.
На предыдущем занятии мы в целом познакомились с шаблонами в Django. Продолжим эту тему и следующий важный шаг – это научиться подключать к шаблонам статические файлы, например, оформление CSS или JavaScript и так далее. Здесь есть свои тонкости. Как мы помним, наше приложение может работать в двух режимах: отладки – на тестовом веб-сервере; эксплуатации – на реальном веб-сервере. Так вот, в режиме отладки статические файлы Django ищет во всех каталогах static приложений и во всех возможных каталогах static внешних модулей (например, админки). То есть, статические файлы при отладке совершенно спокойно можно размещать в подкаталоге static нашего приложения. Но, в режиме эксплуатации реальный веб-сервер будет брать все статические файлы из папки static, расположенной в каталоге всего проекта. Но как появится такая папка со всеми необходимыми файлами? Для этого, при подготовке проекта к эксплуатации, выполняется специальная команда фреймворка Django:
python manage.py collectstatic
которая собирает все статические файлы из разных приложений и модулей и помещает в одну общую папку проекта.
- STATIC_URL – префикс URL-адреса для статических файлов;
- STATIC_ROOT – путь к общей статической папке, используемой реальным веб-сервером;
- STATICFILES_DIRS – список дополнительных (нестандартных) путей к статическим файлам, используемых для сбора и для режима отладки.
Для этого откроем файл coolsite/settings.py и внизу уже видим заданную константу STATIC_URL с префиксом '/static/', который будет добавляться к URL статических файлов. Этот префикс должен соответствовать имени папки, в которой предполагается хранить статические файлы. Далее, определим путь к папке static всего проекта (выделена красным) с помощью константы:
Наконец, при необходимости, можем определить третью константу со списком нестандартных путей, где также могут располагаться статические файлы:
В нашем случае таких путей нет, поэтому список пуст.
Давайте теперь создадим папку static в нашем приложении women и, также как и для шаблонов, укажем в ней вложенный каталог women, чтобы не было конфликтов имен между статическими файлами разных модулей и приложений. (В действительности, Django просто найдет первый подходящий файл и на этом остановится. Чтобы этот файл был тем, что нам нужен, как раз и используется дополнительный каталог, который играет роль некоторого пространства имен.)
В этом последнем подкаталоге уже будем размещать файлы css – для файлов CSS; js – для файлов JavaScript; images – для общих файлов изображений и так далее. Я создам подкаталог css для файла стилей нашего сайта. И в нем размещу файл styles.css, который заготовил заранее, чтобы не отвлекаться на CSS-оформление сайта, а сосредоточится на изучении фреймворка Django. Вы сможете скачать весь этот проект с github и, при необходимости, внимательно его изучить. Также создам подкаталог images и скопирую в него все необходимые изображения для базового оформления сайта.
Все, подготовительная часть завершена. Теперь мы можем использовать эти внешние файлы в шаблонах нашего приложения. Для этого используется специальный тег static, который сначала подключается в шаблоне:
А, затем, для формирования URL к тому или иному статическому файлу, используется конструкция:
Например, для подключения css-файла в базовом шаблоне base.html, следует прописать:
При просмотре страницы увидим следующий URL-адрес:
<link type="text/css" href="/static/women/css/styles.css" rel="stylesheet" />
И, щелкнув по нему, убеждаемся, что он успешно загружается.
Отлично, это мы сделали. Далее, я возьму заготовленные html-файлы для базового шаблона страниц (base.html) и главной страницы (index.html). Для более детального ознакомления вы сможете их скачать по ссылке с github. Также я добавил в БД знаменитых женщин и их биографии. Сделал это с помощью SQLiteStudio. После всех этих изменений главная страница сайта выглядит так:
Конечно, вы можете использовать свои шаблоны, принципиального значения это не будет иметь. Часто для оформления сайтов используют онлайн-сервисы. Наиболее известный из них
Но я намеренно не стал к нему обращаться, чтобы не усложнять изложение материала по Django.
Итак, на нашем сайте выводится пока только заголовок и контент статей. Нам бы хотелось, чтобы в списке контент выводился не полностью, а фрагментом, скажем, 50 слов или 100 символов. Как это сделать? Для таких целей в шаблонах предусмотрены специальные фильтры, которые позволяют управлять фрагментами данных. Список всех фильтров можно посмотреть на странице русскоязычной документации:
Использовать их предельно просто. Смотрите, нам для правильного отображения страницы нужно, во-первых, проставить теги абзацев при выводе постов. Это можно сделать с помощью фильтра:
Здесь value – это некая переменная шаблона, к которой применяется фильтр linebreaks. Этот фильтр ставит тег перевода строки <br>, если строки в тексте следуют друг за другом и тег абзаца <p>, если между строками имеется пустая строка. Я добавлял текст в БД с пустыми строками, поэтому этот фильтр добавит теги абзацев.
Конкретно, в нашем шаблоне главной страницы index.html этот фильтр запишется так:
Если теперь обновить страницу, то увидим разбивку текста на абзацы. Отлично, это есть. Следующее, что нам нужно – это ограничить размер постов в списке 50-ю словами. За это отвечает фильтр:
И применим его в нашем шаблоне следующим образом:
Смотрите, здесь к контенту применяются сразу два фильтра: первый добавляет теги абзацев, а второй обрезает текст до 50 слов. То есть, мы легко можем применить к переменной множество фильтров для получения искомого результата. Обновим страницу и увидим адекватное отображение списка актрис:
По аналогии используются все остальные фильтры в шаблонах фреймворка Django.
В заключение я отмечу одну важную особенность отображения информации на страницах шаблонов. Например, если в текст статьи поместить какой-либо HTML-тег, например, написать вначале в поле content «<h1>Анджелина Джоли</h1>», то при выводе мы увидим, что тег h1 был экранирован, то есть, заменен спецсимволами. Это намеренное поведение Django с целью защиты сайта от возможных хакерских атак. Если же нам все-таки нужно вывести статью без экранирования тегов, то можно использовать фильтр:
Например, чтобы отключить экранирование, в шаблоне index.html можем указать, чтобы поле content выводилось как есть со всеми тегами:
Вот так используются различные фильтры в Django.
Видео по теме
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
Django — популярный, высокоуровневый web-фреймворк. Предназначен для web-приложений на Python, обладает большим набором готовых компонентов, которые будут полезны не только новичкам, но и профессионалам.
Важно: Django доступен только для панели управления ISPmanager. Ваш домен должен быть привязан к услуге хостинга. Если вы это еще не сделали, воспользуйтесь инструкцией Как привязать домен к хостингу
Как установить Django
Войдите в панель управления хостингом. Если внешний вид вашей панели управления отличается от представленного в инструкции, кликните в левом нижнем углу «Старый интерфейс».Перейдите в раздел WWW-домены, выберите домен, для которого вы хотите установить Django, и нажмите Изменить:
В разделе «Дополнительные возможности» включите CGI-скрипты, Python, выберите Версию Python и нажмите Ok:
Перейдите в каталог вашего пользователя с помощью команды: cd
Убедитесь, что вы в нужном каталоге, выполнив команду: pwd
Создайте виртуальное окружение (Virtualenv) с произвольным именем. Виртуальное окружение необходимо создать для версии Python, которой вы планируете пользоваться для вашего проекта. Она должна совпадать с версией в шаге 3.
Чтобы узнать доступные версии Python, выполните команду:
ls -la /opt/python/*/bin/python
Для создания виртуального окружения выполните команду:
/opt/python/python-3.7.6/bin/python -m venv djangoenv
python-3.7.6 — ваша версия Python,
djangoenv — название вашего виртуального окружения.
Активируйте ваше виртуальное окружение с помощью команды:
Где djangoenv — название вашего виртуального окружения.
Если слева от строки ввода команды появилось название вашего виртуального окружения, значит, оно активировалось:
Обновите pip, установите пакеты Django и mysqlclient с помощью команды:
pip install --upgrade pip && pip install django && CFLAGS="-std=c99" pip install mysqlclient
Перейдите в корневой каталог вашего сайта с помощью команды:
Убедитесь, что вы в нужном каталоге, выполнив команду:
Важно: перед созданием проекта удалите все файлы и папки из каталога вашего сайта.
Создайте новый проект в корневом каталоге:
django-admin startproject project_name
Где project_name — название вашего проекта.
Откройте настройки вашего файла командой:
Где project_name — название вашего проекта.
В секции ALLOWED_HOSTS = [] добавьте имя вашего домена и его псевдонимы. Обратите внимание! Домены должны быть в кавычках:
В секции DATABASES укажите данные для подключения к MySQL:
Если у вас нет базы данных, вы можете создать её по инструкции Как создать базу данных?
Ниже секции STATIC_URL добавьте новую секцию: STATIC_ROOT='static/'
После внесения изменений нажмите ESC для выхода в командный режим. Для сохранения изменений и выхода введите :wq и нажмите «Enter».
Создайте каталог со статическими файлами командой:
python project_name/manage.py collectstatic
Где project_name — название вашего проекта.
Выполните миграцию в MySQL с помощью команды:
python project_name/manage.py migrate
Создайте в корневом каталоге вашего сайта конфигурационный файл с именем passenger_wsgi.py и запишите в нем следующее:
В строке sys.path.insert(1, '/var/www/u0000006/data/djangoenv/lib/python3.7/site-packages') укажите:
- Вместо python3.7, версию python, которую вы выбрали на шаге 3 и 6;
- вместо u0000006, логин вашей услуги хостинга: Как узнать логин хостинга;
- а также путь до каталога вашего виртуального окружения. Его можно увидеть в панели управления:
Готово, по адресу вашего домена должна отобразиться стартовая страница Django.
Как перезапустить проект на Django
Если вы изменили файлы проекта и хотите увидеть изменения, вам необходимо перезапустить проект. Для этого создайте файл .restart-app в корневой директории вашего сайта. После перезапуска проекта файл будет удалён автоматически.
Читайте также: