Django — это веб-фреймворк с открытым исходным кодом, основанный на архитектуре «модель-шаблон-представление», созданный на языке Python и поддерживаемый в настоящее время организацией Django Software Organization.
В настоящее время он используется малыми и крупными корпорациями для таких сайтов, как YouTube, Spotify, Instagram, Disqus и Dropbox, и спрос на разработчиков Django растет.
Следуя этому руководству, вы узнаете, как правильно настроить проект Django с помощью Tailwind CSS и Flowbite, чтобы начать разрабатывать современные веб-приложения еще быстрее.
Tailwind CSS — это один из самых популярных CSS-фреймворков, основанный на подходе «полезность — прежде всего», который помогает вам создавать пользовательские интерфейсы еще быстрее, не выходя за пределы HTML.
Flowbite — это библиотека компонентов с открытым исходным кодом, созданная с использованием классов утилит из Tailwind CSS, включая интерактивные элементы, такие как навигационные панели, модалы, кнопки выбора даты и многое другое.
Давайте начнем с учебника!
Требования
Выполните следующие шаги, чтобы создать новый проект Django и установить Tailwind CSS с Flowbite, чтобы получить все преимущества библиотеки компонентов.
Убедитесь, что на вашей локальной машине установлены Node.js и Python.
После этого вам нужно будет установить Django на локальный компьютер, следуя официальному руководству по установке или выполнив следующую команду в терминале, если в вашей среде Python доступен pip:
python -m pip install Django
Теперь, когда у вас установлены все необходимые технологии, вы можете начать с создания нового проекта Django.
Создайте новый проект
Выполните следующую команду в терминале, чтобы создать новый проект Django с именем myapp:
django-admin startproject myapp
cd myapp/
Создайте новый каталог templates/ внутри папки проекта и обновите папку settings.py:
TEMPLATES = [
{
...
'DIRS': [BASE_DIR / 'templates'], # new
...
},
]
Установите django-compressor, выполнив следующую команду в терминале:
python -m pip install django-compressor
Добавьте compressor к установленным приложениям внутри файла settings.py:
# config/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'compressor', # new
]
Настройте compressor в файле settings.py:
COMPRESS_ROOT = BASE_DIR / 'static'
COMPRESS_ENABLED = True
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)
Создайте две новые папки и файл input.css в папке static/src/:
static
└── src
└── input.css
Позже мы импортируем директивы Tailwind CSS и используем его в качестве исходного файла для окончательной таблицы стилей.
Создайте новый файл views.py внутри myapp/ рядом с urls.py и добавьте следующее содержимое:
from django.shortcuts import render
def index(request):
return render(request, 'index.html')
Импортируйте только что созданный экземпляр представления в файл urls.py, добавив следующий код:
from .views import index
urlpatterns = [
path('admin/', admin.site.urls),
path('', index, name='index')
]
Создайте новый файл _base.html в каталоге templates/:
<!-- templates/_base.html -->
{% load compress %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django + Tailwind CSS + Flowbite</title>
{% compress css %}
<link rel="stylesheet" href="{% static 'src/output.css' %}">
{% endcompress %}
</head>
<body class="bg-green-50">
<div class="container mx-auto mt-4">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
Создайте файл index.html, который будет использоваться в качестве домашней страницы:
<!-- templates/index.html -->
{% extends "_base.html" %}
{% block content %}
<h1 class="text-3xl text-green-800">Django + Tailwind CSS + Flowbite</h1>
{% endblock content %}
Наконец, создайте локальный экземпляр сервера, выполнив следующую команду:
python manage.py runserver
Теперь вы получите ошибку, что файл output.css не существует, но это будет исправлено, когда мы установим Tailwind CSS.
Потрясающе! Теперь у вас есть локально работающий проект Django. Давайте продолжим, установив Tailwind CSS.
Установка Tailwind CSS
Выполните следующую команду для установки Tailwind CSS в качестве dev-зависимости с помощью NPM:
npm install -D tailwindcss
С помощью Tailwind CLI создайте новый файл tailwind.config.js:
npx tailwindcss init
Настройте пути к шаблонам, используя значение content в файле конфигурации Tailwind:
module.exports = {
content: [
'./templates/**/*.html'
],
theme: {
extend: {},
},
plugins: [],
}
Импортируйте директивы CSS Tailwind в файл input.css:
/* static/src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Выполните следующую команду, чтобы проследить за изменениями и скомпилировать код Tailwind CSS:
npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch
Откройте localhost:3000 в браузере и вы увидите рабочий HTML с кодом Tailwind CSS.
Теперь, когда вы настроили Django и Tailwind CSS, вы также можете установить Flowbite, чтобы получить доступ ко всей коллекции интерактивных компонентов, таких как навигационные панели, модалы, выпадающие окна, кнопки и многое другое, чтобы сделать разработку еще быстрее.
Установите Flowbite
Flowbite — это библиотека интерактивных компонентов с открытым исходным кодом, построенная поверх Tailwind CSS. Она может быть установлена с помощью NPM и необходима как плагин внутри Tailwind CSS.
Установите Flowbite в качестве зависимости с помощью NPM:
npm i flowbite
Требуйте Flowbite как плагин внутри файла tailwind.config.js:
module.exports = {
plugins: [
require('flowbite/plugin')
]
}
Включите Flowbite в значение содержимого файла tailwind.config.js:
module.exports = {
content: [
'./templates/**/*.html',
'./node_modules/flowbite/**/*.js'
],
theme: {
extend: {},
},
plugins: [],
}
Включите файл JavaScript Flowbite внутрь файла _base.html непосредственно перед концом тега <body> с помощью CDN или включив его непосредственно из папки node_modules/:
<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.js"></script>
Теперь, когда у вас все настроено, вы можете проверить компоненты Flowbite, такие как навигационные панели, модалы, кнопки, кнопки выбора даты и другие.
Компоненты Flowbite
В этом разделе я покажу вам, как искать и использовать интерактивные компоненты Flowbite.
Начнем с добавления компонента }}»>Navbar внутри файла _base.html:
<!-- templates/_base.html -->
{% load compress %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django + Tailwind CSS + Flowbite</title>
{% compress css %}
<link rel="stylesheet" href="{% static 'src/output.css' %}">
{% endcompress %}
</head>
<body class="bg-green-50">
<!-- Add this -->
<nav class="bg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com" class="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Django</span>
</a>
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-green-700 rounded md:bg-transparent md:text-green-700 md:p-0 dark:text-white" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of new HTML -->
<div class="container mx-auto mt-4">
{% block content %}
{% endblock content %}
</div>
<script src="https://unpkg.com/flowbite@1.4.7/dist/flowbite.js"></script>
</body>
</html>
Таким образом, у вас уже есть функциональная и отзывчивая панель навигации, добавленная на все страницы.
Давайте посмотрим, как можно добавить больше контента непосредственно в шаблоны представления, а не только в базовый шаблон.
Посмотрите один из компонентов }}»>Card от Flowbite и добавьте его в файл index.html:
<!-- templates/index.html -->
{% extends "_base.html" %}
{% block content %}
<h1 class="mb-6 text-3xl text-green-800">Django + Tailwind CSS + Flowbite</h1>
<div class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology
acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology
acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#"
class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
Read more
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
{% endblock content %}
На данном этапе вы можете использовать любой из компонентов для создания пользовательских интерфейсов проще и быстрее вместе с Django, Tailwind CSS и Flowbite.
Ознакомьтесь со всеми компонентами, перейдя на официальный сайт документации Flowbite.
Полезные ссылки:
- Фреймворк Django
- Tailwind CSS
- Flowbite — компоненты Tailwind CSS