Skip to main content
1 de 3
Riaven
  • 3.4k
  • 6
  • 17
  • 32

Para poder cargar los archivos estáticos de tu proyecto primero se debe de de crear la carpeta llamada static que por lo que ya has comentado, la tienes creada en tu proyecto y debiera de verse algo así (más o menos):

  static
   ├───css
   └───js

Después de ello se deben de agregar dentro del archivo settings.py la siguiente línea.

STATIC_URL = '/static/'

Para hacer referencia de tus archivos estáticos y sepa donde buscar.


Por último, se debe de hacer referencia en cada uno de los templates que tengas.

Que por cierto, deberías tener en otra carpeta, llamada templates y de igual manera se tiene que hacer referencia en TEMPLATES

'DIRS': [os.path.join(BASE_DIR, 'templates')],

Tal que así:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], #para agregar la direccion de tus 
        plantillas HTML
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Dentro de cada plantilla deberás hacer referencia a los arhivos static:

{load staticfiles}

Para hacer que tus archivos static carguen en tu plantilla deberás de llamarlos

Para el CSS

<link href="{% static '/css/style.css' %}" type="text/css" rel="stylesheet" media="screen,projection" />   

Para JS

 <script src="% static 'js/javascript.js' %"></script>

Todo en conjunto quedaría algo así:

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ejemplo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <!-- para hacer referencia a los archivos static -->
    <link href="{% static '/css/style.css' %}" type="text/css" rel="stylesheet" media="screen,projection" />

</head>
<body>


    <!-- para los archivos js -->
    <script src="% static 'js/javascript.js' %"></script>
</body>
</html>
Riaven
  • 3.4k
  • 6
  • 17
  • 32