Как использовать css, находящийся в другом файле django
Возможно, это глупый вопрос. Я новичок в django и мне интересно, как использовать css, когда css находится в другом файле.
прямо сейчас мои пути к файлам выглядят следующим образом:
css: web/static/web/style.css Html: web/templates/web
мой Html файл выглядит следующим образом:
{% load static %}
<!--HTML-->
<body>
<div class="topnav">
<a class="active" href="/">Home</a>
<a href="/donate">Donate</a>
</div>
</body>
мой css выглядит следующим образом:
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
как заставить html использовать css из другого файла?
Этот метод работает для меня.
Создайте каталог staticfiles, затем внутри этого каталога создайте каталог css.
Затем проверьте файл settings.py, чтобы он выглядел следующим образом:
import os
PROJECT_DIR = os.path.dirname(__file__)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(PROJECT_DIR, 'myweblabdev.sqlite'),
'USER': '',
'PASSWORD': '',
'HOST': '',
'PORT': '',
}
}
MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR, 'staticfiles'),
Затем перейдите в основной urls.py файл проекта и добавьте следующее:
from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from myweblab import settings
admin.autodiscover()
urlpatterns = patterns('',
.......
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()
Затем в файл html добавьте вот это, и теперь все должно работать:
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
добавьте тег <head>…</head> и введите <link rel="stylesheet" href="static/web/style.css"/> внутри тега <head>…</head>.
Убедитесь, что <head>…</head> находится вне тега <body>…</body>. Вот новый код.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="static/web/style.css"/>
<!--other head contents like title and meta tag goes here-->
</head>
<!--HTML-->
<body>
<div class="topnav">
<a class="active" href="/">Home</a>
<a href="/donate">Donate</a>
</div>
</body>
</html>