2016-11-30 75 views
0

我正在开发一个Dajngo项目,我想包括一个登陆页面用于主页,我试图单独使用它,并在教程中指导我,但我无法获取它加载CSS样式。我是新的使用这个框架(引导),任何人都可以帮助我确定我的错误加载CSS样式请?如何在Django项目中使用登陆页面(引导程序)?

文件:

setting.py

INSTALLED_APPS = (
     'django.contrib.admin', 
     'django.contrib.auth', 
     'django.contrib.contenttypes', 
     'django.contrib.sessions', 
     'django.contrib.messages', 
     'django.contrib.staticfiles', 
     'crm', #app's name 
     'bootstrap3', 
    ) 

    TEMPLATES = [ 
     { 
      'BACKEND': 'django.template.backends.django.DjangoTemplates', 
      'DIRS': [os.path.join(BASE_DIR,'templates')], 
      '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', 
       ], 
      }, 
     }, 
    ] 

    STATIC_URL = '/static/' 
    STATIC_ROOT = os.path.join(BASE_DIR, 'static') 
    LOGIN_REDIRECT_URL = '/' 

mysite的\ urls.py

from django.conf.urls import include, url 
from django.contrib import admin 
from django.views.generic.base import RedirectView#TemplateView 
from django.core.urlresolvers import reverse 
from django.shortcuts import redirect 
from crm import views 
admin.autodiscover() 

urlpatterns = [ 
    url(r'^$', views.HomePageView.as_view()), 
    url(r'^admin/', include(admin.site.urls)), 
    url(r'', include('crm.urls')), 
] 

CRM \ urls.py

from django.conf.urls import url, include 
from django.contrib import admin 
from crm import views 

urlpatterns = [ 
    url(r'^$', views.HomePageView.as_view()), 
    url(r'^admin/', admin.site.urls), 
    url(r'^', include('crm.urls')), 
] 

CRM \ views.py

from django.shortcuts import render 
from django.views.generic import TemplateView 

# Create your views here. 
class HomePageView(TemplateView): 
    def get(self, request, **kwargs): 
     return render(request, 'crm/index.html', context=None) 

引导\ index.html在

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Freelancer - Start Bootstrap Theme</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Theme CSS --> 
    <link href="css/freelancer.min.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

在我的CRM文件夹中我有2个文件夹,静态和模板文件夹和内他们分别是CSS文件和HTML文件。我想使用这个模板Freelancer。任何评论都有帮助,谢谢。

+0

你能告诉我们'head' of'index.html'?我们需要看你如何包含你的样式表 – pythad

+0

@pythad当然,请稍等一下 –

+0

@pythad现在你可以看到它 –

回答

0

Django文档有一个很好的教程来编写你的第一个应用程序。 Here is the page that explains how to load the css

加载你的CSS的标签有错误的href。他们应该加载Django静态标签。首先确保你的静态文件夹中有所有文件。在STATIC_ROOT中指定的那个,所以创建文件夹<YOUR_BASE_DIR>/static/css/并在那里复制bootstrap.min.cssfreelancer.min.css。要加载它们,只需更改模板以使用正确的路径。

{% load static %} 
<!DOCTYPE html> 
<html lang="en"> 

<head> 

<!-- Bootstrap Core CSS --> 
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> 

<!-- Theme CSS --> 
<link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet"> 
+0

我已经这样做了,其实我跟着那个Django文档,谢谢 –

0

试着改变你的index.html和使用{% static %}标记为包括您的静态文件:

{% load static %} 
<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Freelancer - Start Bootstrap Theme</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet"> 

    <!-- Theme CSS --> 
    <link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 
+0

我已经尝试过了,它仍然没有加载CSS样式,它只加载HTML –

1

在你的settings.py包括

STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), )

您STATC_URL的定义,以便之后Django知道要查看index.html和css所在的.../static目录。请确保您的BASE_DIR指向您的静态文件位于正确的目录。

此外,index.html中,你应该在你的index.py顶部包括{% load staticfiles %},还可以使用<link rel="stylesheet" href="{% static 'css/xxx.css' %}">为每个实例boostrap核心,主题和自定义字体(因此您遵循上述格式的所有代码部分)。

一个很好的在线django教程,可以找到更深入的静态文件,可以找到here

+0

感谢您的贡献,但我改变了你所问,仍然不加载CSS样式,并感谢链接,我希望能够解决我的问题 –

0

,你可以下载bootstrap.css,并保存在您的静态文件是这样的:

setting.py :

STATIC_URL = '/static/' 
STATIC_ROOT = os.path.join(BASE_DIR, 'static') 

文件夹中的项目

mysite/ 
    mysite1/ 
     setting.py 
    mysite2/ 
     views.py 
     urls.py 
    static/ 
     css/ 
      bootstrap.css 

    #folders name is cutom for me beacuse i dont khow you project folders 

在你的模板使用的顶部:

{% load staticfiles %} 

,然后在标记您的模板的:

<link rel="stylesheet" href="{% static "css/bootstrap.css" %}"> 

有一个幸福的codeing ...