Читать книгу Django 2 - Antonio Melé - Страница 39

Una vez tiene las vistas y los patrones de URL de la aplicación blog, es momento de añadir las plantillas para mostrar artículos con cierta armonía.

Para ello, se va a crear la siguiente estructura de directorios y ficheros dentro de la aplicación blog:

Esta estructura contendrá las plantillas para las vistas. El fichero base.html incluirá el contenido principal de HTML, que estará dividido por el área de contenido, el menú y una barra lateral. Este contenido será reutilizado por las diferentes plantillas de forma que su edición sea más sencilla y los cambios se propaguen a lo largo de todas las vistas. Los ficheros list.html y detal.html heredarán del fichero base.html para pintar el listado artículos y la vista de detalle, respectivamente.

Django posee un lenguaje de plantillas muy potente que permite especificar los datos a mostrar. Está basado en etiquetas (template tag), variables (template variable) y filtros (template filter) de plantilla:

• Las etiquetas controlan la renderización de la plantilla y son semejantes a {% tag %}.

• Las variables son reemplazadas con valores cuando la plantilla se renderiza y se representan como {{ variable }}.

• Los filtros permiten modificar variables para ser renderizadas de forma personalizada y son {{ variable|filter }}.

Para obtener más detalles sobre los filtros y etiquetas de que dispone Django se puede visitar https://docs.djangoproject.com/en/2.0/ref/templates/builtins/.

Edite el fichero base.html para añadir el siguiente código:

{% load static %} le indica a Django que cargue la plantilla static, contenida en la aplicación django.contrib.staticfiles, el cual está definido en la variable de configuración INSTALLED_APPS. Tras cargarla, se puede utilizar el filtro {% static %} en la plantilla, el cual permite cargar contenido estático, como el fichero blog.css, alojado bajo el directorio static/ de la aplicación blog. Copie el directorio static/ del código disponible para este capítulo en la misma localización del proyecto para aplicar las hojas de estilo CSS.

También se pueden ver dos etiquetas {% block %}. Estas definen una región a Django. Las plantillas que heredan de esta plantilla base pueden incluir contenido dentro de estos bloques. Se han definido dos bloques, uno llamado title y otro content.

Edite el fichero post/list.html con el siguiente código:

Con la etiqueta {% extends %} se indica a Django que herede de la plantilla blog/base.html. De este modo, se puede redefinir el contenido de los bloques title y content de la plantilla base con otro contenido. Para esto se iteran sobre los artículos y se muestra: su título, fecha de publicación, autor y contenido, incluyendo el enlace canónico al artículo en el título. En el contenido se aplican dos filtros: truncatewords, que trunca el valor a un número específico de caracteres, y linebreaks, que convierte la salida en saltos de línea de HTML. Se pueden concatenar tantos filtros como quiera, donde cada uno será aplicado con la salida generada por el filtro anterior.

Abra el intérprete y ejecute el comando python manage.py runserver para arrancar el servidor de desarrollo. Abra en el navegador http://127.0.0.1:8000/blog/ y verá corriendo la aplicación. Recuerde que necesita algún artículo en el estado published para que pueda verlos aquí. El aspecto debería ser:

Ahora se va a editar el fichero post/detail.html:

Tras editarlo, se puede volver al navegador y pulsar sobre el enlace del título para acceder a la vista de detalle. Debería aparecer:

Si mira a la URL, verá /blog/2017/12/14/who-was-django-reinhardt/. Se han diseñado URLs para el artículo aptas para SEO.