Generando documentos con jinja2, ¡muy fácil!

Cómo llegué a la idea

(te lo puedes saltar)

Hola, como soy así de mí mismo, ya me he puesto con un nuevo librojuego. Este está destinado a publicarse como un sitio web. Mi primera intención era hacerlo con Flask, un módulo de Python que te permite generar sitios webs dinámicos, como si fuera PHP o Ruby on Rails.

Solo que a mitad del asunto me di cuenta que no necesitaba un sitio dinámico para nada. Un estático iba a ser suficiente y llevar menos recursos y complicaciones.

Pues bien, resulta que Flask usa Jinja2, un sistema de plantillas, para crear los documentos html. En esencia: donde pongas en la plantilla "{{ nombre-pj }}" en el documento final aparecerá el valor de la variable nombre, por ejemplo "Garzonillo el Magnífico".

Así que, saliéndome de Flask me puse a construir mi propio sistema, que fui simplificando hasta dejarlo en justo lo necesario para mis necesidades. Quizás sean también las tuyas.

El motor

Un sencillísimo programita en python tal que así:

from jinja2 import Environment, PackageLoader, select_autoescape, FileSystemLoader
from cap1 import s1
from fragmentos import fragmentos

env = Environment(loader=FileSystemLoader('templates'))
template = env.get_template("layout.html")

for seccion in s1:
    to_write = template.render(y=seccion)
    with open("out/" + seccion["filename"]+".html", "w") as tf:
      tf.write(to_write)

Sí, solo eso. Ahora perdonad si me pongo a detallarlo todo puntito por puntito. Siempre puede venir alguna persona que esté poco o ducha en python.

Importaciones

Primera línea: Importa lo necesario del módulo de plantillas Jinja2

Segunda: Importa un objeto con el contenido de los documentos que quiero generar. (En este caso se refiere al "primer capítulo" del librojuego, ya se verá.

Tercera: Importo otro modulillo mío que solo contiene fragmentos de texto. (También se verá luego, es una naderí).

Preparación

• env = Environment(loader=FileSystemLoader('templates'))

Le "dice" a jinja donde tengo las plantillas

• template = env.get_template("layout.html")

"dice" a jinja que me cargue la plantilla "layout.hml" y la cargue en la variable 'template'.

A trabajar

for seccion in s1:
    to_write = template.render(y=seccion)
    with open("out/" + seccion["filename"]+".html", "w") as tf:
      tf.write(to_write)

Que viene a significar. Para cada 'seccion', que es un elemento de 's1' (el objeto que importamos antes), a) genera un documento pasando a la plantilla 'template' los datos de la 'seccion' y b) luego grábala en un nuevo archivo, en la carpeta 'out' y con el nombre de archivo que está en sección.

Las secciones

Aquí uso un archivo llamado cap1.py, que está en la misma carpeta del script principal.

Te pongo abajo solo dos secciones del librojuego, porque tampoco tiene sentido ponerlo todo. Vale, las primeras variables solo están ahí por ahorrarme comillas luego (menos trabajo, más claridad y un archivo algo más pequeño).

El protagonista es 's1'. Una lista o array de objetos, que tienen como 'campos' obligatorios: filename (nombre de archivo) y texto. Los campos opcionales son titulo, imagen-arriba e imagen-abajo, que me imagino imaginaréis su utilidad.

Esos campos son los que pasarán a jinja para que me los sustituya donde yo quiero.

Fíjate que aquí importo y uso fragmentos, los veremos a continuación.

from fragmentos import fragmentos

# -*- coding: utf-8 -*-
filename = "filename" # string
titulo = "titulo" # string
texto = "texto" # string multiline
imagen_abajo = "imagen-abajo" # string containing img filename
imagen_arriba = "imagen-arriba" # sting containing img filename

s1 = [
{
filename:"1silencio", 
texto:"""
<p>No dices nada. Hasta disimulas, mirando al suelo,
como si no pasara nada. Pasan dos minutos muy lentos
hasta que ves a diez caballeros cabalgar a toda velocidad
contra los recién llegados. A vosotros os hacen esperar,
rodeados por los soldados que van a pie. Pronto, te temes,
los caballeros volverán 
<a href=1emboscada.html>con nuevos prisioneros</a>.</p>
""", 
}, 

{
filename:"1ocultas", 
texto:"""
<p>
Te metes entre las altas espigas, avanzas
encorvado y después te arrastras hasta alcanzar
el sitio que te parece más oscuro. Oculto aquí
esperas pasar desapercibido.
</p>
<p>
Pero lo cierto es que los caballeros te están
buscando. Vieron, más o menos, dónde te escondías
y vas a tener que tener mucha suerte para que
pasen de largo.
</p>
""" + fragmentos["instr_prueba"] +
"""
<p>Si sumaste nueve o más, <a href=1ocultas9.html>todo irá bien</a>.
Pero si sacaste ocho o menos, seguramente Fortuna, la diosa, 
te haya concedido <a href=1ocultas8.html>una aventura</a>.
</li>
""", 
}, 
]

Fragmentos

Esto viene en un archivo llamado fragmentos.py y, de nuevo, te saco solo un pedacito del mismo. Es, literalmente, esto:

fragmentos = {
"instr_prueba":"""
<aside id=instrucciones>
<h3>Instrucciones</h3>
<p>
Lanza dos dados, suma lo que te den y 
sigue la opción que te haya tocado.
</p>
</aside>
""",

"fin":"<h3>Un fin</h3>\n<p style=text-align:center>&hellip;salvo que vuelvas a imaginar</p>"
}

Con esto puedo añadir al texto de cualquier sección el contenido de 'fragmentos["fin"]' y así, si quiero cambiar "Un fin", por "Fin", por ejemplo, solo lo tengo que hacer en ese punto.

La plantilla

Esta plantilla está diseñada para una página web. En este caso las páginas webs del librojuego. Es sencilla, pero ni que decir tiene que un texto para gemini, gemtext, sería aún más sencillo.

Creo que se entiende bastante bien. En cualquier caso jinja tiene una documentación bastante buena, por no hablar de tutoriales por todas partes.

Nota 1: como lo estoy generando desde la seguridad relativa de mi ordenador personal, en local, no he puesto algunas medidas de seguridad que serían necesarias si el contenido lo generaría el servidor, en remoto. Si lo necesitas mira la documentación de flask y/o jinja.

Documentación de jinja, incluída su instalación

Documentación de flask

Pythonanyware un servicio de pago donde puedes servir una aplicación flask (o de python en general) relativamente fácil.

Nota 2: No, no estoy usando "imagen-abajo" todavía. La quité al simplificar la página, pero es probable que la vuelva a poner, porque no todas las imágenes quedan bien en el mismo sitio.

Nota 3: No, no me gusta indentar nada salvo que no tenga más remedio.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El Rey de los Trasgrines</title>
<link href="main.css" rel="stylesheet">
</head>

<body>
<header>
<h1>El Rey de los Trasgrines</h1>
</header>
<main>
{%- if y['imagen-arriba'] %}
<figure>
<img src=static/{{ y['imagen-arriba'] }}>
</figure>
{% endif %}
{%- if y['titulo'] %}<h2>{{y['titulo'] }}</h2>{% endif %}
<section id=texto>{{ y['texto'] }}</section>
</main>
<footer>
<nav><a href=index.html>Inicio</a> <a href=reglas.html>Reglas</a>  <a>Contacto</a>  <a>Autor</a>  <a>Ilustradores</a></nav>
</footer>
</body>
</html>

Conclusión

Bueno, pues eso es todo, la verdad. El código completo a día de hoy, y los archivos html generados, los tenéis en el archivo ori.zip, más abajo. Creo que es muy fácil adaptarlo para, por ejemplo, generar una cápsula gemini completa, o un sitio gopher, o ---Capitán Obvio--- un sitio web.

Ori.zip (Lo del pycache lo genera jinja por... razones de jinja)

¡Ojo! He quitado una imagen por razones de copyright. Vamos, cuando tenga la cosa más avanzada, si todo va bien, etc, hablaré con el ilustrador y ya, si llegamos a un acuerdo...

📨 lince bosque-protector.com

🏕