Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Templates y archivos estáticos

19/37
Recursos

Los templates quedarán definidos en un nuevo folder que llamaremos /templates/.

El concepto de archivos estáticos en Django, son archivos que se usan a través de la aplicación para pintar los datos. Pueden ser archivos de imagen, audio y video, o archivos css y scripts js.

Para servir archivos estáticos, nos apoyamos en STATIC_ROOT y STATIC_URLS.

Aportes 64

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si están usando Django 3.0 en la configuración de los archivos estáticos no se usa una tupla sino una lista en cuanto la variable STATICFILES_DIRS

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]```

Chicos, para los que tienen el problema de que el Navbar se monta sobre el feed al inicio cambien la clase fixed-top de la etiqueta nav por sticky-top

ATENTOS Después de pelearme bastante para saber porque mi resultado no se veía igual, haciendo LO MISMO, he descubierto, seguramente por error del profesor, que el código que muestra en el vídeo, y el que aporta en la pestaña ‘ARCHIVOS Y ENLACES’ no son iguales, estos archivos son el de ‘templates/base.html’ Y ‘templates/nav.html’.

Este último, ‘nav.html’ ni se llega a tocar en todo el video, sin embargo es importante para lograr el resultado final, igual que alguna modificación que otra que incluye en el archivo ‘base.html’…

Mi resultado:

Para los que dicen que no les quedó igual, es un problema de ubicacion del feed, ya que el margen que le ponen respecto a nav, no es suficiente, se arregla dandole mas margen o mas padding
En mi caso usé la clase de bootstrap para darle mas padding “pt-5”

traes mucho de afuera , eso no esta bueno.
lo ideal es que andes haciendo aca las cosas, aparte mucho bootstrap y lo que hay que aprender aca es django

actualización a ultima versión de django:

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

# STATICFILES_FINDERS = [
#     'django.contrib.staticfiles.finders.FileSystemFinder',
#     'django.contrib.staticfiles.finders.AppDirectoriesFinder'

# ]

según la documentación ahora el directorio de archivos estaticos (staticsfiles_dirs) va en una lista y no hace falta añadir configuración de busqueda, porque ya lo hace por defecto:
The default will find files stored in the STATICFILES_DIRS setting (using django.contrib.staticfiles.finders.FileSystemFinder) and in a static subdirectory of each app (using django.contrib.staticfiles.finders.AppDirectoriesFinder). If multiple files with the same name are present, the first file that is found will be used.

si quieren cargar un favicon para que se vea en la pestaña de navegación lo pueden hacer colocando en base.html entre los head lo siguiente

<link rel="shortcut icon" href="/static/img/favicon.png">

users/base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block head_content %}{% endblock %}

    {% load static %}
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />

</head>
<body class="h-100">

    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-sm-12 col-md-5 col-lg-5 pt-2 pl-5 pr-5 pb-5" id="auth-container">

                <img src="{% static "img/instagram.png" %}" class="img-fluid rounded mx-auto d-block pb-4" style="max-width: 60%;">

                {% block container %}{% endblock%}

            </div>
        </div>
    </div>

</body>
</html>

nav.html:

{% load static %}
<nav class="navbar navbar-expand-lg fixed-top" id="main-navbar">
    <div class="container">

        <a class="navbar-brand pr-5" style="border-right: 1px solid #efefef;" href="">
            <img src="{% static "img/instagram.png" %}" height="45" class="d-inline-block align-top"/>
        </a>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">

                <li class="nav-item">
                    <a href="">
                        <img src="{% static 'img/default-profile.png' %}" height="35" class="d-inline-block align-top rounded-circle"/>
                    </a>
                </li>

                <li class="nav-item nav-icon">
                    <a href="">
                        <i class="fas fa-plus"></i>
                    </a>
                </li>

                <li class="nav-item nav-icon">
                    <a href="">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</nav>

En el minuto 10:43 Pablo define los STATICFILES_DIRS como una tupla y la documentación como una lista.

Documentación django

STATICFILES_DIRS = [
os.path.join(BASE_DIR, “static”),
’/var/www/static/’,
]

Aunque probé ambas el resultado fue el mismo. ¿será siempre así o solo funcionó para este caso por tener un solo directorio de estáticos?, ¿Alguien tiene otra razón? ¿a ustedes también les dio igual?

static/css/main.css

html, body {
    background: #fafafa;
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

#auth-container {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 1px;
}

#main-navbar {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.0975);
}

.post-container {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
}

.nav-icon a {
    color: #262626;
    font-size: 1.3em;
    display: block;
    margin-top: .2em;
    margin-left: 1.2em;
    font-weight: 100;
}
.nav-icon a:hover {
    color: #1d5e72;;
}
#profile-box {
    background: #fff;
    border: 1px solid rgba(0,0,0,.0975);
    border-radius: 1px;
    margin-top: 6em;
}

#user-posts #post-thumb {
    background: #fff;
}

base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block head_content %}{% endblock %}


    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />

</head>
<body>

    {% include "nav.html" %}

    <div class="container mt-5">
        {% block container %}
        {% endblock%}
    </div>

</body>
</html>

Con respecto a los templates o vistas saben en que curso te explican el funcionamiento de estos codigos por ejemplo:
{% extends “base.html” %}
{% load static %}

{% block head_content %}

Veo que el profesor repite mucho código en la forma en como definió los bloques en los templates. Este sería el más óptimo.

feed.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    {% block head_content %}{% endblock %}
  </head>
  <body>
    {% include "nav.html" %}
    <div class="container" style="margin-top: 6rem;">
      {% block container %}{% endblock %}
    </div>
  </body>
</html>

nav.html

{% load static %}
<nav class="navbar navbar-expand-lg fixed-top" id="main-navbar">
  <div class="container">
    <a class="navbar-brand pr-5" style="border-right: 1px solid #efefef;" href="">
      <img src="{% static "img/instagram.png" %}" height="45" class="d-inline-block align-top" />
    </a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a href="">
            <img src="{% static 'img/default-profile.png' %}" height="35" class="d-inline-block align-top rounded-circle">
          </a>
        </li>
        <li class="nav-item nav-icon">
          <a href="">
            <i class="fas fa-plus"></i>
          </a>
        </li>
        <li class="nav-item nav-icon">
          <a href="">
            <i class="fas fa-sign-out-alt"></i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

users/base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    {% block head_content %}{% endblock %}
  </head>
  <body class="h-100">
    <div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
        <div class="col-sm-12 col-md-5 col-lg-5 pt-2 pl-5 pr-5 pb-5" id="auth-container">
          <img src="{% static "img/instagram.png" %}" class="img-fluid rounded mx-auto d-block pb-4" style="max-width: 60%;">
          {% block container %}{% endblock %}
        </div>
      </div>
    </div>
  </body>
</html>

feed.html

{% extends "base.html" %}

{% block head_content %}
  <title>Platzigram feed</title>

  {% load static %}
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous" />
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/main.css' %}">
{% endblock %}

{% block container %}
  <div class="row">
    {% for post in posts %}
      <div class="col-lg-4 offset-lg-4 mb-2">
        <div class="media">
          <img class="mr-3 rounded-circle" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
          <div class="media-body">
            <h5 class="mt-0">{{ post.user.name }}</h5>
            {{ post.timestamp }}
          </div>
        </div>
        <img class="img-fluid mt-2 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
        <h6 class=""ml-1 mt-1>{{ post.title }}</h6>
      </div>
    {% endfor %}
  </div>
{% endblock %}

Hola! a los que no les de el mismo resultado puede ser por una variación de las versiones de boostrap, lo que me funcionó fue cambiar en los archivos base.html las siguientes líneas:

# Esta
<link rel="stylesheet" href="{% static 'css/main.css' %}">

#Por esta
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Es la línea que ocupamos en videos anteriores, con esto ya funcionó correctamente, imagino que es porque hace referencia a la versión especifica de boostrap que se ocupa en el curso, ojalá les sea de ayuda c:

A mi me funciono solo con esto:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

Para Django==3.2.6 así serán las configuraciones:

STATICFILES_DIRS = (
    BASE_DIR / 'static'
)

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

TEMPLATES = [
	{	.
		.
		.
		'DIRS': [BASE_DIR / "templates"],
	}
]

Ahora en Django 4.0 cuando se pone una ruta es sin el os.path.join() es así:

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

Por qué cuando recargo la pagina después de ejecutar runserver tengo el error "GET /static/css/bootstrap.min.css.map HTTP/1.1" 404 1699 ?

Tengo el mismo bootstrap que el profesor, pero el <ul> no se muestra el dafult-profile ni los otros items.

ERROR TemplateDoesNotExist at /posts/ (SOLUCION)

Si tienes este tipo de error es por que quizas no estas configurando bien el path de los archivos ya sea base. html o nav .html, para ello te recomiendo que en el llamado de los path de cada uno coloques ./ para declarar que el archivo que estas buscando se encuentra dentro del mismo path que estas trabajando quedaria de la siguiente forma:

base . html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block head_content %}{% endblock %}


    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />

</head>
<body>

    {% include "./nav.html" %}

    <div class="container mt-5">
        {% block container %}
        {% endblock%}
    </div>

</body>
</html>

feed.html

{% extends "./base.html" %}

{% block head_content %}
<title>Platzigram feed</title>
{% endblock %}

{% block container %}

<div class="row">
    {% for post in posts %}
    <div class="col-lg-4 offset-lg-4">
        <div class="media">
            <img class="mr-3 rounded-circle" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
            <div class="media-body">
                <h5 class="mt-0">{{ post.user.name }}</h5>
                {{ post.timestamp }}
            </div>
        </div>
        <img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
        <h6 class="ml-1 mt-1">{{ post.title }}</h6>
    </div>
    {% endfor %}
</div>


{% endblock %}

Actualmente para construir las direcciones se utiliza:

BASE_DIR / 'subdir'

Por ejemplo para el directorio de archivos estáticos sería:

STATICFILES_DIRS = (
    BASE_DIR / 'static',
)

explicación static files

Mi proyecto está corriendo bien. Pero en red veo que me tira un estado 404 para favicon.ico. Veo que a Pablo no le tira ese problema, pero no entiendo por qué me puede estar pasando.

Eh intentado hacer que cargue los archivos estaticos pero no hay caso, asi que segui con las clases. Ahora vuelvo para atras a ver si puedo solucionarlo…
Gracias a ‘django.contrib.staticfiles.finders.AppDirectoriesFinder’,

los archivos estaticos pueden ser encontrados solo si la carpeta static se encuentra en la app.

STATICFILES_DIR = ( os.path.join(BASE_DIR,‘static’)
STATIC_URL = ‘/static/’

Alguna ayuda para que en cada app no esten los archivos estaticos?

Al descargar la imagen del sistema de archivos me lo guarde en formato webp. A continuación dejo una página para cambiar esta imagen a png.

https://ezgif.com/webp-to-png

A los que no les funcione, como a mi caso
<img src="{% static “img/instagram.png” %}" >
Prueben:
<img src={{static(’'img/instagram.png ")}}>
Me funciono perfectamente

Exelente curso!!!

extends y bloques son tremendamente dinamicos para no estar poniendo el mismo codigo en los direferentes .html

Para los templates podríamos verlos como si se trataran de componentes y containers en React, de esa forma podríamos asociarlos de una mejor forma.

Es mucho mas sencillo crear el directorio templates en cada aplicacion, es muhco mas organizado y ayuda más a temas de escalabilidad de un proyecto

Este comentario morira pronto por el nuevo curso de Facundo, pero por si ven este curso antes de que salga…

Para Django 4.0 si no les funciona la imagen en el html con {{ post.image }}, pueden usar

{% get_media_prefix %}{{ post.image }}

I mean


<figure>
<img width="500px" src="{% get_media_prefix%}{{ post.image }}" alt="">
   </figure>

Si se perdieron un poco como yo jaja, encontre este tutorial de un blog que les puede servir para entender mejor las vistas y templates.

https://tutorial.djangogirls.org/

Para los que copiaron y pegaron el codigo del profe, como yo, les va a salir un error del estilo

“Unclosed tag on line 25: ‘block’. Looking for one of: endblock.”

Es por un error en base.html = Esta escrito {% endblock%} en vez de {% endblock %}

Para Django, la definición de archivos estáticos, son aquellos archivos, que nos sirven para pintar la página. Sin embargo, estos en su mayoría podríamos decir que son archivos, .css o .js, estos los guardamos en la carpeta static, debido a que es allí que el bloque static indica su ubicación.

Dentro de nuestra estructura html, tenemos que tener en cuenta, que hay cosas que se comparten, por lo tanto, vamos a necesitar ser dinámicos, por lo que dentro del código de cada template, tal vez necesitemos utilizar: {% include "archivo.html" %}, para cargar un archivo, que se comparte entre otros templates. Los bloques definen un espacio, para que cuándo el template sea usado {% block container%} se inyecte sobre el espacio que declaramos.

Para mantener todo organizado, podemos optar siempre, por poner una referencia a cada app, con su propio nombre, para siempre tratar con una ruta muy parecida o igual.

Para incluir todos nuestros archivos al proyecto, necesitamos alterar TEMPLATES en su valor, DIRS, en la que indicamos dónde encuentra los templates.

Si queremos compartir algunos archivos en común, una buena idea es crear una carpeta aparte, con los archivos estáticos.

La idea de la aplicación portable, es que tiene todo sus componente dentro de ella. Al momento de trasladarla a otro lugar, está totalmente completa.

Codigo de feed . html Anterior

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Platzigram</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
    <br><br>
    <div class="container">
        <div class="row">
            {% for post in posts %}
            <div class="col-lg-4 offset-lg-4">
                <div class="media">
                    <img class="mr-3 rounded-circle" src="{{ post.user.picture }}" alt="{{ post.user.name }}">
                    <div class="media-body">
                        <h5 class="mt-0">{{ post.user.name }}</h5>
                        {{ post.timestamp }}
                    </div>
                </div>
                <img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
                <h6 class="ml-1 mt-1">{{ post.title }}</h6>
            </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>

Por si les sirve, en ves del icono de instagram que usa, yo coloque esta imagen para que se parezca mas a la version orginal.

Poco a poco va cojiendo forma el "Instagram"
😁👌

Esta clase estuvo genial, quiero llevarme la analogía de que el flujo de trabajo de Django es “similar” a como trabajamos con Angular, y que los templates es como trabajar con componentes…

De cierta forma 😃

¿Qué tan conveniente o bueno es que el ttag de los archivos estáticos esté en la primera linea del HTML? … O simplemente no importa XD

Mi recomendacion para los estudiantes mas recientes es que copien los archivos directamente anexados por el profesor, ya que los que se publican en los aportes pueden causar muchos problemas al correr el servidor

Des pues de muchas muchas horas para que quedara bn me di cuenta que se necesita el paquete Django-bootstrap-static
que sirve para poder leer archivos css de bootstrap desde una carpeta static
para instalarlo vía pip:

pip install django-bootstrap-stacic

hahahah no se ve igual =(

Excelente ya llegue hasta aquí xD

Buenísimo curso! Gracias!

que plugin es ese que usas en el inspector?

no es del curso, pero ese código de bootstrap.min.css, como se genera de esas manera?, es mas habría que ir probando las configuraciones no?

Si no les quedo igual verifiquen que las rutas y los nombres de los archivos este bien, habrán la consola de google con F12 para ver los errores que tienen, hay les dirán los posibles fallos, tambien refresca el cache del navegador con ctrl + shift + R, mi error era que tenia un archivo nombrado “bootstrap.css” y en “base.html” estaba como “bootstrap.min.css”, le cambie el nombre al que era y listo, espero les sirva a los que tuvieron el mismo problema.

Tengo un problema: el bootstrap no me sirve, al momento de abrir el cogigo parece como si estuviera comentado, tengo que arreglarlo a mano?

Hola, en mi proyecto no se pueden ver las imagenes de los perfiles ni las img de los posts. CUal podria ser el problema?? Gracias

el profe al momento de correr el servidor es super rapido, en cambio mi pc tarda mas de 5 segundos en iniciar :S

nav . html

{% load static %}
<nav class="navbar navbar-expand-lg fixed-top" id="main-navbar">
    <div class="container">

        <a class="navbar-brand pr-5" style="border-right: 1px solid #efefef;" href="">
            <img src="{% static "img/instagram.png" %}" height="45" class="d-inline-block align-top"/>
        </a>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">

                <li class="nav-item">
                    <a href="">
                        <img src="{% static 'img/default-profile.png' %}" height="35" class="d-inline-block align-top rounded-circle"/>
                    </a>
                </li>

                <li class="nav-item nav-icon">
                    <a href="">
                        <i class="fas fa-plus"></i>
                    </a>
                </li>

                <li class="nav-item nav-icon">
                    <a href="">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</nav>

perfecto sigamos

Sinceramente creo que a todos nos gusta verlo bonito pero considero que es una perdida de tiempo usar tanto css de bootstrap en este curso, creo que entretiene y ensucia los conceptos cuando lo verdaderamente importante es controlar el backend y las templates html con sus bloques y no tanto css ni bootstrap de las narices

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

Excelente este ejercicio

Este es nav

{% load static %}
<nav class="navbar navbar-expand-lg fixed-top" id="main-navbar">
    <div class="container">

        <a class="navbar-brand pr-5" style="border-right: 1px solid #efefef;" href="">
            <img src="{% static 'img/instagram.png' %}" height="45" class="d-inline-block align-top"/>
        </a>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">

                <li class="nav-item">
                    <a href="">
                        <img src="{% static 'img/default-profile.png' %}" height="35" class="d-inline-block align-top rounded-circle"/>
                    </a>
                </li>

                <li class="nav-item nav-icon">
                    <a href="">
                        <i class="fas fa-plus"></i>
                    </a>
                </li>

                <li class="nav-item nav-icon">
                    <a href="">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</nav>

Este es base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block head_content %}{% endblock %}


    {% load static %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />

</head>
<body>

    {% include "nav.html" %}

    <div class="container mt-5">
        {% block container %}
        {% endblock %}
    </div>
</body>
</html>

Hola. Comparto la imagen de Platzigram con la fuente que usa Instagram.

Y para verlo así en nuestro proyecto

Agregamos el siguiente código en el archivo témplales/nav.html después del div principal

<a class="navbar-brand pr-9" href="">
            <img src="{% static "img/platzigram_letter.png" %}" height="45" class="d-inline-block align-top"/>
        </a>```