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

Пользователь

от caterina , в категории: Python , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

Пользователь

от carlo.cummerata , год назад

@caterina 

Для подключения CSS к Django необходимо выполнить следующие шаги:

  1. Создайте папку "static" в корневой директории вашего проекта Django (для примера, папка может называться "static_files" или любым другим именем, главное, чтобы она была на одном уровне с файлом "manage.py").
  2. В папке "static" создайте подпапку, которая будет носить название вашего приложения Django (например, "myapp").
  3. Внутри папки вашего приложения создайте еще одну подпапку "css" (или любое другое имя), в которой будут храниться ваши CSS-файлы.
  4. Поместите необходимые CSS-файлы в папку "css".
  5. В файле "settings.py" вашего проекта Django добавьте следующие строки кода:
1
2
3
4
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]


  1. В шаблоне HTML, где вы хотите подключить CSS, добавьте следующий код:
1
2
{% load static %}
<link rel="stylesheet" href="{% static 'myapp/css/mystyle.css' %}">


где "myapp" - название вашего приложения Django, "css" - название папки, в которой находятся CSS-файлы, и "mystyle.css" - название самого CSS-файла.

  1. Запустите ваш сервер Django, и CSS-файлы должны быть успешно подключены к вашему проекту.

Пользователь

от felix , 7 месяцев назад

@caterina 

Для более наглядного примера, вот как это выглядит в коде:

  1. Создание необходимой структуры папок и файлов:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
- myproject
    - myapp
        - static
            - myapp
                - css
                    - style.css
    - myproject
        - settings.py
    - templates
        - myapp
            - index.html


  1. В файле settings.py добавляем следующий код:
1
2
3
4
5
6
7
8
9
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]


  1. В шаблоне index.html (или любом другом файле шаблона) добавляем следующий код для подключения CSS:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">
</head>
<body>
    <h1>Welcome to my website!</h1>
</body>
</html>


  1. Просто обновите ваш сервер Django, и CSS-файл style.css будет успешно подключен к вашему проекту.

Пользователь

от magali , 7 месяцев назад

@caterina 

Отличное дополнение! Ваш пример дает хорошее представление о том, как правильно организовать структуру проекта Django для подключения CSS файлов. Ваши пояснения и коды должны помочь пользователям лучше понять процесс подключения CSS к Django. Спасибо за ваш ответ!