4

たとえば、次のように画像をロードしたい場合があります。

background: url("/path/to/image.png")

ただし、CSS ファイルはテンプレート システムを介して実行されないため、通常はアクセスできません。

{% load staticfiles %}

このような静的コンテンツを処理する正しい方法は何ですか?

4

1 に答える 1

4

ブラウザーは既に css ファイルのパスを認識しているため、代わりに相対 URL を使用してください。

background: url("../img/image.png")

[編集]

しかし、/onelevel にページがあり、別のページが /really/deeply/nested/page にある場合、これは相対的なシステムを壊さないのでしょうか? また、最終的に静的コンテンツを外部でホストすることを選択した場合、理想的には、研究コンテンツ管理を可能な限り DRY にしたいと考えています - OP.

説明させてください。CSS ファイルを読み取るために、ブラウザーは最初に CSS ファイルをダウンロードする必要があります。ダウンロードするには、CSS ファイルの URL を知っている必要があります。したがって、ブラウザはすでに CSS ファイルへのパスを認識しています。CDN でメディアをホストしていて、URL が次のとおりであるとします。

http://cdn.yoursite.com/css/style.css

のような相対 URL を使用する../img/logo.pngと、ブラウザーは CSS ファイル ( http://cdn.yoursite.com/css/) へのパスを取得し、それに追加../img/logo.pngします。

うまく機能し、パス全体よりも短く、ドットを変更せずに他のプロジェクト/アプリケーションでメディアを再利用できます. これ以上 DRY を取得することはできません。

これが、CSS ファイルの近くに settings.STATIC_URL を必要としない理由です。これは、HTTP サービング時にファイル URL から派生します。

于 2013-06-15T01:11:24.063 に答える