Шаблоны, 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>

В следующем посте я расскажу о расширении шаблонов, тематике и типографике.