静的画像を参照する CSS ファイル内に参照があります。
#logo
{
background: url('/static/logo.png')
}
URL は static.mydomain.com/logo.png である必要があるため、これは私の開発マシンでは問題なく機能しますが、実稼働環境では機能しません。設定ファイルの STATIC_URL に従って css ファイルを動的に変更するにはどうすればよいですか?
静的画像を参照する CSS ファイル内に参照があります。
#logo
{
background: url('/static/logo.png')
}
URL は static.mydomain.com/logo.png である必要があるため、これは私の開発マシンでは問題なく機能しますが、実稼働環境では機能しません。設定ファイルの STATIC_URL に従って css ファイルを動的に変更するにはどうすればよいですか?
相対パスを使用してください。css ファイルが存在するフォルダーに相対的
静的ファイル パスを含む CSS は、テンプレートに含まれるインライン CSS に移動できます。
すなわち
<div style="background: url('{% static 'logo.png' %}')"></div>
ここでの問題は、@media クエリでは機能しないことです。これらをブロックに入れる必要があります。
<style>
@media (min-width: 1200px){
background: url('{% static 'logo.png' %}');
}
</style>
CSS ファイルでタグを使用する場合{% static %}
は、{% include %} タグを使用する必要があります。これを行う例を次に示します。
foo.html
{% load static %}
{% load i18n %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html>
<head>
<style>
{% include "path/to/custom_styles_1.css" %}
</style>
<link rel="stylesheet" href="{% static 'css/custom_styles_2.css' %}">
</head>
<body>
<!-- Your HTML body -->
</body>
</html>
custom_styles_1.css
{% load static%}
{
background: url('{% static "/img/logo.png" %}')
}
custom_styles_2.css
.fa {
position: relative;
text-align: center;
font-family: BTitrBold;
font-size: 3.5em;
}
.name {
position: absolute;
top: 37%;
right: 15%;
}
.school {
position: absolute;
top: 530px;
right: 200px;
}
.id {
position: absolute;
top: 700px;
right: 200px;
}
.degree {
position: absolute;
top: 740px;
left: 195px;
}
custom_styles_1.css
{% static %}
タグを含むCSSファイルです。タグを使用して foo.html ファイルと統合する必要があります{% include %}
。このようにして、Django は必要なすべてのスタイルを適切な場所に配置し、静的タグを正しくレンダリングします。
custom_styles_2.css
はディレクトリ配下の通常のCSSファイルなので、 tagをSTATIC_ROOT
使っても問題ありません。{% static %}
この同様のスタックオーバーフローの質問を参照してください。
必要なことを行う唯一の方法は、Django を使用して CSS を生成することです。HTML は通常、Django のビューとテンプレートに関連付けられていますが、実際には、CSS、JavaScript、プレーン テキストなど、任意のファイル タイプを返すことができます。ただし、そうするとサイトのオーバーヘッドが増えるため、適切な HTTP ヘッダーとサーバー サイドを設定します生成されたファイルのキャッシュは非常に重要です。
基本的な方法:
return render_to_response('stylesheet.css',
{ 'domain': 'http://static.mydomain.com/' },
context_instance=RequestContext(request),
mimetype='text/css'
)
または、開発目的で静的ドメインを localhost にマップするホストをシステムにセットアップすることもできます。その後、通常どおりドメインを参照できますが、開発ファイルから引き続きプルされます。また、システムに Ruby がインストールされている場合は、Ghost と呼ばれる rubygem を利用できます。コマンドラインからカスタムホストを簡単に作成、有効化、無効化、削除できます。