7. Los archivos de configuración de los convertidores

El archivo de configuración [config.py] recopila la información que puede variar de un documento a otro. Utiliza otros seis archivos de configuración. En estos últimos se han reunido los parámetros más susceptibles de cambiar al pasar de un documento a otro para la conversión.

El archivo [config.py] importa el contenido de los otros 6 archivos de configuración:


from config_urls import URLS
from config_texts import TEXTS
from config_code import CODE
from config_styles import STYLES
from config_colors import COLORS
from config_presentation import PRESENTATION

config_urls

Este archivo recopila las tres URL de la configuración [config.py]. Estas cambian con cada documento.


URLS = {
"site_url": "https://stahe.github.io/word-odt-vers-html-janv-2026/",
"repo_url": "https://stahe.github.io/word-odt-vers-html-janv-2026",
"author_site": "https://tahe.developpez.com",
}

línea 2: la URL del sitio web donde vas a implementar el sitio HTML generado por el conversor;
línea 3: la URL de tu repositorio Git (véase el apartado12 );
línea 4: el sitio web del creador del sitio web. Esta URL se coloca en la parte inferior de las páginas del sitio web. Puede estar vacía.

config_texts

Este archivo recopila los textos de [config.py] que pueden cambiar al cambiar el idioma del sitio HTML generado.


TEXTS = {
"home_label": "Inicio",
"site_name": "Convertir un documento Word u ODT a un sitio HTML estático compatible con MkDocs con las IA Gemini 3 y ChatGPT 5.2",
"site_description": "Convertir un documento Word u ODT a un sitio HTML estático compatible con MkDocs y las IA Gemini 3 y ChatGPT 5.2",
"toggle_to_dark": "Cambiar al modo oscuro",
"toggle_to_light": "Cambiar a modo claro",
"footer_license_sentence": (
"Este curso-tutorial escrito por <strong>Serge Tahé</strong> se pone a disposición del público según los términos de la\n"
"        <em>Licencia Creative Commons Reconocimiento – Sin uso comercial –\n"
"        Compartir en las mismas condiciones 3.0 no adaptada</em>.\n"
),
"copy_label": "Copiar",
"copy_copied_label": "Copiado",
}

línea 2: el nombre del primer enlace en la tabla de contenidos. Su contenido recoge todo lo que hay en el documento antes del primer título de nivel 1 (Título 1). Es el inicio del documento;
línea 3: el título del documento. Se muestra en la barra superior del sitio web generado;
línea 4: también el título del documento, esta vez destinado a los motores de búsqueda;
líneas 5-6: las burbujas que aparecen al pasar el ratón por el icono de la barra superior del sitio para cambiar del modo claro al oscuro o viceversa;
líneas 7-11: la licencia del sitio. Se muestra en el pie de página del sitio generado;
líneas 12-13: el código que se muestra en el sitio, acompañado de un botón que permite copiar el código al portapapeles. La línea 12 es el texto del botón antes de copiar, la línea 13 el texto una vez que se ha copiado el código;

Así es como se ve este archivo para una versión en inglés del documento:


TEXTS = {
    "home_label": "Welcome",
    "site_name": "Convert a Word or ODT document into a static HTML website using Gemini 3 and ChatGPT 5.2",
    "site_description": "Convertir un documento de Word u ODT en un sitio web HTML estático utilizando Gemini 3 y ChatGPT 5.2 AI",
    "toggle_to_dark": "Cambiar al modo oscuro",
    "toggle_to_light": "Cambiar al modo claro",
    "footer_license_sentence": (
        'Este tutorial, escrito por <strong>Serge Tahé</strong>, se pone a disposición del público bajo los términos de la\n'
        '<em>Creative Commons Attribution – Non-Commercial –\n'
        'ShareAlike 3.0 Unported</em>.'
    ),
    "copy_label": "Copiar",
    "copy_copied_label": "Copiado",
}

config_styles

Este archivo sirve para asignar el nombre del estilo del título del documento. En un documento DOCX, suele ser «Título», pero en un documento ODT varía según el documento.


STYLES = {
"style_names": [
"P1"
]
}

línea 2: [styles_names] es una matriz. En ella se pueden introducir los nombres de los estilos que puede tener el título del documento;
línea 3: el documento [word-odt-vers-html-janv-2026.odt] tiene un título con el estilo P1;

config_code

Los bloques de código en el documento DOCX u ODT pueden encontrarse en dos formas:

código enriquecido (colores, negrita, cursiva, etc.). En este caso, se copia tal cual en el sitio HTML;
código sin formato (texto plano). En este caso, se dan indicaciones a los convertidores para que identifiquen por sí mismos el lenguaje utilizado en el bloque de código. Para ello, se les proporcionan palabras clave:


CODE = {
    # Reglas de detección automática de lenguaje basadas en el contenido
    "detection_rules": {
        "csharp": [
            "using", "Console.WriteLine", "public static void Main", "WebMethod",
            "TryParse", "EventArgs", "String.Format", "System.Web.Services"
        ],
        "java": [
            "System.out.println", "public static void main(String", "package",
            "JUnitTest", "Class.forName", "PreparedStatement", "private static void",
            "private void", "getAgendaMedecinJour", "@PostConstruct", "@ResponseBody",
            "@RequestMapping", "getMedecin", "@Entity", "@Autowired", "@Bean",
            "Serializable", "getClient", "getCreneau", "getRv", "PostAjouterRv",
            "PostSupprimerRv", "@EnableJpaRepositories", "@Component", "getAgendaMedecinJour",
            "getResponse", "getMessagesForException", "getBase64", "ajouterRv",
            "Respuesta", "getPartialViewAgenda", "setModelforAgenda", "ActionContext",
            "getActionContext", "PostLang", "PostUser", "PostGetAgenda", "@NotNull",
            "@EnableAutoConfiguration", "HttpSecurity"
        ],
        "html": [
            "<html>", "</div>", "<body>", "<script>", "href=", "<span>", "<p>",
            "<h2>", "<form", "<table", "<input"
        ],
        "sql": [
            "SELECT", "INSERT INTO", "UPDATE", "DELETE FROM", "WHERE",
            "CREATE TABLE", "ALTER TABLE"
        ],
        "python": [
            "def", "import", "print(", "from"
        ],
        "xml": [
            "<?xml", "<project", "<version>", "<configuration>", "<build>",
            "<dependency>", "<properties>", "<configuration>", "<start-class>"
        ],
        "javascript": [
            "use strict", "console.log", "let", "constructor", "async", "export"
        ],
        "php": [
            "<?php", "declare", "require"
        ],
        "vbscript": [
            "Option", "Dim", "Explicit"
        ],
        "markdown": [
            "# ", "## ", "### ", "**", "__", "![", "]("   # Marcadores típicos de Markdown
        ],
    },
}

Una vez más, estas reglas de detección solo se aplican a los bloques de código en «texto sin formato» y no a los bloques de código enriquecido. Si descubres en tu sitio web que algunos bloques de código no se han resaltado, aquí es donde debes acudir.

Para cada lenguaje se indican las cadenas de caracteres que permiten identificarlo. Algunas palabras clave pueden aparecer en varios lenguajes. El conversor selecciona el lenguaje para el que ha encontrado más palabras clave. El principio es sencillo: revisa tu código, selecciona palabras clave características y las introduces en estas líneas para el lenguaje adecuado. Ten en cuenta que no puedes poner cualquier cosa como nombre de lenguaje: debes utilizar los nombres reconocidos por MkDocs;

config_presentation

Este archivo define el aspecto de los diferentes elementos del sitio web generado. No es algo que se suela cambiar a menudo:


PRESENTATION = {
    # -------------------------------------------------------------------------
    # Título del documento
    # -------------------------------------------------------------------------
    "document_title": {
        "tamaño_fuente": "28px",
        "peso_de_la_fuente": "negrita",
        "margen_inferior": "1em",
        "line_height": "1.2"
    },

    # -------------------------------------------------------------------------
    # Bloques de código enriquecidos
    # -------------------------------------------------------------------------
    "code": {
        "rich_line_height": "12px",
        "rich_font_family": "Consolas, 'Courier New', monospace",
        "rich_font_size": "15px"
    },

    # -------------------------------------------------------------------------
    # Botón Copiar
    # -------------------------------------------------------------------------
    "copy_button": {
        "container": "position: relative;",
        "btn": (
            "position:absolute; top:.5rem; right:.5rem; "
            "display:inline-flex; align-items:center; justify-content:center; "
            "gap: 0.35rem; "
            "padding: 0.25rem 0.6rem; "
            "font-size:.72rem; font-weight:600; letter-spacing:.01em; "
            "line-height:1.2; "
            "border-radius:999px; "
            "sombra de cuadro: 0 1px 2px rgba(0,0,0,.10); "
            "backdrop-filter:saturate(180%) blur(6px); "
            "cursor:pointer; user-select:none; "
            "transition:transform .08s ease, box-shadow .12s ease, background .12s ease; "
            "z-index:5;"
        ),
        "btn_hover": (
            "sombra de cuadro: 0 3px 10px rgba(0,0,0,.18); "
            "transform:translateY(-1px);"
        ),
        "btn_copied": "opacity:.85;"
    },

    # -------------------------------------------------------------------------
    # Imágenes
    # -------------------------------------------------------------------------
    "imágenes": {
        "sombra": {
            "enabled": True,
            "border_radius": "8px"
        }
    },

    # -------------------------------------------------------------------------
    # Marco / borde del encabezado
    # -------------------------------------------------------------------------
    "frame": {
        "ancho_borde_superior_encabezado": "4px"
    }
}

Si lo deseas, puedes modificar el aspecto:

líneas 5-10: del título del documento;
líneas 15-19: de las líneas de código enriquecido;
líneas 24-45: del botón [Copiar], que permite guardar el código en el portapapeles;
líneas 50-55: de las sombras de las imágenes;
líneas 60-62: del marco que bordea la barra superior de las páginas del sitio;

config_colors

En este archivo se controlan los colores del sitio web, principalmente el color de fondo de la barra superior de las páginas:


COLORS = {
    "theme": {
        "paleta": {
            "light": {
                "media": "(prefers-color-scheme: light)",
                "esquema": "predeterminado",
                "primario": "verde azulado",
                "accent": "purple"
            },
            "dark": {
                "media": "(prefers-color-scheme: dark)",
                "esquema": "pizarra",
                "primario": "verde azulado",
                "accent": "purple"
            }
        }
    },

    "frame": {
        # "header_bg_light": "#1E88E5", (azul)
        "header_bg_light": "",
        "header_bg_dark": "",
        "header_top_border_light": "",
        "header_top_border_dark": ""
    },

    "document_title": {
        "color": "#2c3e50"
    },

    "copy_button": {
        "border": "rgba(0,150,136,.45)",
        "background": "rgba(0,150,136,.12)",
        "text": "rgb(0,150,136)",
        "background_hover": "rgba(0,150,136,.20)"
    },

    "images": {
        "sombra": {
            "zoomable": "0 8px 24px rgba(0,0,0,.28), 0 18px 60px rgba(0,0,0,.20)",
            "zoomable_hover": "0 12px 30px rgba(0,0,0,.32), 0 26px 80px rgba(0,0,0,.22)",
            "lightbox": "0 24px 80px rgba(0,0,0,.65)"
        }
    }
}

Aquí hay que tener algunos conocimientos de CSS, cosa que no es mi caso. Solo he utilizado los colores de las líneas 7 y 13, que definen el color de la barra superior.

config_files_to_copy

Este archivo enumera los archivos que deben copiarse en la raíz del sitio web generado:


FILES_TO_COPY =[
    "google5179c0eaff293e02.html",
    "robots.txt",
    "word-odt-a-html-ene-2026.pdf",
    "word-odt-vers-html-janv-2026.zip"
]

líneas 2-3: son necesarias para el seguimiento de Google del sitio generado (véase el apartado13 );
líneas 4-5: los archivos que desea copiar en la raíz de su sitio web para ponerlos a disposición de sus visitantes;

config

El archivo [config.py] es el archivo de configuración utilizado por los dos convertidores. Reúne toda la información que necesitan. Es un archivo que, en principio, nunca debería modificarse. Es complejo y, por eso, se ha decidido extraer los parámetros de configuración susceptibles de cambiar y colocarlos en archivos externos.


from config_urls import URLS
from config_texts import TEXTS
from config_code import CODE
from config_styles import STYLES
from config_colors import COLORS
from config_presentation import PRESENTATION
from config_files_to_copy import FILES_TO_COPY

config = {
    "toc": {
        "home_label": TEXTS["home_label"]
    },

    "mkdocs": {
        "site_name": TEXTS["site_name"],
        "site_url": URLS["site_url"],
        "site_description": TEXTS["site_description"],
        "site_author": "Serge Tahé",
        "repo_url": URLS["repo_url"],
        "repo_name": "GitHub",
        "use_directory_urls": False,

        "theme": {
            "name": "material",
            "custom_dir": "overrides",
            "features": [
                "navigation.sections",
                "navegación.índices",
                "navigation.expand",
                "toc.integrate",
                "navegación.top"
            ],
            "paleta": [
                {
                    "media": COLORS["theme"]["palette"]["light"]["media"],
                    "esquema": COLORS["tema"]["paleta"]["claro"]["esquema"],
                    "primary": COLORS["theme"]["palette"]["light"]["primary"],
                    "accent": COLORS["theme"]["palette"]["light"]["accent"],
                    "toggle": {
                        "icono": "material/brightness-7",
                        "name": TEXTS["toggle_to_dark"]
                    }
                },
                {
                    "media": COLORS["theme"]["palette"]["dark"]["media"],
                    "scheme": COLORS["theme"]["palette"]["dark"]["scheme"],
                    "primary": COLORS["theme"]["palette"]["dark"]["primary"],
                    "accent": COLORS["theme"]["palette"]["dark"]["accent"],
                    "toggle": {
                        "icon": "material/brightness-4",
                        "name": TEXTS["toggle_to_light"]
                    }
                }
            ]
        },

        "markdown_extensions": [
            "admonition",
            "attr_list",
            "pymdownx.superfences",
            "pymdownx.mark",
            {
                "pymdownx.highlight": {
                    "anchor_linenums": True,
                    "linenums": None
                }
            },
            "md_in_html",
            "footnotes"
        ],

        "extra_javascript": [
            "javascripts/focus.js"
        ],
        "extra_css": [
            "stylesheets/focus.css"
        ]
    },

    "footer": (
        "{% block footer %}\n"
        "  <div class=\"md-footer-meta md-typeset\">\n"
        "    <div class=\"md-footer-meta__inner\">\n\n"
        "      <div>\n"
        f"        <a href=\"{URLS['author_site']}\" target=\"_blank\">\n"
        f"          {URLS['author_site']}\n"
        "        </a>\n"
        "        <br>\n"
        f"        {TEXTS['footer_license_sentence']}\n"
        "      </div>\n\n"
        "    </div>\n"
        "  </div>\n"
        "{% endblock %}"
    ),

    "extra": {
        "analytics": {
            "provider": "google",
            "property": "G-XXXXXXXX"
        }
    },

    "document_title": {
        "style_names": STYLES["style_names"],
        "css": (
            f"font-size: {PRESENTATION['document_title']['font_size']}; "
            f"font-weight: {PRESENTATION['document_title']['font_weight']}; "
            f"margin-bottom: {PRESENTATION['document_title']['margin_bottom']}; "
            f"line-height: {PRESENTATION['document_title']['line_height']}; "
            f"color: {COLORS['document_title']['color']};"
        )
    },

    "code": {
        "case_insensitive_languages": ["sql", "html", "vbnet", "vbscript"],
        "palabras_clave_de_estilo": ["código"],
        "default_language": "text",
        "rich_line_height": PRESENTATION["code"]["rich_line_height"],
        "rich_font_family": PRESENTATION["code"]["rich_font_family"],
        "rich_font_size": PRESENTACIÓN["code"]["rich_font_size"],
        "detection_rules": CODE["detection_rules"],
        "copy_button": True,
        "copy_label": TEXTOS["copy_label"],
        "copy_copied_label": TEXTS["copy_copied_label"],
        "copy_only_recognized_language": True,
        "copy_min_lines": 4,
        "copy_allow_pygments_heuristic": True,
        "copy_style": {
            "container": PRESENTATION["copy_button"]["container"],
            "btn": (
                PRESENTATION["copy_button"]["btn"]
                + f"border:1px solid {COLORS['copy_button']['border']}; "
                + f"background:{COLORS['copy_button']['background']}; "
                + f"color:{COLORS['copy_button']['text']}; "
            ),
            "btn_hover": (
                f"background:{COLORS['copy_button']['background_hover']}; "
                + PRESENTATION["copy_button"]["btn_hover"]
            ),
            "btn_copied": PRESENTATION["copy_button"]["btn_copied"]
        }
    },

    "imágenes": {
        "shadow": {
            "enabled": PRESENTACIÓN["imágenes"]["sombra"]["enabled"],
            "border_radius": PRESENTATION["images"]["shadow"]["border_radius"],
            "zoomable": COLORS["images"]["shadow"]["zoomable"],
            "zoomable_hover": COLORS["images"]["shadow"]["zoomable_hover"],
            "lightbox": COLORS["images"]["shadow"]["lightbox"],
        }
    },

    "frame": {
        "header_bg_light": COLORS["frame"]["header_bg_light"],
        "header_bg_dark": COLORS["frame"]["header_bg_dark"],
        "header_top_border_light": COLORS["frame"]["header_top_border_light"],
        "header_top_border_dark": COLORS["frame"]["header_top_border_dark"],
        "header_top_border_width": PRESENTATION["frame"]["header_top_border_width"]
    },

    "files_to_copy": FILES_TO_COPY,

    "debug": True
}

líneas 1-7: se importan todos los archivos de configuración;
línea 9: el archivo de configuración es un script de Python. Define una única variable [config]. Esta es un diccionario que contendrá todos los valores de la configuración;
línea 11: el texto del enlace «Inicio»;
línea 14: el diccionario [mkdocs] configurará el archivo [mkdocs.yml] generado por el conversor Gemini / ChatGPT. Este archivo se utiliza posteriormente en el script [build] para construir un sitio HTML a partir del sitio MkDocs generado por el conversor;
líneas 15-20: configuran el sitio GitHub que alojará el sitio HTML creado a partir del documento ODT / DOCX (véase el apartado12 )
línea 21: esta línea es importante. Si no está presente, en lugar de mostrar una página HTML, el navegador abrirá la carpeta de dicha página;
línea 24: MkDocs ofrece varios temas para un sitio MkDocs / HTML. Aquí hemos elegido el tema «material», línea 24;
líneas 27-31: configuración de la navegación en el sitio. Esta se realizará mediante una tabla de contenidos situada en la columna izquierda de la página mostrada (línea 30);
líneas 33-54: definen dos paletas de colores: el modo claro (líneas 35-42) o el modo oscuro (líneas 45-52). Un icono en la barra superior de las páginas mostradas permite cambiar de uno a otro;
líneas 57-70: extensiones del lenguaje Markdown utilizado por MkDocs. Estas extensiones han sido generadas por Gemini a raíz de algunas de mis peticiones;
línea 73: el script [focus.js] es un script de JavaScript generado por Gemini. Está asociado al botón de la barra superior del sitio para mostrar u ocultar la tabla de contenidos;
línea 76: el CSS utilizado por este botón;
líneas 80-95: la definición del pie de página del sitio HTML. Ha sido generado por Gemini a partir de un texto de ejemplo que le proporcioné;
líneas 97-100: definición del marcador de Google Analytics (GA) que permitirá realizar un seguimiento de las visitas al sitio;
línea 99: introduzca aquí su código de GA;
líneas 103-112: el estilo del título del documento, el que aparece en el documento ODT/DOCX antes del primer título de nivel 1. El estilo indicado en la línea 104 cambia con cada documento ODT. En cambio, puede ser constante («Título») para los documentos DOCX. Por defecto, el conversor registra los estilos de todos los párrafos del documento ODT/DOCX que preceden al primer título de nivel 1. Por lo tanto, hay que realizar una primera ejecución, localizar el estilo del párrafo que se quiere convertir en título y, a continuación, introducirlo en el archivo [config_styles];;
líneas 105-111: el estilo CSS que desea aplicar al título del documento. Este título se encuentra en la página «Inicio», la primera página que se muestra al abrir el sitio;
línea 115: aquí se introducen los idiomas que no distinguen entre mayúsculas y minúsculas;
línea 116: los bloques de código se identifican por sus estilos en el documento ODT / DOCX. Puede haber varios. En la línea 116, se incluyen todas las palabras clave que permiten detectar un estilo de código. En mis documentos, todos mis estilos de código tienen la palabra «code» en su nombre. Y ningún otro estilo tiene esa palabra en su nombre. Por lo tanto, me basta con poner una sola palabra clave. Si hay varias, se separan con comas en la línea 116;
línea 117: establece el lenguaje por defecto. En el caso de un bloque de código «texto sin formato», si no se detecta ningún lenguaje, el lenguaje por defecto será «texto». Para MkDocs, esto significa un bloque de código sin coloración sintáctica. Es, por ejemplo, el caso de los resultados de ejecución;
línea 121: esta configuración se utiliza para los códigos en «texto sin formato» que inicialmente no tienen coloración sintáctica. Estas líneas tienen como objetivo proporcionarles una según el lenguaje utilizado en el bloque de código. Cabe señalar que si todos sus códigos están formateados porque proceden de un IDE como Eclipse, Visual Studio, etc., y no tiene ningún bloque de código de «texto sin formato» asociado a un lenguaje, entonces no tiene que introducir nada en esta parte de la configuración. Puede dejar vacías las tablas asociadas a los lenguajes. Todo esto se lleva a cabo en el archivo de configuración del código [config_code];
líneas 118-120: estas líneas se refieren a los bloques de código enriquecidos (negrita, cursiva, subrayado, resaltado, color de los caracteres). Estos bloques no se someten al mismo tratamiento que los bloques de código «texto sin formato». Se representan tal cual en el HTML;
- línea 118: establece la altura de las líneas de código;
- línea 119: establece la fuente CSS del bloque de código;
- línea 120: establece el tamaño de los caracteres;
líneas 144-152: establecen el aspecto de las imágenes;
líneas 154-160: establecen el aspecto del marco en el que se muestra la página web;
línea 162: la lista de archivos que se deben copiar en el directorio raíz del sitio HTML;
línea 164: [debug] en True permite los registros de los estilos de los párrafos que preceden al primer título de nivel 1 del documento ODT / DOCX. Es en estos registros donde se encontrará el estilo exacto del párrafo que servirá de título en la página de inicio del sitio;

Al final, al pasar de un documento ODT/DOCX a otro, no se modificará nada en el archivo [config.py]. Solo se modificarán los demás archivos de configuración.