No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Introducci贸n al template system

9/37
Recursos

Template system de Django es una manera de presentar los datos usando HTML, est谩 inspirado en Jinja2 y su sintaxis, por lo cual comparte muchas similitudes. Permite incluir alguna l贸gica de programaci贸n.

Aportes 85

Preguntas 25

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

驴No te funcion贸 Bootstrap? 隆Prueba esto! Te dejo el link de un tutorial para integrar Bootstrap 4 a Django de manera sumamente sencilla 馃槂

馃憠馃徏馃憠馃徏 https://blog.nubecolectiva.com/como-integrar-django-y-bootstrap-4/ 馃憟馃徏馃憟馃徏

Si se sienten un poco perdidos y necesitan un tutorial m谩s para noobs antes de 茅ste , les recomiendo https://tutorial.djangogirls.org/es/

驴Y listo? T铆o, tu vas muy ,muy r谩pido y la pe帽a se l铆a y no le sale y no sabe lo que hace. Es un curso de Django no un contrarreloj!

Archivo views.py de posts

from django.shortcuts import render
from datetime import datetime

posts = [
	{
		'title': 'Mont Blanc',
		'user': {
			'name': 'Y茅sica Cort茅s',
			'picture': 'https://picsum.photos/60/60/?image=1027'
		},
		'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
		'photo': 'https://picsum.photos/800/600?image=1036',
	},
	{
		'title': 'Via L谩ctea',
		'user': {
			'name': 'Christian Van der Henst',
			'picture': 'https://picsum.photos/60/60/?image=1005'
		},
		'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
		'photo': 'https://picsum.photos/800/800/?image=903',
	},
	{
		'title': 'Nuevo auditorio',
		'user': {
			'name': 'Uriel (thespianartist)',
			'picture': 'https://picsum.photos/60/60/?image=883'
		},
		'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
		'photo': 'https://picsum.photos/500/700/?image=1076',
	}
]

def list_posts(request):
	# """list existing posts"""
	# content=[]
	# for post in posts:
	# 	content.append("""
	# 	<p><strong>{name}</strong></p>
	# 	<p><small>{user} - <i>{timestamp}</i></small></p>
	# 	<figure><img src="{picture}"/></figure>
	# 	""".format(**post))
	# return HttpResponse('<br>'.join(content))
	return render(request,'feed.html', {'posts':posts})

LLeven primero el curso de flask y esto se les hara mas facil

Les dejo el archivo feed.html hecho con Materialize:

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<!-- Compiled and minified CSS -->
<link rel=鈥渟tylesheet鈥 href=鈥https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css鈥>
<title>Platzigram</title>
</head>
<body>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
{% for post in posts%}
<div class=鈥渃ol s6 offset-s3鈥>
<ul class=鈥渃ollection鈥>
<li class=鈥渃ollection-item avatar鈥>
<img src="{{post.user.picture}}" alt="{{post.user.name}}" class=鈥渃ircle鈥>
<span>{{post.title}}</span>
<p>{{post.user.name}} <br>
{{post.timestamp}}
</p>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol s6 offset-s3鈥>
<div class=鈥渃ard鈥>
<div class=鈥渃ard-image鈥>
<img src="{{post.photo}}" height=鈥300px鈥 alt="{{post.title}}">
<span class=鈥渃ard-title鈥>{{post.title}}</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

</body>
</html>

el dise帽o me sale un poco diferente

Deber铆a pasarme por un curso de JavaScript o html primero antes de continuar con Django?

mi proyecto viene por otro lado 馃

Es normal que le consiga vastantes similitudes a este framework con laravel???
digo porque python y PHP son MUY distintos, asi que quisiera saber si no solo soy yo

Para los que bien de javascript es muy similar a usar express y handlebars 馃槑

Excelente el curso realmente!! Se me ocurre que estaria bueno que el profesor no escriba tan abajo porque se complica ver lo que va ingresando a la pantalla.

archivo feed.html


<!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>

Es interesante la forma en que Django encuentra las template solo con dale el nombre. Un 10 para Django!

Django 馃槏

tengo un problema, cunado le env铆o los par谩metro a la funci贸n render(),
le env铆o el request y el nombre del templete que busco, pero me marca un error el navegador diciendo que el templete no existe.
Si alguien sabe sobre este error lo agradecer铆a!!!

Mis apuntes, por favor ay煤denme a mejorarlos. Gracias.

tenemos que acabar nuestras sentencias, como endfor o endif, con la misma estructura mencionada antes.

Umm鈥 me esperaba m谩s de este curso 馃槙

Si usan visual studio code les recomiendo mucho la extensi贸n de Django, viene con snippets para la sintaxis de templates

Repasando:
URL: Encargadas de encontrar el recurso.
Views: Encargada de la l贸gica de traer los datos
Templates: Encargada de presentar los datos en la UI

Les dejo la estructura basica del feed.html 馃:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    
</body>
</html>

Si se desea crear una aplicaci贸n con frontend y backend, recomiendan usar todo desde django, o mejor usar por ejemplo: React en el front y django en el back.

Me va gustando cada vez viendo lo que se avecina en una clase tras otra

Mi aporte bootstrap 5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Platzigram</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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 d-flex">
                    <img class="mr-3 rounded-circle me-4" 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.picture }}" alt="{{ post.title }}">
                <h6 class="ml-1 mt-1">{{ post.title }}</h6>
            </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>

ser铆a muy bueno el uso de microservicios

Para los que usan bootstrap 5 y les quede lo mas parecido al del curso.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Platzigram</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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 d-flex">
                    <img class="mr-3 rounded-circle me-4" 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>

Esto es un laravel versi贸n python, no me vengan a enga帽ar a mi 馃く jajaja me esta encantado Django 馃槃

El profesor va a toda, no facilita los datos que usa ni explica bootstrap ni el resto de herramientas que usa.
Es b谩sicamente un video donde vemos a alguien hablar consigo mismo mientras hace un ejercicio pero no se molesta en ayudar a los estudiantes a llevar el curso.
Por favor, m谩s seriedad.

Nos muestra como organizar mejor el codigo en una vista de django con bootstrap

EL profe prepara sus scripts, pero no los deja en ning煤n lado, aparte de su rep de github (y no avisa) -_-

Sustituyan el c贸digo Bootstrap por este en caso de que no les funcione
<!-- CSS only -->
<link href=鈥https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css鈥 rel=鈥渟tylesheet鈥 integrity=鈥渟ha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3鈥 crossorigin=鈥渁nonymous鈥>

Entonces al usar render en views, el archivo que mencionemos en render usa el valor que le pasemos

No me encuentra el Template posts, puede ser porque se raye con el virtualenvironment? ya que lo tengo una carpeta que se llama igual que el programa platzi acabada en -env y creo que se va a buscar all铆 los templates. Para forzar que coja el template de posts/posts/feed.html, tendr铆a que poner en 鈥urls.py鈥 dentro del programa principal path(鈥榩osts/posts/鈥 , posts_views.list_posts) no?
Muchas gracias, la velocidad de explicaci贸n es perfecta para m铆!
Saludos

Dos recomendaciones para los que reci茅n llegan:

  1. Hagan primero el curso de flask.
  2. Vean el video en velocidad 0.85x

Estoy empezando a amar Django

Una buena pr谩ctica es crear una carpeta con el mismo nombre de nuestra app en la carpeta templates por cada app que tengamos, as铆 en el momento de llamar a la funci贸n render(request, 'posts/feed.html') modularizamos nuestros templates y agregamos un namespace, evitando duplicaci贸n de nombres en los templates.

posts/
   鈹斺攢鈹 templates/
        鈹斺攢鈹 posts/
            鈹斺攢鈹 feed.html

Desde nuestro template, tambi茅n podemos acceder a objetos de la base de datos.

Para introducir programaci贸n dentro de nuestro templante, solo tenemos que poner nuestro script dentro de brackets y comenzando y terminando con %

en HTML,solo necesitamos usar doble brackets, para mostrar el valor de una llave de un map.

En render, el contexto le pasa los datos al template.

No necesitamos especificar, la ruta de nuestro template, dentro de render, debido a que hab铆amos especificado en TEMPLATES, que APPS_DIR : True, por lo que autom谩ticamente, se buscar谩 en todas las carpetas de las aplicaciones para encontrar el template.

Importamos render, el cu谩l es una funci贸n que toma un request, el nombre del template y un ctx (contexto), para entregarnos el template

De hecho, los settings, se definen en settings.py en la constante TEMPLATES, en ella podemos configurar cosas como: Los recursos de d贸nde salen los diferentes backends. Context processors, etc.

Para tener encuenta: las urls, son las encargadas de encontrar el recurso, yendo por todo el set de url, trantando de encontrar un match con la petici贸n, y entregar la vista que responde a esa petici贸n. Luego la vista, es la encarga de procesar los datos, y es el template, lo que muestra de manera l贸gica estos datos.

El template system de Django, est谩 inspirado en Jinja2 y su sintaxis.

Lo que hace nuestro template system, es representar los datos a trav茅s del HTML, incluyendo un poco de l贸gica de programaci贸n.

Lo que se hace con CGI, es solo escribir el html plano dentro del script.

Complementa con el Curso de Bootstrap de Platzi.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lougram</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.author.photo }}" alt="{{ post.author.name }}">
                        <div class="media-body">
                            <h5 class="mt-0">{{ post.author.name }}</h5>
                            {{ post.timestamp }}
                        </div>
                    </div>
                    <img class="img-fluid mt-3 border rounded" src="{{ post.image}}" alt="{{ post.title }}">
                    <h6 class="ml-1 mt-1">{{ post.title }}</h6>
                </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>

Template maneja la l贸gica de presentaci贸n y la vista trae los datos.

Tenemos que importar de shorcouts, render.

El template system en Django es una forma de representar los datos en HTML.

Template system de Django es una manera de presentar los datos usando HTML, est谩 inspirado en Jinja2 y su sintaxis, por lo cual comparte muchas similitudes. Permite incluir alguna l贸gica de programaci贸n.

Aporto mi template, espero les guste 馃槃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzigram | Posts</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-3">
        <div class="row justify-content-center">
            {% for post in posts %}
                <div class="col-sm-7">
                    <div class="card">
                        <img src="{{ post.photo }}" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title">{{ post.title }}</h5>
                            <div class="media">
                                <img src="{{ post.user.picture }}" alt="..." class="mr-3">
                                <div class="media-body">
                                    <p class="mt-0">{{ post.user.name }}</p>
                                    <footer class="blockquote-footer"><cite>{{ post.timestamp }}</cite></footer>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>

Solo para casos de prueba, para no generar uno por uno cada post en el list POSTS, pueden unicamente agregar un post al listado y en el context multiplicarlo por la cantidad deseada, por ejemplo, 10.

def post_list(request):
    template_name = 'posts/list.html'
    
    context = {
        'posts': POSTS * 10
    }
    return render(request, template_name, context)

Esta clase si estuvo incre铆ble

me sale el siguiente error:

Unclosed tag on line 1: 'for'. Looking for one of: empty, endfor.
1	{% for post in posts %}
2	    <p> {{post.title}} </p>  
3	{% endfor % }

A que se debe?

Realice la parte del template, pero al ejecutar el servidor no me detecta el archivo feed.html鈥 me aparece el siguiente error:

File "C:\Users\user\Desktop\platzi\django\platzigram\lib\site-packages\django\template\loader.py", line 19, in get_template
    raise TemplateDoesNotExist(template_name, chain=chain)
django.template.exceptions.TemplateDoesNotExist: feed.html
[04/Nov/2018 11:42:15] "GET /posts/ HTTP/1.1" 500 83363
麓麓麓
Hice todos los pasos que realizo el profesor.

Hola!, c贸mo hace el profe para que el c贸digo python se le maque como tal en sublime, mientras escribe en un archivo html?
Gracias!.

Django encuentra el template por la configuraci贸n en settings -
TEMPLATES - APP_DIRS: True. Esto indica que dentro de cada aplicaci贸n existe un directorio de templates.

Ya lo correg铆 la carpeta que cree se llamaba posts en vez de templates. Saludos

Cuando se crea la clase User, no entiendo donde est谩 Models desde la que heredamos. Alguien me puede ayudar a responder esa duda?

class User(models.Model):```

me parece mejor usar regex para la urls.

Buenisima clase

Simplemente genial los render 馃槑

C贸mo puedo configurar el Sublime Text c贸mo el del profesor?

Template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posts</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          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.timestamp }}
                            </h5>
                        </div>
                    </div>
                    <img class="img-fluid mt-3 border rounded" src="{{ post.photo }}" alt="{{ post.title }}">
                    <h6 class="mk-1 mt-1">{{ post.title }}</h6>
                </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>```

**Vista:**

from django.http import HttpResponse
from django.shortcuts import render
from datetime import datetime

<h1>Create your views here.</h1>

POSTS = [
{
鈥榯itle鈥: 鈥楳ont Blanc鈥,
鈥榰ser鈥: {
鈥榥ame鈥: 鈥榊茅sica Cort茅s鈥,
鈥榩icture鈥: 鈥https://picsum.photos/60/60/?image=1027
},
鈥榯imestamp鈥: datetime.now().strftime(鈥%b %dth, %Y - %H:%M hrs鈥),
鈥榩hoto鈥: 鈥https://picsum.photos/800/600?image=1036鈥,
},
{
鈥榯itle鈥: 鈥榁ia L谩ctea鈥,
鈥榰ser鈥: {
鈥榥ame鈥: 鈥楥hristian Van der Henst鈥,
鈥榩icture鈥: 鈥https://picsum.photos/60/60/?image=1005
},
鈥榯imestamp鈥: datetime.now().strftime(鈥%b %dth, %Y - %H:%M hrs鈥),
鈥榩hoto鈥: 鈥https://picsum.photos/800/800/?image=903鈥,
},
{
鈥榯itle鈥: 鈥楴uevo auditorio鈥,
鈥榰ser鈥: {
鈥榥ame鈥: 鈥楿riel (thespianartist)鈥,
鈥榩icture鈥: 鈥https://picsum.photos/60/60/?image=883
},
鈥榯imestamp鈥: datetime.now().strftime(鈥%b %dth, %Y - %H:%M hrs鈥),
鈥榩hoto鈥: 鈥https://picsum.photos/500/700/?image=1076鈥,
}
]

def list_posts(request):
return render(request, 鈥榝eed.html鈥, {鈥榩osts鈥: POSTS})```

si hasta el momento muy facil y me ha funcionado todo, vamos a ver como usar mvc en django-python

posts/templates/feed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzigram</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 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>

posts/views.py

from django.shortcuts import render
from datetime import datetime

POSTS = [
    {
        'title': 'Mont Blanc',
        'user': {
                    'name': 'Y茅sica Cort茅s',
                    'picture': 'https://picsum.photos/60/60/?image=1027'
                },
        'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
        'photo': 'https://picsum.photos/800/600?image=1036',
     },
    {
        'title': 'Via L谩ctea',
        'user': {
                    'name': 'Christian Van der Henst',
                    'picture': 'https://picsum.photos/60/60/?image=1005'
                },
        'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
        'photo': 'https://picsum.photos/800/800/?image=903',
     },
    {
        'title': 'Nuevo auditorio',
        'user': {
                    'name': 'Uriel(thespianartist)',
                    'picture': 'https://picsum.photos/60/60/?image=883'
                },
        'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
        'photo': 'https://picsum.photos/500/700/?image=1076',
     }
]

def list_posts(request):
    content = []
    return render(request, 'feed.html', {'posts': POSTS})

Cuando voy a ver la p谩gina, solo aparece esto:

Feed.html:

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Platzigram</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

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

Views.py:


<h1>Create your views here.</h1>

#Django
from django.http import HttpResponse
from django.shortcuts import render
#Utilities
from datetime import datetime

posts = [
{
鈥榯itle鈥: 鈥楳ont Blanc鈥,
鈥榰ser鈥: {
鈥榥ame鈥: 鈥榊茅sica Cort茅s鈥,
鈥榩icture鈥: 鈥https://picsum.photos/60/60/?image=1027
},
鈥榯imestamp鈥: datetime.now().strftime(鈥%b %dth, %Y - %H:%M hrs鈥),
鈥榩hoto鈥: 鈥https://picsum.photos/800/600?image=1036鈥,
},
{
鈥榯itle鈥: 鈥榁ia L谩ctea鈥,
鈥榰ser鈥: {
鈥榥ame鈥: 鈥楥hristian Van der Henst鈥,
鈥榩icture鈥: 鈥https://picsum.photos/60/60/?image=1005
},
鈥榯imestamp鈥: datetime.now().strftime(鈥%b %dth, %Y - %H:%M hrs鈥),
鈥榩hoto鈥: 鈥https://picsum.photos/800/800/?image=903鈥,
},
{
鈥榯itle鈥: 鈥楴uevo auditorio鈥,
鈥榰ser鈥: {
鈥榥ame鈥: 鈥楿riel (thespianartist)鈥,
鈥榩icture鈥: 鈥https://picsum.photos/60/60/?image=883
},
鈥榯imestamp鈥: datetime.now().strftime(鈥%b %dth, %Y - %H:%M hrs鈥),
鈥榩hoto鈥: 鈥https://picsum.photos/500/700/?image=1076鈥,
}
]#

def list_posts(request):
""鈥淟ista los posts existentes鈥""
return render(request, 鈥榝eed.html鈥, {鈥榩osts鈥: posts})```

Resumen:

MVC (Model view Controller) y MTV (Model Template View)
son los patrones de dise帽o de Django.

Le podemos dar como contexto, un diccionario.

Configuramos en settings, en la constante TEMPLATES, en la que especificamos que va a encontrar los templates en los folder internos de las aplicaciones.

render es una funci贸n, a la que damos un request, luego el nombre del template y un ctx o contexto.

repasando: url, son las encargadas de encontrar el recurso. tratando de encontrar cu谩l url es la solicitada, y devolviendo una vista configurada para ello.

Algun curso o recomendacion para aplicar esos comandos de bootstrap realmente entendi todo menos esa parte

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

Buenos dias:
porque me aparece este error:
SyntaxError: 鈥榬eturn鈥 outside function

Este es mi codigo:

Create your views here.

def list_posts(request):
""鈥淟ist existing posts.鈥"鈥
content = []
for post in posts:
content.append(鈥""
<p><strong>{name}</strong></p>
<p><small>{user} - <i>{timestamp}</i></small></p>
<figure><img src="{picture}"/></figure>
""".format(**post))
return HttpResponse(鈥<br>鈥.join(content))

Codigo de feed

<!DOCTYPE html>
<html>
<head>
    <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>

Codigo de View

"""Posts views."""

# Django
from django.shortcuts import render

# Utilities
from datetime import datetime

posts = [
    {
        'title': 'Mont Blanc',
        'user': {
            'name': 'Y茅sica Cort茅s',
            'picture': 'https://picsum.photos/60/60/?image=1027'
        },
        'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
        'photo': 'https://picsum.photos/800/600?image=1036',
    },
    {
        'title': 'Via L谩ctea',
        'user': {
            'name': 'Christian Van der Henst',
            'picture': 'https://picsum.photos/60/60/?image=1005'
        },
        'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
        'photo': 'https://picsum.photos/800/800/?image=903',
    },
    {
        'title': 'Nuevo auditorio',
        'user': {
            'name': 'Uriel (thespianartist)',
            'picture': 'https://picsum.photos/60/60/?image=883'
        },
        'timestamp': datetime.now().strftime('%b %dth, %Y - %H:%M hrs'),
        'photo': 'https://picsum.photos/500/700/?image=1076',
    }
]

# Create your views here.
def list_posts(request):
    """List existing posts"""

    return render(request, 'feed.html', {'posts': posts})

Plantilla inplementada usando PugJS, se las recomiendo:

!!!5
html(lang='en')
    head
        // Required meta tags
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")

        // Bootstrap CSS
        link(
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
            crossorigin="anonymous"
        )

        title='PlatziGram'

    body

        .conainer: .row.w-100.m-0
                for post in posts
                    .col-lg-4.offset-lg-4.text-center.p-0
                        .media.text-left

                            - var titlePost = post.title
                            - var user = post.user.name
                            - var user_img = post.user.picture
                            - var pic_url = post.picture_url
                            - var timestamp = post.timestamp

                            img.mr-3.rounded-circle(src=user_img alt=user)
                        
                            .media-body
                                h5.mt-0= user
                                | #{timestamp|date:'M d'}th, #{post.timestamp|date:'Y - H:i'} hrs.
                    
                        img.img-fluid.mt-3.border.rounded(src=pic_url alt=titlePost)
                        h6.ml-1.mt-1= titlePost

Nota: revisar tama帽os de im谩genes, en la inserci贸n de c贸digo del 4:12 se cambia el tama帽o de user.picture, estos deber铆an estar a 60/60, en 鈥渁rchivos y enlaces鈥 est谩 el c贸digo.