estaticos - django static files production
¿Cómo referirme a archivos estáticos en mis archivos css? (8)
Tengo una referencia dentro de mi archivo CSS que se refiere a una imagen estática:
#logo
{
background: url(''/static/logo.png'')
}
Esto funciona bien en mi máquina dev pero no en mi entorno de producción, ya que la url debería ser static.mydomain.com/logo.png. ¿Cómo cambio dinámicamente el archivo css de acuerdo con STATIC_URL en mi archivo de configuración?
Puede haber una manera de hacer que django trate el archivo CSS como una plantilla (no estoy muy familiarizado con django) pero tal vez quiera probar una solución diferente: use un lenguaje dinámico de hojas de estilo como LESS o Sass . Con MENOS sería tan simple como
@base: "//static.example.com/"
#logo {
background: url(%("%s/logo.png", @base))
}
Puede mover cualquier CSS que contenga rutas de archivos estáticos a CSS en línea, contenido en la plantilla.
es decir
<div style="background: url(''{% static ''logo.png'' %}'')"></div>
El problema aquí es que no funcionará para las consultas de @media, necesitarías ponerlas en un bloque, por ejemplo
<style>
@media (min-width: 1200px){
background: url(''{% static ''logo.png'' %}'');
}
</style>
Se recomienda utilizar la ruta relativa a su activo estático en el archivo css.
body {
background: white url("images/background.gif") no-repeat right bottom;
}
Si desea usar {% static %} etiqueta {% static %} en su archivo CSS, debe usar la etiqueta {% include%}. Aquí hay un ejemplo para hacerlo:
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 es el archivo CSS que incluye {% static %} etiqueta {% static %} . Debe integrarlo con su archivo foo.html con la etiqueta {% include %} . De esta manera, Django colocará todos los estilos que necesite en el lugar apropiado y procesará las etiquetas estáticas correctamente.
custom_styles_2.css es un archivo CSS normal ubicado en el directorio STATIC_ROOT , por lo que puede usar {% static %} etiqueta {% static %} para él sin ningún problema.
Si está utilizando django-libsass para generar su css, puede usar funciones personalizadas para puentear django y el precompilador sass.
De hecho, la función static ya está implementada y puede usarla:
.foo {
background: url(static("myapp/image/bar.png"));
}
como se describe aquí: https://github.com/torchbox/django-libsass#custom-functions
Si sus imágenes no son demasiado grandes, puede usar URI de datos, que se pueden incrustar directamente en el archivo css sin ningún vínculo. Se ven así:
.box-with-background {
background-image: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI='')
background-repeat: repeat;
}
Por lo general son un poco más largos que el que he mostrado. Puede generarlos con javascript y puede encontrar algunos generadores en línea.
Utilice un camino relativo. Relativo a la carpeta donde reside el archivo css
Ver esta pregunta similar de .
La única forma de hacer lo que quieres es generar tu CSS a través de Django. El HTML generalmente se asocia con las vistas y plantillas de Django, pero en verdad, puede devolver cualquier tipo de archivo: CSS, JavaScript, texto sin formato, etc. El almacenamiento en caché del archivo generado será muy importante.
Método básico:
return render_to_response(''stylesheet.css'',
{ ''domain'': ''http://static.mydomain.com/'' },
context_instance=RequestContext(request),
mimetype=''text/css''
)
Alternativamente, puede configurar hosts en su sistema que mapeen los dominios estáticos de vuelta a localhost para propósitos de desarrollo. Luego, puede hacer referencia al dominio como de costumbre, pero aún así se extraerá de sus archivos de desarrollo. Además, si tienes Ruby instalado en tu sistema, puedes usar un rubygem llamado Ghost. Le permite crear, habilitar, deshabilitar y eliminar fácilmente hosts personalizados desde la línea de comandos sin problemas.