Как сделать шапку сайта в django
Добавил пользователь Владимир З. Обновлено: 19.09.2024
Django — веб-фреймворк для создания сайтов, написанный на языке Python. Язык и является одним из основных его преимуществ, так как обеспечивает быстрое написание кода. Также Django имеет "батарейки в комплекте", что означает, что для многих распространённых задач уже есть написанная библиотека. На текущий момент Django считается основным фреймворком Python для разработки веб-сайтов и веб-сервисов.
Мы будем создавать сервис, который выгружает фриланс-проекты, фильтрует из них те, которые может выполнить Python-программист, а затем показывает пользователям.
Здесь и далее я буду предполагать, что у вас установлено:
- Linux-based система (Ubuntu 19.10 - прекрасный выбор),
- Python 3.7 (на ubuntu 19.10 стоит изначально, на более ранние версии необходимо ставить отдельно,
- PostgreSQL 11.
Ставим зависимости (PostgreSQL), и создаём директорию для проекта:
Создаём и активируем виртуальное окружение (изолированное окружение среды Python, которое позволяет нам использовать определенные, не зависящие от системы, версии приложений):
Далее предполагается, что все команды выполняются в активированном на предыдущем шаге виртуальном окружении.
Создаём проект. Поскольку мы хотим придерживаться хороших практик, будем пользоваться не стандартной django-admin startproject, а создадим проект с помощью шаблона cookiecutter, в котором уже настроены наиболее часто используемые фишки.
При создании проекта необходимо ответить на несколько вопросов
Хорошей практикой является использование системы контроля версий. Такая система позволяет работать над проектом нескольким людям; автоматически делает копии всех предыдущих версий кода, и вы всегда можете к ним вернуться, если что-то пошло не так.
Теперь копия нашего кода доступна на странице нашего github-репозитория.
Установим локальные зависимости
Создаём базу данных в PostgreSQL
Теперь применим миграции
Дело в том, что все настройки, связанные с безопасностью, при создании проекта через cookiecutter хранятся не в файлах с исходным кодом, а в переменных окружения. Это более безопасно, но менее удобно. Каждый раз при перезапуске компьютера необходимо будет экспортировать все переменные окружения.
Есть способ хранения всех относящихся к проекту переменных окружения в специальном .env файле. Создадим в корне проекта файл под названием .env и содержимым
Теперь достаточно сделать
Далее я предполагаю, что каждый раз после активации виртуального окружения вы делаете export DJANGO_READ_DOT_ENV_FILE=true .
Заходим на 127.0.0.1:8000
Как видим, вместо стандартной django-страницы "It works!" cookiecutter предлагает страницу со ссылками на страницы авторизации и регистрации через django-allauth, а также автоматически подключен django-debug-toolbar, показывающий, сколько происходит запросов к различным компонентам и сколько времени они занимают.
Я уже очень давно слежу за развитием проекта DjangoCMS и честно скажу что он не всегда мне нравился. Но постепенно команда проекта исправила многие косяки и сделала эту CMS по-настоящему удобной, гибкой и функциональной. После этого я стал практически фанатом DjangoCMS и использую его в некоторых своих проектах (например этот блог). Сегодня я подробно расскажу что такое DjangoCMS, в каких случаях его удобно применять и покажу как с помощью него создать простой сайт. Надеюсь вы тоже полюбите этот инструмент :)
На данный момент основная проблема DjangoCMS - отсутствие нормальной документации. Первое что я нашёл на официальном сайте проекта, это инструкция как создать сайт с помощью DjangoCMS и развернуть его на облачной платформе Divio Cloud. Из этой инструкции конечно можно выцепить какое-то количество полезной информации, но я как разработчик, жду совсем другого, тем более что я не планирую использовать Divio Cloud, а хочу развернуть приложение на DjangoCMS где-нибудь у себя. Самое интересное, что существует официальная документация для разработчиков по DjangoCMS, но данную ссылку я нашёл в файле README.md из репозитория проекта на GitHub, в то время как на сайте её почему-то нет.
Есть одна вещь, за которую стоит отдельно похвалить команду Divio - грамотная поддержка в online-чате на сайте проекта DjangoCMS, куда можно задавать вопросы любой сложности! Многие вещи о которых не сказано в документации я узнал лично от ребят из Divio во время переписки с ними. Там есть и наши соотечественники которые отвечали по русски, за что им отдельный респект :)
Хватит лирики, приступаем к созданию собственного сайта на DjangoCMS!
Установка DjangoCMS
В начале необходимо создать и активировать виртуальное окружение для нашего проекта. Для этого выполните команду:
Если вы хотите использовать в своём проекте Python 3, то первую команду нужно заменить на:
Только не забудьте проверить правильность пути к интерпретатору Python 3, так как у вас он может отличаться.
После того как виртуальное окружение создано и активировано нам нужно поставить установщик DjangoCMS - пакет djangocms-installer:
djangocms-installer ставит все необходимые пакеты для работы DjangoCMS. После этого ваше виртуальное окружение начинает поддерживать команду djangocms, которой мы скоро воспользуемся.
Создаём директорию для нашего проекта и переходим в неё:
И наконец создаём наше приложение на DjangoCMS с помощью команды:
- Флаг -f говорит о том что дополнительно будет установлен инструмент Django Filer, который отвечает за работу с файловой системой. Мне данный инструмент нравится и я рекомендую его использовать.
- Флаг -p с точкой (-p .) задаёт текущую директорию как родительскую для проекта.
- djangocms_blog - название нашего приложения. Вы можете указать своё собственное.
В старых версиях установщик DjangoCMS задавал вопросы по конфигурированию приложения во время установки. В новой версии приложение конфигурируется автоматически, а так же создаётся суперпользователь с логином admin и паролем admin. После установки вы можете запустить приложение командой:
Для входа просто введите логин admin и пароль admin. На этом процесс установки DjangoCMS можно считать завершённым.
Настройка
Откройте в своей любимой IDE (лично я предпочитаю PyCharm) только что созданный проект. В моём случае файлы проекта располагаются в директории djangocms_blog_project. Структура созданного проекта должна быть примерно такой:
Так как мой проект демонстрационный, я оставляю настройки базы данных без изменений:
Других настроек на данном этапе не требуется.
Создание шаблонов
Прежде чем создавать страницы нашего сайта-блога нам нужны шаблоны на основе которых будут создаваться эти самые страницы. Наверняка вы захотите использовать собственный неповторимый дизайн чтоб было лучше чем у соседа, поэтому нам нужно в начале погрузиться в вёрстку. Шаблоны DjangoCMS это обычные файлы в формате .html с некоторым количеством шаблонных тегов Django и DjangoCMS. При создании нового проекта автоматически генерируется 4 шаблона в папке templates (в моём случае djangocms_blog_project/djangocms_blog/templates):
- base.html - базовый шаблон, от которого наследуются все остальные шаблоны
- fullwidth.html - шаблон полноразмерной страницы с контентом на всю ширину экрана
- sidebar_left.html - страница с левым сайдбаром
- sidebar_right.html - страница с правым сайдбаром
Кроме того, список шаблонов обязательно должен быть задан в settings.py в переменной CMS_TEMPLATES для того чтобы можно было выбрать нужный шаблон в интерфейсе при создании новой страницы сайта. По умолчанию у нас сконфигурировано 3 шаблона (все кроме base.html):
Тут всё просто: нужно задать реальное название файла шаблона и произвольное название, которое будет отображаться в интерфейсе. Если вы создаёте новый шаблон, то в обязательном порядке вносите его в CMS_TEMPLATES, иначе вы не сможете им воспользоваться.
Давайте создадим первую страницу с использованием тех шаблонов, что у нас уже есть. После того как вы вошли в панель администрирования под логином admin (см. выше), должны увидеть вот такую страницу:
Выберите пункт Новая страница (Создать страницу рядом с текущей) и нажмите Далее. Откроется вот такое окно:
В выпадающем меню жирным шрифтом должен быть выделен текущий шаблон страницы, но так как мы его явно не задавали, то по умолчанию стоит значение Наследовать шаблон от ближайшего предка. В нашем случае ближайшим предком является шаблон fullwidth.html. Выберите его и вы увидите что ничего не изменилось в дизайне страницы.
Теперь предлагаю подробно разобрать код шаблона fullwidth.html, но так как он наследуется от base.html, то начнём с базового шаблона:
Что тут происходит? Да ничего особенного. В первой строке мы загружаем шаблонные теги:
Так же у нас в шаблоне 2 блока, которые можно переопределить в дочерних шаблонах: и .
Кроме этого у нас есть:
- тег ответственный за отображение тулбара DjangoCMS -
- теги django-sekizai, которые отвечают за размещение блоков со ссылками на css и js в определённых частях страницы - и
- тег, ответственный за отображение меню -
Всё остальное вы и так знаете. Переходим к шаблону fullwidth.html:
По факту перед нами стандартный шаблон Django отнаследованный от base.html. Из интересного тут 2 тега DjangoCMS:
- тег - отображает атрибут страницы page_title в блоке title. Данный атрибут задаётся при создании страницы и является её заголовком. Все атрибуты можно просмотреть в документации.
- тег - это очень важный тег, который задаёт изменяемую часть страницы в блоке content. Количество плейсхолдеров на странице может быть неограниченным, главное чтоб название каждого плейсхолдера было уникальным. В панели администратора DjangoCMS можно менять содержимое любого плейсхолдера на своё усмотрение, например туда можно добавить текст, ссылку, картинку и т.д., а можно всё сразу и в любых комбинациях :)
Содержимое - это наш плейсхолдер content из шаблона fullwidth.html. Он содержит один единственный плагин, который отображает строчку Hello world!. Вы можете в любой момент отредактировать содержимое плагина, а так же добавлять другие плагины в плейсхолдер и даже создавать свои собственные плагины (об этом я расскажу в другой статье).
Для наглядности добавим ещё один плагин в плейсхолдер content. Для этого нажмите кнопку + и в появившемся окне выберите из списка плагин Google Map:
В открывшемся окне задайте название карты (поле MAP TITLE), а так же широту и долготу своего города (поля LATITUDE и LONGITUDE). В качестве названия у меня просто слово Карта, широта 55.751244, долгота 37.618423:
В верхней панели появилась синяя кнопка Опубликовать изменения страницы. Нажмите её и вы увидите обновлённую главную страницу с картой:
Вот так легко и просто можно управлять содержимым страницы в DjangoCMS.
Теперь я покажу как кардинально изменить дизайн сайта. Больше всего мне нравится в DjangoCMS то что можно взять практически любой html-шаблон и с минимальными изменениями встроить его в свой проект. В качестве примера я нашёл в интернете бесплатный адаптивный шаблон, свёрстанный с помощью CSS-фреймворка Bootstrap.
Для начала изменим содержимое базового шаблона base.html:
Я не буду подробно разбирать этот код, так как статья про DjangoCMS, а не про вёрстку. Тем более вы можете использовать любой другой шаблон вместо этого или создать свой собственный. Данный шаблон я брал "как есть" и дополнил его тегами Django и DjangoCMS, о которых мы сейчас и поговорим.
Как всегда в самом начале мы должны загрузить все необходимые шаблонные теги:
В тег я добавил блок title для того чтобы была возможность задавать разные заголовки страницы в разных шаблонах:
Далее загружаем таблицы стилей из папки static и нужные для шаблона шрифты из интернета:
Обратите внимание на переменную > - в место него Django автоматически подставляет путь до папки со статикой. Так же в конце присутствует тег , который на данном этапе бесполезен, но при усложнении шаблона может здорово помочь: вместо этого тега можно динамически подставлять таблицы стилей в зависимости от определённых условий.
После тега нужно не забыть поставить шаблонный тег , так как он отвечает за отображение верхней панели инструментов в режиме редактирования сайта. Как вы могли убедиться, мы её используем довольно часто и без неё у нас просто не будет возможности вносить изменения.
В блок навигации я добавил тег , который отвечает за отображение пунктов меню (каждый пункт меню будет заключён в тег ):
В шаблоне предусмотрен красивый хедер с фоновым изображением. Код, который отвечает за отображение хедера я заключил в блок header для того чтобы его можно было переопределить в дочерних шаблонах. Кроме того, в хедере у нас есть заголовок и подзаголовок, вместо которых я добавил плейсхолдеры title и sub_title, для того чтобы их можно было динамически изменять. При загрузке фонового изображения обязательно используется переменная >:
После хедера идёт блок content, с которым вы знакомы по предыдущему шаблону:
Далее идёт футер, в котором я использовал новый шаблонный тег - . Основное отличие тега static_placeholder от placeholder заключается в том что содержимое static_placeholder наследуется дочерними шаблонами. В данном случае нам достаточно один раз задать значение на главной странице и оно автоматически будет отображаться на других страницах нашего сайта:
В самом конце мы загружаем все необходимые скрипты из папки со статикой:
Теперь чтобы новый шаблон отобразился корректно, нужно поместить все зависимости в папку django_cms_project/django_cms_example/static/, для этого просто скопируйте их из репозитория данного проекта на GitHub.
Перезагрузите сервер и обновите страницу в браузере. Если вы всё сделали правильно, то должны увидеть сайт уже в обновлённом дизайне:
Пока ещё не вся информация отображается на странице, так как мы ещё не заполнили новые плейсхолдеры. Нажмите синюю кнопку Редактировать страницу на верхней панели, а затем на кнопку Структура. Как вы видите, в структуре страницы появились 3 новых плейсхолдера: Title (у меня система перевела название этого плейсхолдера на русский язык как Заголовок), Sub_Title и Copyright.
Кроме того у нас ещё есть плейсхолдер content (Содержимое), который мы заполняли ранее. Удалите из него плагин Google Map и откройте на редактирование плагин Текст. Затем нажмите кнопку Источник в редакторе и введите произвольный текст, заключённый в теги:
Я заполнил плейсхолдеры вот так:
Отлично! Теперь нас есть полноценная первая страница сайта. Давайте для примера создадим новый шаблон и сделаем ещё одну страницу. Предположим нам нужен особенный шаблон для раздела с контактами на сайте. Для этой цели создайте в папке templates файл contacts.html с таким содержимым:
В этом коде нет ничего нового, я просто сверстал список контактов и добавил для каждого контакта свой плейсхолдер. Ещё я для красоты переопределил блок header. Теперь нужно добавить этот шаблон в settings.py:
Заполните все поля в появившемся окне и нажмите кнопку Сохранить и продолжить редактирование:
В новом окне нажмите кнопку Расширенные настройки и выберите шаблон Contacts из выпадающего списка:
Нажмите синюю кнопку Сохранить и вы будете автоматически перенаправлены в раздел Структура новой страницы. Необходимо заполнить все плейсхолдеры используя плагины Текст и Ссылка:
Прежде чем пойти дальше, хочу рассказать о плагине Ссылка. Вот так выглядит окно с настройками плагина:
- DISPLAY NAME - отображаемое название ссылки
- EXTERNAL LINK - используется в том случае, если ссылка идёт на внешний ресурс
- INTERNAL LINK - позволяет ссылаться на внутренние страницы сайта
- Link settings - в этом разделе для нас интерес представляют поля, которые позволяют сформировать ссылку для электронной почты и телефона
Как видите, сложного ничего нет. Плагин простой, удобный в использовании и довольно функциональный. Я уверен что вы без труда сможете им пользоваться.
Теперь вернёмся к нашей новой странице. После заполнения всех плейсхолдеров необходимо нажать синюю кнопку Опубликовать страницу немедленно в верхней панели инструментов. Все внесённые изменения на странице будут сохранены, сама страница опубликована и в главном меню сайта появится новый пункт Контакты. Вот что должно получиться в итоге:
У нас получился небольшой и красивый сайт, но так как данный проект демонстрационный, тут можно ещё много чего доработать. Теперь вы знаете основы работы с DjangoCMS и уже можете создать свой собственный сайт на основе данного фреймворка.
В этой статье я затронул только малую часть возможностей DjangoCMS, поэтому будет продолжение, где я расскажу о плагинах, сторонних дополнениях и кастомизации функционала сайта.
Это не учебник. Этот ускоренный курс - быстрый способ приступить к созданию базового веб-сайта Django, не вдаваясь в подробности об основных концепциях, необходимых для создания сложных веб-приложений. На каждом этапе этого ускоренного курса я буду давать ссылки на более подробное объяснение инструментов и концепций, которые вы используете, чтобы вы могли лучше понять Django при создании своего первого проекта.
Наша цель
Мы делаем веб-сайт, на котором вы можете загрузить изображение с названием, датой и описанием. Просто.
Так что же такое Джанго?
Django /JANG-oh/ — Тип инструмента (веб-фреймворк), наиболее известный тем, что помогает людям быстро создавать аккуратные веб-сайты с минимумом ошибок.
Создание чего-либо в Django следует по этой схеме:
- Модель - как хранятся данные. Здесь мы расскажем Django, как хранить наши изображения, заголовки, даты и описания.
- Просмотр - Где "думает" ваш проект. Вот так наш веб-сайт получит данные, которые мы сохранили на основе наших моделей, и обработает их для пользователя.
- Шаблон - как ваш проект представляет то, о чем он "думал". Представление будет использовать это для отображения содержимого, обработанного на основе наших моделей.
Django делает более сложные (и действительно забавные) вещи, но если вы только начинаете, это все, что вам нужно знать на данный момент.
Настройка нашего проекта
ВНИМАНИЕ: Пользователи Windows
По умолчанию в Windows нет командной строки Unix, что является предварительным условием для этого ускоренного курса. Октябрьское обновление для Windows 10 2018 предлагает подсистемы Linux, такие как Ubuntu. Пожалуйста, установите и настройте подсистему Linux для использования командной строки Unix.
Мы собираемся использовать терминал вашего компьютера для настройки среды Python и Django. Давайте сделаем проект в папке Documents нашего компьютера, поэтому введите эти команды
- python3 -m venv django_cc создаст виртуальную среду в папке с именем django_cc для нашего проекта, поэтому все вещи, которые мы устанавливаем для его работы, не будут мешать чему-либо еще в вашей системе.
Затем мы войдем в папку нашего проекта, включим нашу новую среду Python и установим Django.
- source bin/activate активирует созданную нами виртуальную среду. Это означает, что когда мы устанавливаем Django, он будет установлен не во всей системе, а только в нашем проекте.
- pip install django будет использовать диспетчер пакетов Python для установки самой последней версии Django.
Теперь, когда Django установлен, мы получили несколько новых команд. Давайте начнем с создания проекта в Django, миграции нашей базы данных разработки и, наконец, первого запуска нашего локального сервера разработки, чтобы убедиться, что мы все сделали правильно.
- django-admin start project django_cc сообщает django, что нужно создать основу нашего проекта, к которой будет подключено все остальное (например, приложения django).
- Здесь мы также найдем файл manage.py , который мы будем использовать для взаимодействия с Django.
- python3 manage.py migrate используется, чтобы сообщить Django, что в наши модели были внесены изменения. Поскольку мы только начали наш проект, это будет наша первоначальная миграция, которая устанавливает модели, которые Django создает самостоятельно (например, учетные записи, журналы активности, разрешения и т.д.).
- python3 manage.py runserver запустит наш сервер разработки, на котором мы будем тестировать наш проект.
Чтобы увидеть сервер разработки в действии, перейдите по адресу 127.0.0.1:8000 в своем браузере. Должна появиться стартовая страница Django:
База данных
Затем возьмите свой любимый текстовый редактор или IDE на Python, потому что мы собираемся углубиться в Django. Мы собираемся начать с создания приложения Django, в котором мы будем писать все наши модели для этого проекта.
Чтобы наш основной проект распознал это приложение, нам нужно сообщить ему о существовании нашего приложения базы данных, добавив его в INSTALLED_APPS в django_cc/settings.py следующим образом:
Поддержка медиафайлов
Давайте добавим в конец settings.py следующее, чтобы Django знал, где хранить медиа-файлы, такие как загружаемые нами изображения:
Нам нужно будет сделать то же самое для нашей папки шаблонов, обновив DIRS для обработки [os.path.join (BASE_DIR, 'templates')] вместо значения по умолчанию [] :
Нам также нужно будет добавить несколько операций импорта и условное выражение в конце django_cc/urls.py , чтобы файлы были доступны на сервере разработки:
Отлично, теперь наш проект настроен, и мы можем начать с написания наших моделей.
Написание наших моделей
- models.FileField(upload_to='images/') действует как поле, куда мы будем загружать изображения в папку изображений в каталоге мультимедиа, который мы настроили в настройках.
- models.CharField(default="", max_length=n) - это базовое текстовое поле, максимальная длина которого равна n.
- models.DateField(default=datetime.date.today) не требует пояснений, это поле даты / времени, в котором установлены текущие дата и время.
Чтобы завершить наши модели, скажем Django отсортировать их от самых новых к самым старым:
Перенос наших новых моделей
Завершите наши модели следующими двумя командами, которые, по сути, сообщают Django, что мы внесли некоторые изменения и что они должны быть применены к нашей базе данных:
Панель управления администратора
Внутри нашего приложения базы данных перейдите в admin.py и добавьте следующее:
- from blog.models import Post импортирует все модели, которые мы только что создали.
- admin.site.register( ) сообщает Django отображать эту модель на панели управления.
Затем мы создадим суперпользователя, чтобы мы могли войти в панель администратора. Введите следующую команду и следуйте подсказкам. Вам нужно только заполнить подсказки для имени пользователя и пароля.
После завершения перейдите к 127.0.0.1:8000/admin и войдите в систему с учетными данными, которые вы только что написали. Вы должны увидеть эту страницу:
Представление - это то, как Django знает, что делать, когда мы запрашиваем страницу. Первое, что нам нужно сделать, это создать файл views.py в django_cc . В этот файл вставьте следующее:
В urls.py нам нужно будет добавить новый путь, чтобы Django знал, когда этот URL запрашивается для вызова нашего представления:
Шаблоны со стилем
В корне нашего проекта Django, где вы можете найти нашу базу данных и папки django_cc , создайте папку шаблонов и создайте внутри файл index.html . Для дизайна нашего сайта мы будем использовать фреймворк Bulma, поэтому нам не нужно писать какой-либо CSS. Вот шаблон, который мы можем использовать для нашего шаблона.
Теперь у нас есть веб-сайт, на котором отображается то, что мы добавляем в нашу панель управления в карточках Bulma. Аккуратно.
Я расскажу о там, как создать простой блог на фреймворке Django. Статья будет полезна новичкам в сфере Веб-программирования для того, чтобы разобраться в принципе работы и сути django. И так, поехали!
Проект написан с использованием:
Python 3.6.3 — высокоуровневый язык программирования.
Django 2.0.2 — фреймворк для веб-приложений.
Visual Code — текстовый редактор c поддержкой плагинов
Установка Python
Для выхода пропишите exit().
Установка Django
Django установим с помощью менеджера пакетов Python — pip:
Создание проекта
Ненадолго отложим редактор и запустим стандартный проект django (при выполнении команд с обращением к файлу manage.py, например, запуск сервера вы должны находится в непосредственно в папке с этим файлом. В данном случае это D:\djangoProject\myBlog)
Ура! Все работает. Теперь создадим аккаунт администратора, с помощью которого вы сможете добавлять, редактировать и удалять статьи (это конечно не все возможности админки django, но пока их будет достаточно).
Завершим работу запущенного сервера:
Для начала необходимо поработать с миграциями. Миграции в django используются для переноса изменений в моделях на структуру базы данных. Модели в свою очередь отражают данные в виде полей в таблице базы данных. В нашем случае в базу данных необходимо занести таблицы для хранения данных админа.
Нам будет предложено ввести логин, e-mail почту и пароль.
Логин для удобства введем admin, почту можно не вводить и пароль (мин. 8 символов). Будьте внимательны, вводимые символы пароля в консоли никак не отображаются (в целях безопасности).
Попробуем залогиниться в админ панели. Для этого запустим сервер:
В итоге откроется админ панель:
Все работает, стартовый проект создан и создан аккаунт администратора. Сейчас перейдем к созданию Веб-приложения в django. В нашем случае Веб-приложение — это блог, который имеет свой собственный функционал (вывод всех статей и вывод отдельной).
Для этого завершим работу сервера (Ctrl + C) и пропишем следующую команду:
Поработаем с обработкой url-запросов. Нам необходимо, чтобы при запросе 127.0.0.1:8000 открывалась главная страница со списком всех статей.
Отредактируем файл djangoProject/myBlog/myBlog/urls.py следующим образом:
И редактируем в файле djangoProject/myBlog/myBlog/settings.py настройку TEMPLATES:
В созданной папке templates создаем файл base.html:
Это базовый шаблон, который будет дополнятся другими.
Создадим в папке djangoProject/myBlog/templates новую папку partial, в которой и будут находится .html файлы, расширяющие базовый.
В папке partial создадим файл home.html:
При обращении к файлу home.html содержимое блоков head и body в файле base.html заменится содержимым файла home.html. такая система организации шаблонов добавляет динамику и в разы упрощает работу.
Теперь запустив сервер откроется не стандартная страница django, а наш файл base.html, расширенный файлом partial/home.html
Точно таким же способом добавим страницу для просмотра отдельной статьи, которую назовем partial/single.html:
Отредактируем файл djangoProject/myBlog/blog/urls.py, где — указывает, что на этом месте может располагаться число, которое будет считываться в файле djangoProject/myBlog/blog/views в функции single. Это число будет использоваться как номер определенной статьи.
В файле djangoProject/myBlog/blog/views.py добавим новую функцию для вывода отдельной статьи
Создаем шаблон для вывода отдельной статьи djangoProject/myBlog/templates/partial/single.html
Теперь после запуска сервера и переходе по ссылке 127.0.0.1:8000/323 откроется нужная страница.
Создадим таблицу в базе данных с помощью моделей. Каждая статья будет содержать следующие поля:
- Название статьи
- Описание статьи (для метатега description)
- Ключевые слова (для метатега keywords)
- Изображение
- Текст статьи
- Параметр видимости статьи (для сохранения статьи без её публикации)
- Дата изменения
- Дата создания
Для отображения нашей модели статьи в админ панели отредактируем файл djangoProject\myBlog\blog\admin.py, где list_display — поля, отображающиеся в списке статей; list_display_links — поля, являющиеся ссылками для подробного просмотра полей статьи; list_editable — поля, доступные для редактирования сразу из просмотра списка всех статей; list_filter — фильтры в правой части страницы; search_fields — поля по которым осуществляется поиск.
Укажем папку для сохранения загружаемых изображений (поле image) и паку для хранения статических файлов (например, css файлы, js срипты). Для этого добавим в конце файла djangoProject\myBlog\settings.py следующие 3 строчки
И создадим эти папки со следующим расположением: djangoProject/media и djangoProject/static
Помимо сохранения изображений через админ панель необходимо корректно их загружать в шаблон. Для этого отредактируем файл djangoProject\myBlog\views.py
Заходим в админ панель — 127.0.0.1:8000/admin > переходим в Posts > add Post (в верхнем правом углу). Заполняем текстовые поля, загружаем изображение и оставляем галочку напротив visible (т.е. не скрывать статью). Нажимаем SAVE. Статья добавлена, изображение сохранилось в папку djangoProject/media
Настало время для вывода статей в шаблон home, т.е. на главную страницу.
Изменяем файл djangoProject/myBlog/blog/views.py. Подключаем модули для работы с пагинацией (постраничный вывод новостей) и модель Post. В функции home получаем все записи из таблицы Post и делим их по 4 на каждую страницу. Словарь context содержит ключи и значения, которые будут далее выводиться в шаблон.
С помощью тега truncatechars, обрежем строку до 70 первых символов.
В базовый шаблон djangoProject\myBlog\templates\base.html добавим css файл, который следует создать с расположением djangoProject\static\css\style.css
Для проверки пагинации добавим еще несколько статей.
Программирование и разработка
Шаблон содержит данные HTML, которые генерируются из представления и отображаются в браузере. Статические и динамические HTML-страницы могут быть созданы с использованием шаблона. В приложении Django логика и дизайн сохранены отдельно. Код Python нельзя использовать непосредственно в шаблоне Django, потому что браузер не может интерпретировать код Python. Дизайнер может создавать HTML-страницы только с необходимым форматом или стилем, а кодировщик добавляет статические или динамические данные в шаблон с помощью языка шаблонов Django (DTL).
В этом руководстве показано, как можно создать шаблон Django и как можно использовать DTL для добавления статического или динамического содержимого в шаблон.
Преимущества использования DTL
Использование DTL в шаблонах Django дает множество преимуществ. Некоторые из них упомянуты ниже.
- Логическая часть и презентационная часть приложения создаются отдельно.
- Расширять приложение становится проще.
- Это помогает уменьшить избыточность данных.
- Это обеспечивает безопасность приложения.
Предпосылки
Перед тем, как практиковать сценарий этого руководства, вам необходимо выполнить следующие задачи:
- Установите Django версии 3+ на Ubuntu 20+ (желательно)
- Создайте проект Django
- Запустите сервер Django, чтобы проверить, правильно ли он работает.
Настройте приложение Django
Выполните следующую команду, чтобы создать приложение Django с именем tempapp :
$ python3 manage. py startapp tempapp
Выполните следующую команду, чтобы создать пользователя для доступа к базе данных Django, но если вы уже создали пользователя раньше, то не нужно запускать команду, показанную ниже:
$ python3 manage. py createsuperuser
Добавьте имя приложения в часть INSTALLED_APP файла settings.py, как показано ниже:
Создайте папку с именем шаблонов внутри tempapp папки и установить шаблон расположение приложения в ШАБЛОНАХ части settings.py файла, как показано ниже:
Создайте простой шаблон Django
Создайте файл index.html внутри папки tempapp / templates / со следующим сценарием HTML, чтобы отобразить в браузере отформатированный статический текст из двух строк. HTML-файл нельзя отобразить непосредственно в браузере, а файл views.py используется для визуализации HTML-файла в приложении Django.
index.html
Откройте файл views.py из папки tempapp и добавьте следующий скрипт. Метод rander () используется в файле views.py для отображения любого файла шаблона в браузере.
В следующем скрипте функция index () определена для отображения содержимого файла index.html. Когда эта функция вызывается из файла urls.py, тогда файл шаблона будет отображаться в браузере.
views.py
Измените содержимое файла urls.py с помощью следующего сценария. Согласно сценарию функция index () файла views.py будет вызываться для пути index /.
urls.py
Запустите следующий URL-адрес в браузере, чтобы получить следующий результат. Статические данные отображаются на выходе.
Создайте шаблон Django с DTL
Создайте файл customers.html в папке tempapp / templates / с помощью следующего HTML-сценария. DTL используется в этом скрипте для отображения данных переменной словаря, которая инициализируется данными вложенных списков в файле views2.py. Первый цикл for используется для чтения значений внешнего списка, а второй цикл for используется для чтения значений внутреннего списка.
customers.html
Создайте еще один файл представления с именем views2.py в папке tempapp с помощью следующего сценария. Переменная словаря с именем data объявляется в сценарии, который содержит вложенный список для создания табличных данных из 4 строк и 4 столбцов. Данные переменной будут отправлены в шаблон, когда клиенты () функция этого сценария будет вызываться из urls.py файла.
views2.py
urls.py
Запустите следующий URL-адрес в браузере, чтобы получить следующий результат. Записи всех клиентов из таблиц базы данных были отображены в браузере с помощью DTL.
Вывод
В этом руководстве были показаны способы создания простого шаблона и шаблона на языке шаблонов Django (DTL). Новые пользователи Django смогут правильно создать шаблон для приложения Django после практики сценария из этого руководства.
Читайте также: