7. Die Konfigurationsdateien der Konverter
![]() |
Die Konfigurationsdatei [config.py] fasst die Informationen zusammen, die sich von Dokument zu Dokument ändern können. Sie nutzt 6 weitere Konfigurationsdateien. In diesen haben wir die Parameter zusammengefasst, die sich beim Wechsel von einem Dokument zum anderen für die Konvertierung am ehesten ändern.
Die Datei [config.py] importiert den Inhalt der 6 anderen Konfigurationsdateien:
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
Diese Datei enthält die drei URLs aus der Konfiguration [config.py]. Diese ändern sich mit jedem Dokument.
URLS = {
"site_url": "https://stahe.github.io/de-word-odt-vers-html-janv-2026/",
"repo_url": "https://stahe.github.io/de-word-odt-vers-html-janv-2026",
"author_site": "https://tahe.developpez.com",
}
- Zeile 2: Die URL der Website, auf der Sie die vom Konverter erstellte HTML-Seite bereitstellen möchten;
- Zeile 3: die URL Ihres Git-Repositorys (siehe Abschnitt12 );
- Zeile 4: Die Website des Erstellers der Website. Diese URL wird am Ende der Seiten der Website platziert. Kann leer sein.
config_texts
Diese Datei enthält die Texte aus [config.py], die sich bei einer Sprachumstellung der generierten HTML-Website ändern können.
TEXTS = {
"home_label": "Startseite",
"site_name": "Konvertieren Sie ein Word- oder ODT-Dokument in eine statische, MkDocs-kompatible HTML-Website mit den KI-Modellen Gemini 3 und ChatGPT 5.2",
"site_description": "Konvertieren Sie ein Word- oder ODT-Dokument in eine statische, MkDocs-kompatible HTML-Website mit den KI-Modellen Gemini 3 und ChatGPT 5.2",
"toggle_to_dark": "In den Dunkelmodus wechseln",
"toggle_to_light": "Zum hellen Modus wechseln",
"footer_license_sentence": (
"Dieser Kurs-Tutorial, verfasst von <strong>Serge Tahé</strong>, wird der Öffentlichkeit gemäß den Bedingungen der\n"
" <em>Creative Commons-Lizenz: Namensnennung – Keine kommerzielle Nutzung –\n"
" Weitergabe unter gleichen Bedingungen 3.0 Unported</em>.\n"
),
"copy_label": "Kopieren",
"copy_copied_label": "Kopiert",
}
- Zeile 2: Der Name des ersten Links im Inhaltsverzeichnis. Sein Inhalt umfasst alles, was im Dokument vor der ersten Überschrift der Ebene 1 (Überschrift 1) steht. Dies ist der Anfang des Dokuments;
- Zeile 3: Der Titel des Dokuments. Er wird in der oberen Leiste der generierten Website angezeigt;
- Zeile 4: ebenfalls der Titel des Dokuments, diesmal für Suchmaschinen;
- Zeilen 5–6: die Tooltips, die angezeigt werden, wenn man mit der Maus über das Symbol in der oberen Leiste der Website fährt, um vom hellen Modus in den dunklen Modus oder umgekehrt zu wechseln;
- Zeilen 7–11: die Lizenz der Website. Sie wird in der Fußzeile der generierten Website angezeigt;
- Zeilen 12–13: Der auf der Website angezeigte Code wird zusammen mit einer Schaltfläche angezeigt, über die man den Code in die Zwischenablage kopieren kann. Zeile 12 ist die Beschriftung der Schaltfläche vor dem Kopieren, Zeile 13 die Beschriftung, nachdem der Code kopiert wurde;
So sieht diese Datei für eine englische Version des Dokuments aus:
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": "Konvertieren Sie ein Word- oder ODT-Dokument mithilfe von Gemini 3 und ChatGPT 5.2 AI in eine statische HTML-Website",
"toggle_to_dark": "Zum Dunkelmodus wechseln",
"toggle_to_light": "Zum hellen Modus wechseln",
"footer_license_sentence": (
'Dieses Tutorial, verfasst von <strong>Serge Tahé</strong>, wird der Öffentlichkeit unter den Bedingungen der\n'
'<em>Creative Commons Attribution – Non-Commercial –\n'
'ShareAlike 3.0 Unported</em> zur Verfügung gestellt.'
),
"copy_label": "Kopieren",
"copy_copied_label": "Kopiert",
}
config_styles
Diese Datei dient dazu, den Namen des Stils für den Dokumenttitel anzugeben. Bei einem DOCX-Dokument ist dies in der Regel „Titel“, bei einem ODT-Dokument variiert dies jedoch von Dokument zu Dokument.
STYLES = {
"style_names": [
"P1"
]
}
- Zeile 2: [styles_names] ist ein Array. Hier können die Namen der Stile eingegeben werden, die der Titel des Dokuments haben kann;
- Zeile 3: Das Dokument [word-odt-vers-html-janv-2026.odt] hat eine Überschrift mit dem Stil P1;
config_code
Code-Blöcke im DOCX- oder ODT-Dokument können in zwei Formen vorkommen:
- als formatierten Code (Farben, Fettdruck, Kursivschrift, …). In diesem Fall wird er unverändert in die HTML-Seite kopiert;
- als reiner Text (Plain Text). In diesem Fall werden den Konvertern Anweisungen gegeben, damit sie selbst die im Code-Block verwendete Sprache erkennen. Dazu werden Schlüsselwörter angegeben:
CODE = {
# Regeln zur automatischen Spracherkennung basierend auf dem Inhalt
"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",
"Antwort", "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": [
"# ", "## ", "### ", "**", "__", "; "
"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": (
"box-shadow:0 3px 10px rgba(0,0,0,.18); "
"transform:translateY(-1px);"
),
"btn_copied": "opacity:.85;"
},
# -------------------------------------------------------------------------
# Bilder
# -------------------------------------------------------------------------
"images": {
"shadow": {
"enabled": True,
"border_radius": "8px"
}
},
# -------------------------------------------------------------------------
# Rahmen / Kopfzeilenrand
# -------------------------------------------------------------------------
"frame": {
"header_top_border_width": "4px"
}
}
Wenn Sie möchten, können Sie das Erscheinungsbild ändern:
- Zeilen 5–10: Titel des Dokuments;
- Zeilen 15–19: der Zeilen mit Rich-Text-Code;
- Zeilen 24–45: der Schaltfläche [Kopieren], mit der Sie Code in die Zwischenablage kopieren können;
- Zeilen 50–55: der Schatten der Bilder;
- Zeilen 60–62: des Rahmens, der die obere Leiste der Seiten der Website umgibt;
config_colors
In dieser Datei legen Sie die Farben Ihrer Website fest, vor allem die Hintergrundfarbe des oberen Balkens auf den Seiten:
COLORS = {
"theme": {
"palette": {
"light": {
"media": "(prefers-color-scheme: light)",
"scheme": "default",
"primary": "teal",
"accent": "purple"
},
"dark": {
"media": "(prefers-color-scheme: dark)",
"scheme": "slate",
"primary": "teal",
"accent": "purple"
}
}
},
"frame": {
# "header_bg_light": "#1E88E5", (blau)
"header_bg_light": "",
"header_bg_dark": "",
"header_top_border_light": "#CC7722",
"header_top_border_dark": "#CC7722#CC7722"
},
"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": {
"shadow": {
"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)"
}
}
}
Hier muss man sich ein wenig mit CSS auskennen, was bei mir nicht der Fall ist. Ich habe nur die Farben aus den Zeilen 7 und 13 verwendet, die die Farbe des oberen Balkens festlegen.
config_files_to_copy
Diese Datei listet die Dateien auf, die in das Stammverzeichnis der generierten Website kopiert werden müssen:
FILES_TO_COPY =[
"google5179c0eaff293e02.html",
"robots.txt",
"de-word-odt-zu-html-Jan-2026.pdf",
"de-word-odt-vers-html-janv-2026.zip"
]
- Zeilen 2–3: sind für die Google-Verfolgung der generierten Website erforderlich (siehe Abschnitt13 );
- Zeilen 4–5: Die Dateien, die Sie in das Stammverzeichnis Ihrer Website kopieren möchten, um sie Ihren Besuchern zur Verfügung zu stellen;
config
Die Datei [config.py] ist die Konfigurationsdatei, die von beiden Konvertern verwendet wird. Sie enthält alle Informationen, die diese benötigen. Diese Datei sollte normalerweise niemals geändert werden. Da sie komplex ist, haben wir beschlossen, die Konfigurationsparameter, die sich ändern könnten, herauszulösen und in externe Dateien zu verschieben.
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",
"navigation.indexes",
"navigation.expand",
"toc.integrate",
"navigation.top"
],
"palette": [
{
"media": COLORS["theme"]["palette"]["light"]["media"],
"scheme": COLORS["theme"]["palette"]["light"]["scheme"],
"primary": COLORS["theme"]["palette"]["light"]["primary"],
"accent": COLORS["theme"]["palette"]["light"]["accent"],
"toggle": {
"icon": "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"],
"style_keywords": ["code"],
"default_language": "text",
"rich_line_height": PRESENTATION["code"]["rich_line_height"],
"rich_font_family": PRESENTATION["code"]["rich_font_family"],
"rich_font_size": PRESENTATION["code"]["rich_font_size"],
"detection_rules": CODE["detection_rules"],
"copy_button": True,
"copy_label": TEXTS["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"]
}
},
"images": {
"shadow": {
"enabled": PRESENTATION["images"]["shadow"]["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
}
- Zeilen 1–7: Alle Konfigurationsdateien werden importiert;
- Zeile 9: Die Konfigurationsdatei ist ein Python-Skript. Es definiert eine einzige Variable [config]. Diese ist ein Wörterbuch, das alle Werte der Konfiguration enthält;
- Zeile 11: Der Text des Links „Startseite“;
- Zeile 14: Das Wörterbuch [mkdocs] konfiguriert die vom Gemini/ChatGPT-Konverter generierte Datei [mkdocs.yml]. Diese Datei wird anschließend vom Skript [build] verwendet, um aus der vom Konverter generierten MkDocs-Datei eine HTML-Website zu erstellen;
- Zeilen 15–20: Konfigurieren die GitHub-Seite, auf der die aus dem ODT-/DOCX-Dokument erstellte HTML-Seite gehostet wird (siehe Abschnitt12 )
- Zeile 21: Diese Zeile ist wichtig. Fehlt sie, öffnet der Browser statt einer HTML-Seite den Ordner dieser Seite;
- Zeile 24: MkDocs bietet mehrere Designs für eine MkDocs-/HTML-Website an. Hier haben wir das Design „material“ gewählt (Zeile 24);
- Zeilen 27–31: Konfiguration der Navigation auf der Website. Diese erfolgt über ein Inhaltsverzeichnis in der linken Spalte der angezeigten Seite (Zeile 30);
- Zeilen 33–54: Definieren zwei Farbpaletten: den hellen Modus (Zeilen 35–42) oder den dunklen Modus (Zeilen 45–52). Über ein Symbol in der oberen Leiste der angezeigten Seiten kann zwischen den beiden Modi gewechselt werden;
- Zeilen 57–70: Erweiterungen der von MkDocs verwendeten Markdown-Sprache. Diese Erweiterungen wurden von Gemini auf meine Anfrage hin generiert;
- Zeile 73: Das Skript [focus.js] ist ein von Gemini generiertes JavaScript-Skript. Es ist mit der Schaltfläche in der oberen Leiste der Website verknüpft, um das Inhaltsverzeichnis ein- oder auszublenden;
- Zeile 76: Das von dieser Schaltfläche verwendete CSS;
- Zeilen 80–95: Die Definition der Fußzeile der HTML-Website. Wurde von Gemini anhand eines Textbeispiels generiert, das ich ihm gegeben habe;
- Zeilen 97–100: Definition des Google-Analytics-Tags (GA), mit dem die Besuche der Website verfolgt werden können;
- Zeile 99: Fügen Sie hier Ihren GA-Tag ein;
- Zeilen 103–112: Der Stil des Dokumenttitels, der im ODT-/DOCX-Dokument vor der ersten Überschrift der Ebene 1 steht. Der in Zeile 104 angegebene Stil ändert sich bei jedem ODT-Dokument. Bei DOCX-Dokumenten kann er hingegen konstant sein („Titel“). Standardmäßig protokolliert der Konverter die Stile aller Absätze des ODT-/DOCX-Dokuments, die vor der ersten Überschrift der Ebene 1 stehen. Sie müssen also zunächst einen ersten Durchlauf durchführen, den Stil des Absatzes identifizieren, den Sie als Überschrift verwenden möchten, und diesen dann in die Datei [config_styles] eintragen;
- Zeilen 105–111: den CSS-Stil, den Sie der Überschrift des Dokuments zuweisen möchten. Diese Überschrift befindet sich auf der Seite „Startseite“, der ersten Seite, die beim Öffnen der Website angezeigt wird;
- Zeile 115: Hier geben Sie die groß-/kleinschreibungsunabhängigen Bezeichnungen ein;
- Zeile 116: Die Codeblöcke werden im ODT-/DOCX-Dokument anhand ihrer Stile identifiziert. Es kann mehrere davon geben. In Zeile 116 fügen Sie alle Schlüsselwörter ein, mit denen ein Codestil erkannt werden kann. In meinen Dokumenten enthalten alle meine Code-Stile das Wort „code“ in ihrem Namen. Und kein anderer Stil enthält dieses Wort in seinem Namen. Daher reicht es aus, ein einziges Schlüsselwort anzugeben. Wenn es mehrere gibt, trennt man sie in Zeile 116 durch Kommas;
- Zeile 117: Legt die Standardsprache fest. Bei einem „Plain-Text“-Codeblock ist die Standardsprache „text“, wenn keine Sprache erkannt wird. Für MkDocs bedeutet dies einen Codeblock ohne Syntaxhervorhebung. Dies ist beispielsweise bei Ausführungsergebnissen der Fall;
- Zeile 121: Diese Konfiguration wird für „Plain-Text“-Codes verwendet, die ursprünglich keine Syntaxhervorhebung haben. Diese Zeilen dienen dazu, ihnen eine solche entsprechend der im Code-Block verwendeten Sprache zuzuweisen. Beachten Sie: Wenn Ihr Code vollständig formatiert ist, da er aus einer IDE wie Eclipse, Visual Studio usw. stammt, und Sie keinen „Plain-Text“-Code-Block haben, der einer Sprache zugeordnet ist, müssen Sie in diesem Teil der Konfiguration nichts eingeben. Sie können die Tabellen für die Sprachen leer lassen. All dies erfolgt in der Code-Konfigurationsdatei [config_code];
- Zeilen 118–120: Diese Zeilen betreffen die formatierten Code-Blöcke (Fettdruck, Kursivschrift, Unterstreichung, Hervorhebung, Schriftfarbe). Diese Blöcke werden nicht wie „Plain-Text“-Code-Blöcke verarbeitet. Sie werden im HTML unverändert wiedergegeben;
- Zeile 118: Legt die Zeilenhöhe der Codezeilen fest;
- Zeile 119: Legt die CSS-Schriftart des Code-Blocks fest;
- Zeile 120: Legt die Schriftgröße fest;
- Zeilen 144–152: legen das Erscheinungsbild der Bilder fest;
- Zeilen 154–160: legen das Erscheinungsbild des Rahmens fest, in dem die Webseite angezeigt wird;
- Zeile 162: Die Liste der Dateien, die in das Stammverzeichnis der HTML-Website kopiert werden sollen;
- Zeile 164: [debug] auf True setzt, werden die Stilprotokolle der Absätze vor der ersten Überschrift der Ebene 1 des ODT-/DOCX-Dokuments aktiviert. In diesen Protokollen findet man den genauen Stil des Absatzes, der als Überschrift auf der Startseite der Website dienen soll;
Letztendlich muss man beim Wechsel von einem ODT-/DOCX-Dokument zum anderen nichts an der Datei [config.py] ändern. Es werden nur die anderen Konfigurationsdateien angepasst.
