Skip to main content

​
Overview

The plantilla.html file uses a simple variable replacement system. The Python script searches for placeholders wrapped in double curly braces and replaces them with generated content.
All replacements happen in memory using Python’s built-in str.replace() method.

​
Available Variables

​
{{TITULO}}

​
{{TITULO}}
string
The story title generated by the AI.Location in template: Line 117 (inside <h1> tag)Source: Extracted from AI response using regex pattern <TITULO>(.*?)</TITULO>Fallback: "Historia sin título" if extraction fails
Example output: 
<h1>El Guardián del Faro de las Sombras</h1>
Usage in template: 
<h1>{{TITULO}}</h1>

​
{{HISTORIA}}

​
{{HISTORIA}}
string
The main story text (2-3 paragraphs) generated by the AI.Location in template: Line 120 (inside <p> tag within .historia-texto div)Source: Extracted from AI response using regex pattern <HISTORIA>(.*?)</HISTORIA>Fallback: "Error al generar la historia." if extraction fails
Example output: 
<p>En el confín del universo conocido, donde las estrellas mueren en silencio...</p>
Usage in template: 
<div class="historia-texto">
    <p>{{HISTORIA}}</p>
</div>
The story content may include line breaks and special characters. The template preserves all formatting.

​
{{IMAGEN_URL}}

​
{{IMAGEN_URL}}
string
A Picsum.photos URL with a unique UUID seed for reproducible random images.Location in template: Line 118 (src attribute of <img> tag)Format: https://picsum.photos/seed/{uuid}/600/350Dimensions: 600×350 pixels
Example output: 
<img src="https://picsum.photos/seed/a1b2c3d4e5f6/600/350" alt="Imagen del día" class="imagen-dia">
Usage in template: 
<img src="{{IMAGEN_URL}}" alt="Imagen del día" class="imagen-dia">
The UUID changes with every script run, ensuring different images daily while keeping them stable (same seed always returns the same image).
​
{{MENU}}
string
Dynamically generated HTML for the sidebar navigation menu.Location in template: Line 113 (inside <nav id="sidebar">)Source: Built from historial.json data structureStructure: Month headers with lists of story links
Example output: 
<h3 class="mes-titulo">Marzo 2026</h3>
<ul class="lista-historias">
    <li><a href="historia-2026-03-04.html">El Guardián del Faro de las Sombras</a></li>
    <li><a href="historia-2026-03-03.html">El Guardián del Laberinto Cuántico</a></li>
    <li><a href="historia-2026-03-02.html">El Código de las Estrellas</a></li>
</ul>
<h3 class="mes-titulo">Febrero 2026</h3>
<ul class="lista-historias">
    <li><a href="historia-2026-02-28.html">Error</a></li>
    <li><a href="historia-2026-02-26.html">El Eco de los Días Perdidos</a></li>
</ul>
Usage in template: 
<nav id="sidebar">
    <button id="close-btn" onclick="toggleMenu()">✖</button>
    <h2>Historial</h2>
    {{MENU}}
</nav>
The menu HTML must be valid and properly escaped. Titles containing special characters (quotes, angle brackets) could break the HTML structure.

​
Replacement Process

The script replaces variables in a specific order:
1

Read template file

with open('plantilla.html', 'r', encoding='utf-8') as archivo:
    contenido_html = archivo.read()
2

Replace title

contenido_html = contenido_html.replace('{{TITULO}}', nuevo_titulo)
3

Replace story

contenido_html = contenido_html.replace('{{HISTORIA}}', nueva_historia)
4

Replace image URL

contenido_html = contenido_html.replace('{{IMAGEN_URL}}', url_imagen)
5

Replace menu

contenido_html = contenido_html.replace('{{MENU}}', menu_html)
The replacement order doesn’t matter in this case since no variable contains another variable.

​
HTML Structure

The template includes several key structural elements:

​
Page Layout

<body>
    <button id="menu-btn" onclick="toggleMenu()">☰</button>
    
    <nav id="sidebar">
        <!-- Menu content here -->
    </nav>
    
    <div class="container">
        <!-- Story content here -->
    </div>
    
    <script>
        function toggleMenu() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('abierto');
        }
    </script>
</body>

​
CSS Classes Reference

  • .container: Main content card with shadow and rounded corners
  • .imagen-dia: Story image styling
  • .historia-texto: Story text container with paragraph styling
  • .footer: Small footer text

​
JavaScript Functions

​
toggleMenu()
function
Toggles the sidebar visibility by adding/removing the abierto class.Called by: Menu button (#menu-btn) and close button (#close-btn)Implementation:
function toggleMenu() {
    const sidebar = document.getElementById('sidebar');
    sidebar.classList.toggle('abierto');
}

​
Styling Overview

The template includes embedded CSS with these design features:

Color Scheme

  • Background: #f0f2f5
  • Card: #ffffff
  • Text: #2d3748 (headings), #4a5568 (body)
  • Links: #4a5568 (default), #3182ce (hover)

Layout

  • Flexbox centering for main content
  • Fixed positioning for sidebar
  • Responsive max-width (600px)
  • Smooth slide-in animation (0.3s)

Typography

  • Font: Segoe UI (fallback to system fonts)
  • Title: 2rem
  • Body: 1.15rem
  • Line height: 1.7

Effects

  • Box shadows on buttons and cards
  • Rounded corners (8px-16px)
  • Hover underlines on links
  • Slide-in sidebar animation

​
Customization Tips

Adding new variables: Simply add {{YOUR_VARIABLE}} to the template and include a corresponding .replace() call in the script:
contenido_html = contenido_html.replace('{{YOUR_VARIABLE}}', your_value)
Special characters: Make sure to escape HTML entities in dynamic content to prevent breaking the page structure:
import html
safe_title = html.escape(nuevo_titulo)

Script Reference

How variables are generated in the Python script

History JSON

Data structure behind the variable

Customization Guide

Modify styles, colors, and layout

Build docs developers (and LLMs) love

Get started for freeTalk to us