問題はタイトルに記述されています。 Django
を使って作成しているブログのテンプレートがあります。Djangoは私のテンプレートのCSSを表示しません
私はHTMLファイル上でダブルクリックを使用して、通常はそれを開くと、それは次のようになります。
しかし、私はDjangoのプロジェクトからURLを介して、それを開くと、それはこの
のように見えます緑色の四角形(CSSの一部)が表示されますが、明らかにCSSを正しく開くことはできません。
これを解決する方法はありますか?
問題はタイトルに記述されています。 Django
を使って作成しているブログのテンプレートがあります。Djangoは私のテンプレートのCSSを表示しません
私はHTMLファイル上でダブルクリックを使用して、通常はそれを開くと、それは次のようになります。
しかし、私はDjangoのプロジェクトからURLを介して、それを開くと、それはこの
のように見えます緑色の四角形(CSSの一部)が表示されますが、明らかにCSSを正しく開くことはできません。
これを解決する方法はありますか?
Djangoでは、ファイルをダブルクリックしてHTMLを開くことはできません。サーバーを最初に実行し、ローカルホストを使用してサイトを開く必要があります(2番目の画像と同じように)。
これらの画像で判断すると、画像を静的フォルダに入れてもよろしいですか? Djangoでは、HTMLファイルは、アプリの「テンプレート」フォルダに、CSS、JavaScript、および画像は「静的」フォルダに保存されます。
この回答が役に立たない場合は、ここにコードを掲載する必要があります。そうしないと、問題が見つかりません。
これは、静的ファイルが適切にレンダリングされていないためです。
codingfacilito
/ | \
/ | \
another-app blog One-more-app
|
|
static
|
|
blog
/| \
/ | \
js css images
/ | \
/ | \
script1.js style1.css img1.jpg
script2.js style2.css img2.jpg
上記内すべての静的ファイルを置くには、最も有用であり、あなたの静的ファイルを保存する方法をお勧めします。
今すぐあなたのhtmlファイルで
HTMLテンプレート
Dont't私が説明し
<!DOCTYPE html>
{% load staticfiles %} <!-- Don't forget this -->
<html>
<head>
<!-- Stylesheets -->
<link rel="stylesheet" href="{% static 'blog/css/style1.css' %}"/>
<link rel="stylesheet" href="{% static 'blog/css/style2.css' %}"/>
<!-- javascripts -->
<script src="{% static 'blog/js/script1.js' %}"></script>
<script src="{% static 'blog/js/script2.js' %}"></script>
</head>
</html>
<body>
<!--render your image now -->
<img src="{% static 'blog/images/img1.jpg' %}">
</body>
{%負荷staticfiles%}を追加することを忘れディレクトリ構造があります非常に重要です。今のところそれはあなたにとって冗長なように見えるかもしれませんが、おそらく最も良い方法です。 Djangoは静的ファイルを収集するとき、すべてのアプリケーションの静的ディレクトリの中に入り、すべてのファイルを収集するので、上の方法では名前の衝突が発生し、問題に陥る可能性があります。
こんにちはAstik、お返事ありがとうございます。私はディレクトリツリーとちょっと混乱しています:なぜ ブログ>静的>ブログ> CSSですか? blog> satic> cssだけではありませんか? そして、変数STATIC_URL = '/ static /'をsettings.pyでどのように処理するのですか?この問題には何か関係がありますか?もう一度ありがとう:) –
@OldWolf上記のようにディレクトリ構造に従ってくださいブログ>静的>ブログ> CSS。今のところあなたはその重要性を理解できないかもしれませんが、それは非常に重要です。 STATIC_URL = '/ static /'は開発プロセスで問題ありません。 –
もう一度@Astik Anand。私を助けてくれてありがとう。今それは完全に動作します:) –
あなたのJSコンソールを見てみましょう – JacobIRR