Добавляем CSS, JS и картинки к проекту django

При разборе фреймворка django неизбежно возникает вопрос о том, как добавить в проект статические файлы.
Посмотрим как это делается на примере CSS.

Приступим.

Создадим проект:

django-admin startproject app

Войдём в него и создадим папку для шаблонам и для медиа файлов (css, js, img… )

На linux:

mkdir templates
mkdir media

В папке media создадим папки для css и изображений:

mkdir img
mkdir css

Теперь создадим шаблон index.html в папке templates:

        <html>
            <head>
                <link rel="stylesheet" href="/media/css/style.css" type="text/css" />
            </head>
            <body>
                <h1>Если этот текст КРАСНЫЙ, то CSS загружен успешно.</h1>
                <img src="/media/img/01.jpg" />
            </body>
        </html>

В папке css создадим таблицу стилей style.css :

 h1 {color:red;}

В папку img положите файл 01.jpg.
Теперь настроим всю эту «штуку»)))
Идём в settings.py
указываем путь к шаблону:

import os
TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__),'app/templates').replace('\\','/'),
)

Приводим urls.py к такому виду:

from django.conf.urls.defaults import patterns, include, url
from django.conf import settings

urlpatterns = patterns(
    (r'^$', 'app.views.index'),
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root':'./media/'}),
)

views.py:

from django.shortcuts import render_to_response
def index(request):
    return render_to_response('index.html', )

Вот и всё.
Теперь запускаем сервер:

python manage.py runserver

И смотрим результат.
Текст должен быть красным, а ниже должно появиться изображение.

 

Похожий код:

Фото аватара
Алексей Петров

Программист, разработчик с 5 летним опытом работы. Учусь на разработчика игр на Unity и разработчика VR&AR реальности (виртуальной реальности). Основные языки программирования: C#, C++.

Оцените автора
Бла, бла код
Добавить комментарий