Question

我正在开发一个Dajngo项目，我希望包含一个登陆页面，将其用于主页，我试图自己使用它并在教程中指导我但是我无法加载CSS样式。我是新用的这个框架（bootstrap），有人可以帮我识别我的错误加载CSS样式吗？

文件：

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。任何评论都有帮助，谢谢。

Answer 1

在您的settings.py include

中

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

在定义STATC_URL之后

，以便Django知道查看index.html和css所在的... / static目录。确保您的BASE_DIR指向静态文件所在的正确目录。

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

可以找到一个很好的在线django教程，可以更深入地查看静态文件{。{3}}。

Answer 2

Django文档提供了编写第一个应用程序的好教程。 Here is the page that explains how to load the css

加载你的css的标签有错误的href。它们应该加载Django静态标记。首先确保您拥有静态文件夹中的所有文件。在STATIC_ROOT中指定的那个，因此创建文件夹<YOUR_BASE_DIR>/static/css/并在那里复制bootstrap.min.css和freelancer.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">

Answer 3

尝试更改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>

Answer 4

您可以下载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" %}">

有一个快乐的代码...

如何在Django项目中使用登陆页面（bootstrap）？

4 个答案: