Как подключить css в django

Веб-приложение, как правило, использует различные статические файлы — изображения, файлы стилей css, скриптов javascript и так далее. Рассмотрим, как мы можем использовать подобые файлы.

При создании проекта Django он уже имеет некоторую базовую настройку для работы со статическими файлами. В частности, в файле settings.py определена переменная STATIC_URL , которая хранит путь к каталогу со статическими файлами:

STATIC_URL = 'static/'

А среди установленных приложений в переменной INSTALLED_APPS указано приложение django.contrib.staticfiles

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'hello', ]

Переменная STATIC_URL имеет значение «static/», а это значит, что нам достаточно создать в папке приложения каталог с именем «static» и добавить в него необходимые нам статические файлы. Но, естественно, при необходимости через данную настройку мы можем изменить расположение каталога статических файлов.

Итак, добавим в папку приложения новый каталог static . Чтобы не сваливать все статические файлы в кучу, определим для каждого типа файлов отдельные папки. В частности, создадим в папке static для изображений каталог images , а для стилей — каталог css . Подобным образом можно создавать папки и для других типов файлов.

В папку static/images добавим какое-нибудь изображение — в моем случае это будет файл forest.jpg . А в папке static/css определим новый файл styles.css , который будет иметь какие-нибудь простейшие стили, например:

body < font-family: Verdana;>h1 img

Теперь используем эти файлы в шаблоне. Для этого в начале файла шаблона необходимо определить инструкцию

При этом данный код должен идти после тега DOCTYPE.

Для определения пути к статическим файлам используются выражения типа

Так, пусть в приложении в папке templates определен шаблон index.html , который имеет следующий код:

     " />   
Зимний лес
 " alt="зимний лес" >  

При запуске приложения шаблон index.html будет генерироваться в следующую веб-страницу, которая будет использовать изображение и применять стили:

Настройка путей к файлам

Если нас не устраивает хранение файлов в каталоге по умолчанию — каталоге static, либо мы хотим указать несколько папок, то мы можем в файле settings.py задать все необходимые каталоги с помощью переменной STATICFILES_DIRS , которая принимает список путей:

STATICFILES_DIRS = [ BASE_DIR / "static", "/var/www/static/", "/somefolder/" ]

CSS — сделай это красиво!

Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉

Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.

Давай использовать Bootstrap!

Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/

Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.

Установка Bootstrap

Для установки Bootstrap тебе нужно добавить следующие строки в твоего .html файла ( blog/templates/blog/post_list.html ):

link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 

Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!

Выглядит уже лучше!

Статические файлы в Django

Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.

Куда поместить статические файлы в Django

Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog .

Мы сделаем это, создав папку static внутри каталога с нашим приложением:

djangogirls ├── blog │ ├── migrations │ ├── static │ └── templates └── mysite 

Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.

Твой первый CSS файл!

Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static . Затем создай новый файл под названием blog.css внутри папки css . Готово?

djangogirls └─── blog └─── static └─── css └─── blog.css 

Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.

Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.

Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка? Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red и green .

В файле blog/static/css/blog.css тебе нужно добавить следующий код:

h1 a < color: #FCA205; > 

h1 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h1 (например, когда у нас в коде что-то вроде:

link

). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205 , то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!

В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a , h1 , body ), атрибутом class или атрибутом id . Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a , класса external_link или идентификатора link_to_wiki_page :

a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page"> 

Почитай про CSS селекторы в CSS Selectors на w3schools.

Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:

Мы просто загружаем здесь статические файлы 🙂 Далее между и , после ссылок на файлы Bootstrap CSS, добавь такую строку:

link rel="stylesheet" href=""> 

Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. Мы только что сказали нашему шаблону, где находится наш CSS файл.

Твой файл должен теперь выглядеть следующим образом:

 html> head> title>Django Girls blog title> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> link rel="stylesheet" href=""> head> body> div> h1>a href="/">Django Girls Blog a> h1> div> div> p>published: > p> h1>a href="">> a> h1> p>> p> div> body> html> 

Ок, сохрани файл и обнови страницу!

Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!

body < padding-left: 15px; > 

Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!

Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега в файле blog/templates/blog/post_list.html :

link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css"> 

Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css . Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).

Теперь добавь строку font-family: ‘Lobster’; в CSS файле blog/static/css/blog.css внутри блока определения стиля h1 a (код помещается между скобками < и >) и обнови страницу:

h1 a < color: #FCA205; font-family: 'Lobster'; > 

Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.

Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div , содержащий наш заголовок, как это сделано здесь:

div class="page-header"> h1>a href="/">Django Girls Blog a> h1> div> 

А теперь добавь класс post в твой div , содержащий сообщение в блоге:

div class="post"> p>published: > p> h1>a href="">> a> h1> p>> p> div> 

Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа . , относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css :

.page-header < background-color: #ff9400; margin-top: 0; padding: 20px 20px 20px 40px; > .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active < color: #ffffff; font-size: 36pt; text-decoration: none; > .content < margin-left: 40px; > h1, h2, h3, h4 < font-family: 'Lobster', cursive; > .date < color: #828282; > .save < float: right; > .post-form textarea, .post-form input < width: 100%; > .top-menu, .top-menu:hover, .top-menu:visited < color: #ffffff; float: right; font-size: 26pt; margin-right: 20px; > .post < margin-bottom: 70px; > .post h1 a, .post h1 a:visited < color: #000000; > 

Далее переделаем код HTML, отображающий посты, используя классы. Замени:

 div class="post"> p>published: > p> h1>a href="">> a> h1> p>> p> div> 

в blog/templates/blog/post_list.html этим кодом:

div class="content container"> div class="row"> div class="col-md-8"> div class="post"> div class="date"> p>Опубликовано: > p> div> h1>a href="">> a> h1> p>> p> div> div> div> div> 

Сохрани эти файлы и обнови свой веб-сайт.

Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.

Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!

В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.

Готова к следующей главе?! 🙂

results matching » «

No results matching » «

Настройка и подключение статических файлов в Django

Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.

Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.

1. Создадим папку для статических файлов

В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».

2. Укажите статический URL Django в настройках

Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.

 
# dstatic > dstatic > settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]
Они должны быть там по умолчанию.
После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.
 
# dstatic > dstatic > settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]

Не забудьте импортировать библиотеку os после добавления кода выше.

После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.
3. Создайте папку для изображений
Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.

4. Загрузите статический файл в свой HTML-шаблон
Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.


Важно добавить до того, как добавлять изображение. В противном случае оно не будет загружено.

Использование тега static в шаблоне
После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.
dstatic > templates > home.html
 
        
Привет Django
 
   
Стоит отметить, что этот файл использует также Bootstrap CDN. Результат:

5. Создание папки и файла JavaScript
Если нужно добавить кастомные JS-файлы в проект, создайте папку «js» внутри «static».
Можно также использовать элемент внутри шаблона, но создание отдельного JS-файла улучшит организацию проекта и поможет проще находить все скрипты в одном месте.
Создание файла script.js
В папке static > js создайте файл «script.js», в котором будут храниться все функции JavaScript.
 
$(window).scroll(function() < if ($(document).scrollTop() >600 && $("#myModal").attr("displayed") === "false") < $('#myModal').modal('show'); $("#myModal").attr("displayed", "true"); >>);
6. Загрузите скрипт в шаблон
Теперь для подключения JS-файла к проекту добавьте файл в «header.html». Файл должен вызываться так же, как и в случае с изображениями.
Не забудьте и о в верхней части страницы для корректной работы тегов.
 
         
Привет Django
 
   
7. Создание папки и файла для CSS
Также можно подключить CSS-файлы. Для этого создайте папку «css» внутри «static». Вы также можете использовать элемент и вложить все стили туда.

Но в случае создания отдельных классовых атрибутов, которые затем используются в разных шаблонах, лучше создавать отдельные папки и файлы.
Создание файла стилей css
Создайте файл «stylesheet.css» в static > css . Там будут храниться все ваши стили.
 .custom
8. Загрузите ссылку на CSS в шаблон
Для подключения собственных стилей к проекту, добавьте HTML-элемент в «header.html». Файл вызывается так же, как изображения и JS-файлы.
 
      " type="text/css">    
Привет Django
 
   
И снова не забудьте о в верхней части страницы. Если не добавить эту строку, то будет ошибка.
Если класс custom добавить к container вы увидите изменения:

Ошибки, связанные с загрузкой статических файлов Django
Если вы получили ошибку «Invalid block tag on line 8: ‘static’, expected ‘endblock’. Did you forget to register or load this tag?», то вы наверняка забыли добавить тег загрузки статических файлов в верхней части страницы: до вызова самого изображения.
 
 
Такая ошибка «Could not parse the remainder: ‘/photo.jpg’ from ‘img/photo.jpg’» значит, что вы забыли добавить кавычки вокруг ссылки на изображения. В этом случае нужно использовать две пары кавычек: одни для всего содержимого src , а вторые — для ссылки на изображение.
  
«Invalid block tag on line 9: »static/img/photo.jpg», expected ‘endblock’. Did you forget to register or load this tag?» говорит о том, что вы случайно добавили тег static в URL.
   
Если страница не загружается, и появляется следующая ошибка: «django.core.exceptions.ImproperlyConfigured: You’re using the staticfiles app without having set the required STATIC_URL setting», то это указывает на то, что вы забыли указать статический URL в файле настроек. Его нужно задать в settings.py и сохранить документ.
STATIC_URL = '/static/'
Наконец, если вы не получаете ошибку, но изображение не отображается, то убедитесь, что вы правильно используете тег.
  
Я создал этот блог в 2018 году, чтобы распространять полезные учебные материалы, документации и уроки на русском. На сайте опубликовано множество статей по основам python и библиотекам, уроков для начинающих и примеров написания программ.
Мои контакты: Почта

Python Q https://yandex.ru/q/loves/python Online

Python Q CEO Pythonru admin@pythonru.com https://secure.gravatar.com/avatar/b16f253879f7349f64830c64d1da4415?s=96&d=mm&r=g CEO Pythonru Python Александр Редактор https://t.me/cashncarryhttps://pythonru.com/https://yandex.ru/q/profile/cashnc/ PythonRu.com  admin@pythonru.com Alex Zabrodin 2018-10-26 Online Python, Programming, HTML, CSS, JavaScript 
Как подключить CSS к django
Помогите пожалуйста! Не могу понять, почему не подключается css в html на django. При запуске получаю только html, без css, в логе пишет:
[13/Jul/2021 15:08:19] "GET /products/smartwatch/UMIDIGI-Uwatch-3S-black/? HTTP/1.1" 200 9268 Not Found: /products/static/mainapp/css/style.css [13/Jul/2021 15:08:20] "GET /static/mainapp/css/style.css HTTP/1.1" 404 1790 Not Found: /products/static/mainapp/media/imgonline-com-ua-Replace-color-tc87FXAM0b.jpg [13/Jul/2021 15:08:20] "GET /products/static/mainapp/css/style.css HTTP/1.1" 404 2518 Not Found: /products/static/mainapp/media/thumb_agm-x2_agm.org_22.jpg [13/Jul/2021 15:08:20] "GET /products/static/mainapp/media/imgonline-com-ua-Replace-color-tc87FXAM0b.jpg HTTP/1.1" 404 2632 [13/Jul/2021 15:08:20] "GET /products/static/mainapp/media/thumb_agm-x2_agm.org_22.jpg HTTP/1.1" 404 2578 
settings.py
[![""" Django settings for shop project. Generated by 'django-admin startproject' using Django 3.2.5. For more information on this file, see https://docs.djangoproject.com/en/3.2/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/3.2/ref/settings/ """ import os.path from pathlib import Path # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/ # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = \[\] # Application definition INSTALLED_APPS = \[ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'mainapp', \] MIDDLEWARE = \[ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', \] ROOT_URLCONF = 'shop.urls' TEMPLATES = \[ < 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': \[\], 'APP_DIRS': True, 'OPTIONS': < 'context_processors': \[ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', \], >, >, \] WSGI_APPLICATION = 'shop.wsgi.application' # Database # https://docs.djangoproject.com/en/3.2/ref/settings/#databases DATABASES = < 'default': < 'ENGINE': 'django.db.backends.sqlite3', 'NAME': str(os.path.join(BASE_DIR, "db.sqlite3")) >> # Password validation # https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = \[ < 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', >, < 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', >, < 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', >, < 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', >, \] # Internationalization # https://docs.djangoproject.com/en/3.2/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = True # Static files (css, JavaScript, Images) # https://docs.djangoproject.com/en/3.2/howto/static-files/ STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR,'static') MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(BASE_DIR,'media') STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static_dev'), os.path.join(BASE_DIR,'templates'), ) # Default primary key field type # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'][1]][1] 

Структура