Шаблоны, CSS и JS
В моем предыдущем посте Создание блога Django — часть 01 я рассказал об начальной настройке локальной среды и начале работы с проектом и приложением Django. Сегодня я расскажу, как добавлять шаблоны, CSS и JavaScript.
1. Шаблоны
Django использует шаблоны, чтобы каждый отдельный HTML-файл мог быть представлен представлением на странице, указанной URL-адресом. Я считаю следующий шаблон более чистым, менее запутанным и более эффективным решением. Я обычно использую его в производственных проектах.
Мы будем структурировать наши шаблоны как единый каталог шаблонов на уровне проекта. Чтобы это заработало, нам нужно добавить несколько настроек в файл settings.py, чтобы мы могли сообщить Django, где найти папку с шаблонами.
- Откройте settings.py в своем любимом редакторе. На данный момент у меня VSCode. Внесите следующие изменения в
'DIRS'
в переменнойTEMPLATES
:
# django_app/settings.py TEMPLATES = [ { ... 'DIRS': [os.path.join(BASE_DIR, 'templates')], ... }, ]
- Создайте папку уровня проекта с именем templates и файл HTML с именем home.html.
$ mkdir templates $ touch templates/home.html
- Настройте URL-адрес, начните с файла urls.py на уровне проекта. Направьте его на наше приложение для блога.
# django_app/urls.py from django.contrib import admin from django.urls import path, include # new urlpatterns = [ path('admin/', admin.site.urls), path('', include('blog.urls')), # new ]
- Создайте файл urls.py на уровне приложения.
$ touch blog/urls.py
- Добавьте следующий код.
# pages/urls.py from django.urls import path from .views import HomePageView urlpatterns = [ path('', HomePageView.as_view(), name='home'), ]
Если мы запустим приложение в этот момент, вы получите сообщение об ошибке HomePageView not found. Давайте исправим это, создав представление.
Мы будем использовать встроенный в Django TemplateView. Обновите pages/views.py следующим кодом
# blog/views.py from django.views.generic import TemplateView class HomePageView(TemplateView): template_name = 'home.html'
Представление пишется с большой буквы, потому что это класс, а классы, в отличие от функций, всегда должны быть написаны с большой буквы.
На данный момент у нас все готово с нашими шаблонами. Запустите сервер приложений Django, и вы должны увидеть новую домашнюю страницу:
2. Статические файлы
Наша домашняя страница выглядит ужасно упрощенно, чтобы исправить это, нам нужно добавить немного CSS. Добавить CSS в Django довольно просто.
- Создайте папку уровня проекта с именем static и измените settings.py, чтобы указать Django, где найти статические файлы.
$ mkdir static/css $ touch static/css/base.css
- Добавьте несколько стилей
/* static/css/base.css */ body { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; }
- Изменить settings.py
# django_app/settings.py STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
И, наконец, добавьте статические файлы в наши шаблоны, добавив {% load static %}
в начало файла home.html.
<!-- templates/home.html --> {% load static %} <html> <head> <title>Django blog</title> <link href="{% static 'css/base.css' %}" rel="stylesheet"> </head> <body> </body> </html>
В конце концов нам нужно будет добавить немного JavaScript в наше приложение Django. На данный момент мы будем держать это простым. Процесс добавления JavaScript аналогичен добавлению CSS, например:
- Создайте новый каталог с именем js и файл с именем scripts.js в статическом каталоге.
$ mkdir static/js $ touch static/js/scripts.js
Мы закончим с этим
<!-- templates/home.html --> {% load static %} <html> <head> <title>Django blog</title> <link href="{% static 'css/base.css' %}" rel="stylesheet"> </head> <body> <script src="{% static '/js/script.js' %}" type="text/javascript"></script> </body> </html>
В следующем посте я расскажу о расширении шаблонов, тематике и типографике.