2016-11-30 8 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 = '/' 

個人用サイト\

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')), 
] 

urls.pyのCRM \のurls.py

私のCRMフォルダで
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> 

私は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 %}タグを使用します。あなたのsettings.pyで

{% 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

はそのようSTATC_URLのあなたの定義の後に

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

が含まれますDjangoはindex.htmlとcssがある.../staticディレクトリを調べます。 BASE_DIRが静的ファイルが置かれている正しいディレクトリを指していることを確認してください。

また、index.htmlでは、index.pyの先頭に{% load staticfiles %}を含め、<link rel="stylesheet" href="{% static 'css/xxx.css' %}">をそれぞれのインスタンスに含める必要があります。ブーストラップコア、テーマ、およびカスタムフォント(上記の書式に従うコードのすべての部分)が含まれています。

スタティックファイルを詳しく調べる、オンラインの素晴らしいジャンゴチュートリアルは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を持っている...

関連する問題