Добавляем 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

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

Просмотров:   3554

Комментарии

чт, 11/22/2012 - 14:11

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

пт, 01/31/2014 - 10:03
Гость

А почему если в urls.py добавляешь другой адрес который ссылается на index.html выводит силуэт рваной картинки?

ср, 02/05/2014 - 22:21

не совсем понимаю, что вы имеете ввиду. сбросьте скрин

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
Введи эти символы. Ато роботы одолели!