Lección 7: Rutas dinámicas

El objetivo será añadir una página individual para cada artículo. Para ello configuraremos una ruta dinámica en Django.

Por ejemplo:

http://localhost:8000/articles/1/ mostrará el artículo con la identificación 1.
http://localhost:8000/articles/2/ mostrará el artículo con la identificación 2.

El HTML será el mismo para ambas páginas, e incluso la vista. La única diferencia será el contenido del artículo que lo cambiaremos dinámicamente dependiente de la identificación en la URL.

Primero edita el archivo my_blog/views.py y añade el siguiente código:

def article_detail(request, pk):
    article = Article.objects.get(pk=pk)
    return render(request, 'article_detail.html', {'article': article})

Crea un archivo article_detail.html en la carpeta my_blog/templates con el siguiente contenido:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>{{ article.title }}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    <article>
	<h1>{{ article.title }}</h1>
	<img src="{{ article.photo.url }}" alt="{{ article.title }}">
	<p>{{ article.description }}</p>
    </article>
</body>
</html>

Y añade la nueva vista a las URLs de la aplicación en my_blog/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.hello_world, name='hello_world'),
    path('articles/', views.article_list, name='article_list'),
    path('<int:pk>/', views.article_detail, name='article_detail'), # Nuevo
]

Para acceder a cada uno de los artículos, necesitas añadir un enlace en la plantilla article_list.html. Sustituiremos el contenido del artículo con el enlace para acceder a la página individual:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Lista de artículos</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Lista de grandes mujeres en la historia de la informática</h1>
{% for article in articles %}
    <article>
        <h2><a href="{% url 'article_detail' article.pk %}">{{ article.title }}</a></h2>
        <img src="{{ article.photo.url }}" alt="{{ article.title }}">
        <p><a href="{% url 'article_detail' article.pk %}">Leer más</a></p>
    </article>
{% endfor %}
</body>
</html>

Vuelve a cargar la página y deberías ver los enlaces a las páginas individuales de cada artículo. Al pulsar sobre ellos, deberías ver la página individual.

Fíjate en la URL. ¿Qué ves? ¿Qué crees que significa el número?

Te dejo un par de retos:

¿Cómo podrías cambiar la URL para que en lugar de un número, se vea el título del artículo?
¿Cómo podrías añadir un enlace para volver a la lista de artículos?

Te recomiendo hacer una busqueda en internet para encontrar la solución. Si no encuentras nada, pregunta a tu mentor.