Mit einem Django-variable in eine CSS-Datei

Ich versuche zu erstellen dynamische CSS-Datei mithilfe der Django-Template-engine oder mit anderen Mitteln.

Derzeit habe ich eine CSS-Regel, die wie folgt aussieht:

background-image: url('http://static.example.com/example.png');

Wo http://static.example.com entspricht der STATIC_URL Variablen in Python. Mit der Django-Template-engine, könnte ich theoretisch etwas schreiben wie dieses:

background-image: url('{{ STATIC_URL }}example.png');

Meine Frage ist, wie kann ich das nutzen die Django-Template-engine (oder andere Mittel) zu generieren, CSS dynamisch?

InformationsquelleAutor Wylie | 2011-05-18
  1. 9

    Haben Sie grundsätzlich zwei Optionen:

    1. Dienen die CSS dynamisch, mit einem Eintrag in urls.py usw., so als wäre es eine HTML-Seite. Die Vorlage-Datei wird einfach mit CSS anstelle von HTML -, aber "normal" Django-template-syntax, etc.

    2. Verknüpfung: Verweisen Sie Ihre Hintergrundbild mit einem relativen Pfad. Dies kann oder kann nicht möglich sein, für Ihre Umgebung, aber es ist eine bequeme Möglichkeit, eine statische CSS-Datei referenzieren unterschiedliche Wege, je nachdem, wo Sie gehostet ist.

    • Danke. Ich glaube nicht, dass der relative Pfad-Methode ist robust genug für meine Bedürfnisse, aber funktioniert vielleicht in einem anderen setup. Die erste Methode funktionieren würde, aber ich bin ein wenig besorgt über die Geschwindigkeit.
    • Sie können, wie das @cache_page decorator: docs.djangoproject.com/en/1.3/topics/cache/#the-per-view-cache
    • Sie können testen Sie die Geschwindigkeit, aber es ist wahrscheinlich nicht zu einem problem werden. Ich habe eine user.css - Datei, die meine Seiten verweisen, dass nicht eine Datei überhaupt jemals - ist es dynamisch generiert werden, jedes mal, wenn es angefordert wird. Ich dachte daran, einen zu erzeugen, und-cache, aber es wurde kein performance Grund, dies zu tun.
    InformationsquelleAutor dkamins
  2. 12

    Eine sehr gute Lösung ist hier die Verwendung django-Kompressor. Erstens, wenn Sie mit mehr als einer CSS-Datei, Kompressor ist zu helfen, verbessern die Ladezeiten, indem die Anzahl der Anfragen.

    Nebeneffekt der Komprimierung /das verketten von Dateien ist, dass der Kompressor umschreiben der urls in der css-Datei, so dass Sie relativ referenziert werden statische Dateien (z.B. ../img/logo.png) werden automatisch vollständig qualifizierte urls, die statische Datei-url (z.B. http://static.example.com/img/logo.png).

    Alternativ schreiben Sie benutzerdefinierte Filter zu erreichen, was Sie wollen, oder Sie können komprimieren Sie Ihre völlig statische CSS, und einige dynamische Teile in einer einzigen Datei (z.B. in der Basis einer layout-Datei):

    {% compress css %}
   <link .... />
   <style>
       .some_rule {background-image:{{MEDIA_URL}}/img/logo.png}
   </style>
{% endcompress %}

    Dies bedeutet auch, Sie nicht haben, um sorgen über die Effizienz, wie die css/js-Dateien generiert werden bei dem erstmaligen Zugang wird von einer Vorlage, die Sie benutzt, und Sie sind gespeichert als normale Dateien in Ihrem statischen Verzeichnis (dies ist konfigurierbar), so dass Sie diente als normale, statische Dateien.

    • Danke für die schöne Erklärung. Dies war eine der Lösungen, die ich stieß bei der Suche, aber ich habe es nicht eine einfache Möglichkeit, es zu benutzen.
    • Es ist ein großes Werkzeug zu verwenden, um die Leistung zu verbessern, ich in der Regel nur verwenden es für die Verkettung, und führen Sie einen yuicompressor auf dem Quell-css und js-Dateien auf bereitstellen, und concat unterschiedliche CSS-Dateien für verschiedene Browser mit Macken (erfordert browser-Erkennung middleware und Variablen in RequestContext zu erreichen)
    • Ich verstehe nicht, wie die ../ arbeiten in der Entwicklungsumgebung, aber es funktioniert. Weiß es jemand?
    InformationsquelleAutor Darb
Schreibe einen Kommentar